Cтатьи по тегу «CSS»

Перевод статьи Don’t Fight the Cascade, Control It!
с сайта css-tricks.com для css-live.ru. Автор — Мадс Стуманн.

Если делать всё правильно и использовать наследование, которое даёт CSS-каскад, то конечного CSS нужно будет писать меньше. Но поскольку часто мы загружаем CSS из разных мест — из-за чего его бывает сложно структурировать и поддерживать, — каскад может сильно расстроить, и CSS из-за него окажется больше, чем нужно.

Несколько лет назад Гарри Робертс придумал ITCSS — умный способ структурировать CSS.

В сочетании с БЭМ ITCSS стал популярным способом написания и организации CSS.

Но даже с ITCSS и БЭМ иногда возникают большие трудности с каскадом. К примеру, я уверен, что вам приходилось делать @import внешних CSS-компонентов в определённом месте, чтобы ничего не сломать, или прибегать к жуткому !important.

Перевод статьи How to Read W3C Specs с сайта alistapart.com для css-live.ru. Автор — Джей Девид Эйсенберг.

(Примечание редакции CSS-live.ru: оригинал статьи написан более 20 лет назад. Не удивляйтесь, это не баг, а фича. Иногда полезно оглянуться назад и увидеть за калейдоскопом новинок какие-то неизменные основы. Или лучше понять ход прогресса технологий и порадоваться ему еще больше. В любом случае, многое в статье актуально по сей день, и уж точно стоит обсудить. Приятного чтения и приобщения к суперсиле спецификаций!)

Консорциум Всемирной паутины — это хранитель спецификаций по всем технологиям в вебе. Как веб-разработчик, вы могли заходить к ним на сайт в поиске ответа на вопрос про XHTML или чтобы узнать больше о новой технологии, такой как «Объекты форматирования XSL» или «Масштабируемая векторная графика»

Итак, вы обращаетесь к спецификации и практически тут же оказываетесь в замешательстве. Это невозможно читать, думаете вы. Но, на самом деле, это читаемо, если учесть один ключевой момент. Но всё проясняется, если учесть одну важную вещь:

Диклеймер: в статье нет ничего про браузеры и поддержку, только теория. Статья представляет собой неполный перевод спецификации c некоторыми дополнениями.

Глоссарий

Факт 1: цвет — это не характеристика излучения, это характеристика реакции человеческого мозга на излучение. То есть два излучения с разным спектром могут иметь один цвет с нашей точки зрения.

Факт 2: далеко не все цвета, которые видит среднестатистический человек, можно воспроизвести аппаратными средствами, в том числе с помощью вашего монитора.

Не секрет, что в последние годы веб развивается крайне стремительно. Периодически выходят новые библиотеки, фреймворки и другие полезные для нас инструменты. Всё это безусловно помогает нам решать повседневные задачи. Но в погоне за популярными новинками мы совсем не обращаем внимание на истоки. Многие начинающие разработчики начинают знакомство с кодом именно с инструментов, а не с фундаментальных вещей. Обычно это связывают с тем, что сегодня подавляющее большинство вакансий для фронтенд-разработчиков напичканы «модными» и «хайповыми» словечками вроде «React», «Vue», «styled-components», и множеством других. Поэтому разработчикам важно изучать именно эти вещи, чтобы не остаться без работы. Но разве причина только в этом? Именно поэтому разработчикам не важны основы? Думаю, что только отчасти.

А в чём, собственно, проблема, и она точно есть?

При всей парадоксальности заголовка, будто взятого из фантастики про «временные петли», это правда. Три недели назад рабочая группа по CSS опубликовала первые публичные рабочие черновики двух модулей CSS. Сегодня к ним добавились еще аж 4 первых публичных черновика (включая два модуля 5 уровня). И многие новинки роднит то, что часть их функций давно работает почти во всех браузерах, и даже в реальных проектах!

Вдогонку статье о нестандартных (но иногда полезных) штуках с префиксом -webkit- пришла новость от разработчиков Firefox: они собираются изменить свой парсер CSS, чтобы любые псевдоэлементы вида ::-webkit-что-угодно считались валидными селекторами и не заставляли весь блок правил игнорироваться. Причина всё та же — совместимость: так делают WebKit и Blink, многие авторы пишут код в расчете на это поведение, и в Firefox этот код предсказуемо ломается (хотя по текущему стандарту так и должно быть). Так что не полагайтесь на хаки вида ::-webkit-nonsense, .something-useful {/*код только для «вебкитят»*/} и на всякий случай проверьте, не осталось ли подобного в ваших проектах!

Добавлено 28.08.2018: это требование совместимости пришлось закрепить в спецификации CSS-селекторов 4 уровня.

Подборка свежих эффектов, интересных идей и полезных наработок.

Подборка свежих эффектов, интересных идей и полезных наработок.

Подборка свежих эффектов, интересных идей и полезных наработок.

Подборка свежих эффектов, интересных идей и полезных наработок.

Подборка свежих эффектов, интересных идей и полезных наработок.

Подборка свежих эффектов, интересных идей и полезных наработок.

Подборка свежих эффектов, интересных идей и полезных наработок.

Подборка свежих эффектов, интересных идей и полезных наработок.

Перевод статьи Third party CSS is not safe с сайта jakearchibald.com, опубликовано на css-live.ru с разрешения автора — Джейка Арчибальда.

Несколько дней назад немало шума наделал «кейлоггер», написанный на CSS.

Одни требовали, чтобы браузеры это «починили». Другие вникли чуть поглубже и заметили, что уязвимость коснулась лишь сайтов, написанных на фреймворках типа Реакта — мол, это Реакт виноват. Но на самом деле проблема в том, что сторонний контент считают «безопасным».