ВеCSSти с полей

Новые кандидаты в рекомендации W3C: CSS Display и CSS Cascading 3 и 4

28 августа модуль CSS Display 3 уровня, за развитием которого мы наблюдаем с его появления, следя за его новинками и хорошо забытыми старыми секретами, стал кандидатом в рекомендации. То есть спецификация считается полностью теоретически проработанной и готовой к реализации. Отличий от предыдущего черновика совсем немного: уточнено, что для «особых» элементов, для которых display:contents работает как none, оно будет и вычисляться как none, а также уточнено определение контекста форматирования и оговорено, что display не анимируется (даже дискретно).

Иногда они возвращаются: псевдоэлементы с префиксом -webkit- станут валидными в Firefox

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

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

Первый публичный черновик модуля величин и единиц CSS 4 уровня

Рабочая группа CSS выпустила первый публичный черновик модуля величин и единиц 4 уровня (CSS Values and Units Module Level 4). Вот главные его новинки по сравнению с тем, что было:

  • Новые единицы длины относительно шрифта: cap, lh, rlh и ic. Единица cap равна высоте заглавных букв текущего шрифта (удобно для стыковки иконок с текстом, без такой «магии»), lh — вычисленной высоте строки текущего элемента, rlh — вычисленной высоте строки корневого элемента, а ic — ширине иероглифа 水 («вода»), принятого за «эталон» полноширинного символа для текстов на восточноазиатских языках;
  • Новые единицы длины относительно вьюпорта — vi и vb. Это аналоги vw и vh, но с учетом направления текста: vi — по инлайновой оси (как идет текст в строках), vb — по блочной (как идут абзацы);
  • Новые функции min() — выбрать наименьшее значение из списка, max() — выбрать наибольшее, и clamp() — ограничить значение нижним и верхним пределами;
  • Функция toggle() для циклического перебора нескольких значений (напр., для оформления разных уровней вложенности древовидного списка);
  • Более «умная» функция calc(). Например, наконец станет можно делить длину на длину (скажем, calc(75% / 10em)), а при подстановке результата calc() туда, где нужно целое число (напр. в grid-template-columns), этот результат будет автоматически округляться.

Кроме того, уточнены правила преобразования CSS-размерностей при математических операциях с ними, а также сериализации математических функций при чтении CSS-значений скриптом.

Теперь, когда черновик официально опубликован, можно смело требовать от браузеров всё это реализовать, так что не стесняйтесь писать им в багтрекеры! :)

Свежие обновления CSS-черновиков: переполнение 3 уровня, строчная раскладка 3 уровня, гриды 2 уровня

За последнюю неделю рабочая группа CSS в W3C обновила опубликованные версии трех интересных черновиков спецификаций: 31 июля — CSS Overflow Module Level 3 (модуль переполнения 3 уровня), 2 августа — CSS Inline Layout Module Level 3 (модуль строчной раскладки 3 уровня) и, наконец, 4 августа — CSS Grid Layout Module Level 2 (грид-раскладка 2 уровня).

Алгебра в calc(), новая специфичность селекторов 4 уровня и другие майские новинки CSS

HTML, CSS, JS

Вчерашняя (уже третья за май 2018 г.) телеконференция Рабочей группы CSS принесла несколько сюрпризов: в функцию calc() добавили долгожданную возможность делить значения одинаковой размерности друг на друга (например, calc(500px / 100vw)), получая безразмерные коэффициенты (а в перспективе — вообще делать любые математически допустимые операции с CSS-величинами, скажем, высчитывать площади фигур в квадратных пикселях, умножая высоту на ширину, или делить расстояние на время, получая скорость анимации в пикселях в секунду). А у псевдоклассов :matches(), :not() (со списком аргументов) и :has() из модуля селекторов 4 уровня изменились правила специфичности — теперь она не будет высчитываться динамически в зависимости от того, какой аргумент из списка реально совпал, а всегда браться по самому специфичному из аргументов. Так что давнюю реализацию в WebKit и недавнюю частичную в Chrome опять придется переделывать — но, по идее, для будущих реализаций новый алгоритм станет проще.

CSS-2018: W3C выбирает, каким возможностям пора дать «зеленый свет»

Хотя у языка CSS уже давно нет версий (т.е. «CSS3» уже никогда не будет «готов», а «CSS4» и выше вообще не будет), Рабочая группа CSS периодически выпускает «снимки» (snapshots), отражающие реальное состояние CSS на тот или иной момент. Последний такой «снимок», CSS-2017, вышел год назад, с тех пор W3C решил сделать их ежегодными — в чем-то похоже, как у спецификаций HTML5.x и ES20xx. Уже есть редакторский черновик очередного «снимка», CSS-2018.

Гриды 2 уровня не за горами!

По инсайдерской информации из W3C, просочившейся наружу в виде твита Рейчел Эндрю, рабочая группа CSS решила опубликовать первый рабочий черновик CSS-гридов второго уровня. С долгожданными подсетками и не только!

Пока CSS-гриды второго уровня существуют только в виде редакторского… даже не черновика, а «неофициального предложения», сборника набросков «идей на будущее». Зато вариантов синтаксиса для подсеток в нем целых 2, включая гибкую возможность создавать подсетки только по одной оси — только вдоль рядов или только вдоль колонок. Еще в числе этих неофициальных набросков — интересная идея грид-интервалов, сохраняющих свои пропорции. А тема пропорций в эти дни вообще была популярна.

Новые спецификации CSS-селекторов

Привычные нам CSS-селекторы 3 уровня стали рекомендацией W3C еще в 2011-м (почти одновременно с CSS2.1), а черновик селекторов 4 уровня был опубликован еще в 2013-м и очень долго не менялся. Но на этой неделе рабочая группа CSS спохватилась и показала, что работа над селекторами не заброшена. С перерывом в два дня обе спецификации обновились: 30 января — старая, а 1 февраля — новая.

перевод

Новая политика WHATWG: шаг к единому стандарту HTML?

11 декабря рабочая группа WHATWG объявила о важных изменениях в своей работе. С этого момента у WHATWG есть своя патентная политика, во многом схожая с патентной политикой W3C (специальные представители фирм-участников анализируют специальные копии стандарта на предмет патентных проблем, в «живой стандарт» попадает только то, что прошло эту проверку). Благодаря этому к WHATWG смог подключиться Microsoft, и теперь WHATWG объединяет все 4 ведущих компании-разработчика браузерных движков — Google, Mozilla, Microsoft и Apple. Также у WHATWG появилась новая «управляющая группа», которая будет следить за соответствием разрабатываемых стандартов этой политике, куда вошли представители всех 4 компаний.

Явный контроль над специфичностью в CSS?

Мы уже привыкли, что специфичность CSS-селекторов и приоритет соответствующих им правил — одно и то же. Но всегда ли должно быть так? Таким вопросом озадачила на этой неделе рабочую группу CSS легендарная Лия Веру.

В ишью на гитхабе Лия обратила внимание на то, что принцип «более конкретные CSS-правила переопределяют более общие» — всего лишь эвристика. В большинстве простых случаев она помогает, но нередко эта эвристика дает сбой, и тогда приходится прибегать к хакам типа повторения одного класса в селекторе несколько раз или добавления лишних :not(). Лия предлложила вместо этих хаков ввести новый функциональный псевдокласс (например, :filter()), похожий на :matches() из селекторов 4 уровня, но c нулевой специфичностью (не меняющий специфичность остальной части селектора).

Новый рабочий процесс W3C в действии: прощайте, старые (X)HTML!

HTML5 с плашкой устаревшей рекомендации

Не прошло и полгода с последнего изменения рабочего процесса W3C, как руководству Консорциума поступило предложение применить наконец этот новый процесс на деле. И списать уже неактуальные спецификации HTML в музей, чтобы они не запутывали разработчиков, «прикидываясь» актуальными.

Модуль CSS-изоляции (CSS Containment Level 1) стал кандидатом в рекомендации

Еще один модуль CSS, о котором мы рассказывали, незаметно дозрел до статуса, с которого W3C советует начинать повседневное использование новинок.

Свойство contain позволяет ограничивать изменения дерева отрисовки, перерисовку CSS-боксов и изменения их размеров в пределах элемента. Поэтому оно так важно для динамичных интерфейсов и компонентного веба, позволяя оптимизировать отдельные компоненты и интерфейсы в целом. Но, как и любую оптимизацию, новинку нельзя применять бездумно, всегда тестируйте производительность с разными значениями этого свойства и выбирайте по лучшему практическому результату. Работает пока только в Blink-браузерах (Хроме и «хромятах»), в Firefox в разработке (частично работает за флагом).

Свойства для интервалов (*-gap) становятся универсальными

Из Парижа (на фото), где недавно проходила встреча рабочей группы CSS, прилетела занятная новость: свойства grid-row-gap и grid-column-gap, а также их сокращение grid-gap…

Свойства для выравнивания всего и новинки Display «повзрослели» на релиз

На прошлой неделе рабочая группа CSS опубликовала обновленные версии двух важных модулей CSS 3 уровня — Box Alignment и CSS Display. Статус у них пока прежний (черновик), но по планам редакторов следующая версия должна стать кандидатом в рекомендации — в общем, «почти готово». А буквально через день обновился еще один черновик — CSS Motion Path 1 уровня.

Первый публичный черновик модуля CSS-шрифтов 4 уровня

11 июля рабочая группа CSS опубликовала первый публичный черновик модуля CSS-шрифтов 4 уровня. То есть это уже не сырая идея, а осязаемый и обсуждаемый проект, и разработчики браузеров уже могут вовсю экспериментировать с его новинками.

Их немало: управление отображением шрифта при загрузке (варианты на выбор — сразу отобразить текст шрифтом по умолчанию, а после загрузки шрифта подменить, не отображать текст первых 3 секунды загрузки шрифта, либо оставить шрифт по умолчанию, если не удалось загрузить шрифт быстро/моментально), причем для каждого шрифта это можно задавать отдельно, выбор угла наклона для наклонного шрифта, ограничение максимального и минимального размера шрифта, унификация размеров букв из разных шрифтов и многое другое, вплоть до многоцветных шрифтов и управления их палитрой. Так что стоит взглянуть. Тем более что некторые новинки (например, font-display, о котором упоминалось в статье Зака Лезермана о загрузке шрифтов, которая у нас переведена) уже работают в браузерах!