стандарты

Стандарт для нестандартного

Стандарты, увы,  не всегда поспевают за нашими потребностями. Иногда соблазн быстро решить задачу одной-двумя нестандартными строчками бывает слишком велик. Особенно если по этой строчке не видно, что она нестандартная. Когда-то давно, в эпоху префиксов, некоторые браузеры любили выпускать свою отсебятину под видом экспериментальных новинок — авось никто разбираться не будет. А в самых запущенных случаях браузеры и вовсе годами тихо саботируют стандарт, принятый остальными, не оставляя разработчикам другого выбора.

В какой-то момент оказалось, что такими нестандартными штуками в вебе достаточно активно пользуются. И бедным браузерам, чтобы не вылететь из конкурентной гонки, волей-неволей пришлось худо-бедно эту отсебятину поддерживать. Фактически, она стала стандартом де-факто. И практикам из WHATWG ничего не осталось, как написать для этих нестандартных штук свой стандарт, названный стандартом совместимости (Compatibility Standard). Чем же он нас порадует?

Первый публичный черновик модуля величин и единиц 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 уровня).

Эффективная работа над стандартами, часть 2: трудный путь к компромиссу

Перевод статьи Effective Standards Work, Part 2: Threading the Needle с сайта infrequently.org для css-live.ru, автор — Алекс Рассел

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

В первой части («Оперативная обстановка») речь шла о постоянных вызовах для стандартов и о силах, порождающих недоразумения. В ней также описывалась динамика экосистемы, из-за которой менять что-либо так трудно, даже если не брать в расчет изменчивых корпоративных стратегий браузерных компаний.

Эффективная работа над стандартами, часть 1: оперативная обстановка

Перевод статьи Effective Standards Work, Part 1: The Lay Of The Land с сайта infrequently.org для css-live.ru, автор — Алекс Рассел

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

«Почему браузеры не соблюдают стандарты!» — задумчиво бормочет разработчик (заводя баг на chrbug.com). «Ведь смысл стандартизации — чтобы всё работало одинаково, в конце-то концов». Если что-то попало в Стандарт, то все его единообразно реализуют… верно?

Алгебра в 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.

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

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

перевод

<i is="морж">

Перевод статьи <i is="the walrus"> с сайта bkardell.com для CSS-live.ru, автор — Брайан Карделл

В последнее время я с завидной регулярностью наблюдаю в соцсетях, как люди выражают недовольство кастомными элементами. Поскольку я сам — ярый их поклонник, и к тому же участвовал во многих обсуждениях при их создании и развитии, мне тоже очень хотелось бы, чтобы они были лучше. Но я часто замечаю, что обсуждать это с недовольными бывает трудно. Вот я и подумал, что стоит сесть и написать об этом. И о моржах.

Новый рабочий процесс 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, о котором упоминалось в статье Зака Лезермана о загрузке шрифтов, которая у нас переведена) уже работают в браузерах!

Июньские новинки мира веб-стандартов

HTML, CSS, JS

Последняя неделя июня выдалась урожайной на новости для всех трех «китов» фронтенда — HTML, CSS и JS.

Самое заметное событие именно в мире JS: комитет TC39 утвердил спецификацию ECMAScript 2017 (она же 8-я редакция ECMA-262). Понятно, что формальный статус стандарта не так важен, как поддержка в браузерах и инструментах, но то, что это уже стандарт, а не «какой-то черновик», для кого-то может быть важно. Основные новинки — уже полюбившийся многим async и первое стандартное средство для «распараллеливания» задач между основным потоком и воркерами (SharedArrayBuffer). И по мелочи — методы padStart и padEnd для строк, новые методы для объектов и т.п.