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

Праздничные новогодние хлопоты не мешают Рабочей группе CSS обновлять спецификации. Накануне нового года вышли три обновленных модуля CSS:

• Значения и единицы 4 уровня (рабочий черновик). Добавлен параграф о вычислении значений типа URL (он унифицирован со спецификацией Fetch, что автоматом снимает вопросы о взаимодействии c CORS и т.п.). Семейство «вьюпортных» единиц (vw, vh…) пополнилось вариантами для большого, маленького и динамического вьюпорта (учитывает скрытие/раскрытие строки адреса и др. панелей мобильных браузеров) и их логическими версиями для разных напралений письма (итого 24 шт. — пожалуй, стоит целой статьи!:), а все шрифтовые единицы (ex, ch, ic, cap, lh) получили свою пару для шрифта корневого элемента, подобно паре em/rem. Все математические функции тоже в силе. Ожидается, что в таком виде этот модуль скоро станет кандидатом в рекомендации. А вот так и не прижившиеся в браузерах функция toggle() и типизированная attr() — увы — отложены на следующий, 5-й уровень.

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

Глоссарий

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

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

«Masonry-раскладка», она же «плиточная верстка», она же «раскладка кирпичиками», она же «Cascading Grid», она же — вернее, один из ее вариантов — «верстка как у Pinterest», она же… в общем, задача верстки такого типа макетов известна верстальщикам очень давно, под многими именами. Раньше на чистом CSS она до конца не решалась. Можно было добиться внешне похожего результата для частных случаев, но какой-то нюанс ускользал. На практике приходилось использовать JS-библиотеки — прежде всего Masonry, написанную Дейвом ДеСандро и, собственно, давшую название такой раскладке.

И вот в Рабочей группе по CSS появилось предложение, а спустя считанные месяцы — и его экспериментальная реализация, которую уже можно пощупать в Firefox Nightly/Beta за флагом. Кроме понятной радости, новинка успела вызвать немало путаницы и споров. Попробуем разобраться.

Когда-то у CSS была мечта. Светлое будущее, прекрасное далёко, в котором хотелось очутиться побыстрее, о котором слагали песни. У него было краткое и запоминающееся имя – «CSS3».

Как всякое будущее, оно было туманным: отдельного стандарта с таким названием никогда не было. Но именно с ним ассоциировалось всё новое и крутое, с чем уже можно было поиграть в экспериментальных реализациях за префиксами и что вот-вот должно было появиться в браузерах.

Годы шли, CSS взрослел. То будущее стало повседневностью, а затем незаметно отошло в прошлое. Мы свыклись с отсутствием у CSS версий, худо-бедно научились ориентироваться в зоопарке его модулей (или вот-вот научимся:), и даже нашли способ отслеживать его эволюцию по периодическим «снимкам состояния». Но всё равно на фоне JS, где на смену вроде бы только что «взлетевшему» ES6/2015 уже приходит ES2020/11, а модные фреймворки и вовсе мелькают как в калейдоскопе, CSS производит на новичков впечатление какого-то застоя (а зря!). И вот недавно сразу несколько «звезд» CSS-сообщества выступили с идеей вернуть CSS мечту.

На вчерашней телеконференции участники рабочей группы CSS в W3C обсудили, какие модули спецификации войдут в следующее официальное определение CSS, которое заменит нынешний CSS-2015. Список модулей, более-менее отсортированный по убыванию готовности и разбитый на группы «Уже есть в списке», «Будут добавлены» и «Пока не в списке», в черновом виде уже доступен на гитхабе.

Первый и почти гарантированный кандидат «на влёт» в новое официальное определение — это модуль CSS-переменных, точнее, пользовательских свойств. В уходящем году о них немало писали и рассказывали на конференциях и митапах, и неспроста: они могут такое, что препроцессорам и не снилось. А теперь еще и поддерживаются почти во всех браузерах! В наступающем году поддержка станет еще лучше (Edge уже понемногу исправляется).

Среди рассматриваемых кандидатов также модули выравнивания блока 3 уровня (обобщение всевозможных align-* и justify-* для разных ситуаций), грид-раскладки 1 уровня (уж его-то точно надо!), Ruby-раскладки 1 уровня (создавался для крошечных подсказок к восточным текстам иероглифами, но сейчас, в эпоху всепроникающих эмодзи, иероглифами пишут почти все!:), текста 3 уровня (всё про межсловные пробелы, переносы слов, выключку текста и т.п.), направления письма 3 уровня (важно для мультиязычных сайтов, а еще влияет на направление главной и поперечной осей в тех же флексбоксах) и CSS-фильтров 1 уровня (мощный инструмент для впечатляющих визуальных эффектов с графикой и не только).

Так что следите за новостями! И с наступающим Новым годом, с открывающимися новыми возможностями!

Как стало известно из секретных¹ источников, близких к W3C, экспериментальный статус наших любимых флексбоксов почти наверняка останется в уходящем году. На прошлой неделе во время тайного совещания² члены Рабочей группы CSS приняли решение в ближайшее время перевести флексбоксы в статус кандидата в рекомендации. Т.е. в переводе с тайного языка W3C на обычный человеческий — объявить, что спецификация полностью готова, и браузеры могут смело ее реализовывать, а мы — использовать.

И в самом деле, сколько уже можно ждать. По W3Cшной традиции, для статуса кандидата в рекомендации нужно как миниум 2 совместимых реализации. А флексбоксы на сегодняшний день поддерживают больше 95% браузеров! В т.ч. больше 80% — без префикса. Для постсоветских стран CanIUse показывает цифры чуть поменьше, но их можно смело увеличивать в уме — там не учитываются Яндекс-браузер и другие «хромята», доля которых в нашей статистике вполне существенна. Если их приплюсовать, цифры будут недалеки от мировых.

В блоге разработчиков Safari опубликована статья о новых CSS-селекторах, поддерживаемых в последних сборках WebKit (в т.ч. в Safari 9). Речь идет о новом функциональном псевдоклассе :matches(), а также расширении функциональных псевдоклассов :not(), :nth-child() и :nth-last-child().

Селектор :matches() позволяет удобно группировать и более компактно записывать похожие селекторы (напр. .syntax-highlighted :matches(.css-tag, .css-keyword) вместо .syntax-highlighted .css-tag, .syntax-highlighted .css-keyword). Селектор :not() теперь тоже может содержать список селекторов (модуль селекторов 3 уровня разрешал ему лишь простой селектор, т.е. один тег, класс, псевдокласс или ID).

Будущее настало незаметно

Когда-то название «CSS3» было символом прогресса и светлого будущего веб-технологий. Долгие годы мы радовались, глядя на растущую поддержку браузерами закругленных уголков и множественных фонов с медиавыражениями, и мечтали о временах, когда «спецификация CSS3 будет готова» и «браузеры будут полностью поддерживать CSS3»…