стандарты

Свойство appearance и стандартизация стилей элементов форм: новая надежда

анонс заготовки спецификации на Гитхабе

Оформление элементов форм — пожалуй, главный источник боли в современной верстке. Каждое поле ввода, каждая кнопка — «вещь в себе», причем в каждом браузере реализованная чуть по-своему. И управлять их стилями тоже часто приходится в каждом браузере по-своему. А некоторые задачи (например, отобразить кнопку как обычный элемент с display: inline, с переносом на новую строку, если надо) и вовсе никак не решаются (внешне такой эффект дает display: contents, но в теперешних реализациях это ломает доступность, так что это не решение). Много надежд на избавление от этой боли возлагалось на свойство appearance, но судьба этого свойства оказалась сложной и запутанной. Сейчас в браузерах есть лишь старые его реализации с префиксами, тоже везде свои, и ни одна из них не решает задачу полностью.

И вот, пока все браузеры с досады не скопировали «в лоб» -webkit-appearance и не пополнили список «нестандартных стандартов» де-факто, после долгого обсуждения в ишью на Гитхабе давний активист веб-стандартизации Саймон Питерс решил взять дело в свои руки и набросать «правильный» черновик спецификации для этого свойства — учитывающий и пожелания верстальщиков, и браузерную реальность. И стандартизировать наконец и сами браузерные стили для элементов форм, и способ их сброса.

Работа предстоит громадная, но темп взят неплохой. За считанные дни заготовка документа на Google Docs выросла до внушительных 19 страниц. Учитывая опыт Саймона в работе над спецификациями WHATWG, где как раз много приходилось «приводить к общему знаменателю» разнобраузерные зоопарки реализаций, есть надежда, что в этот раз всё получится!

Почему мы не добавим в HTML элемент <чудесный>?

Перевод статьи Why don’t we add a <lovely> element to HTML? с сайта www.brucelawson.co.uk, опубликовано на css-live.ru с разрешения автора — Брюса Лоусона

Вчера был интересный разговор, который начала Сара Суайдан:

твит Сары Суайдан (@SaraSoueidan), 8 октября 2018 г. в 16:36:

Вот что я хотела бы увидеть в HTML:
<color value=“” />
Просто. Чрезвычайно полезно, особ. для дизайн-систем сегодня.

Тут, пока никто второпях не подумал «но ведь цвет — это не контент, а оформление!», Сара говорила о страницах с палитрами образцов цвета. В этом случае цвета — именно контент. Кажется, что это хороший кандидат в семантические элементы, потому что у него есть значение.

На правах Древнего Старожила Веба, я сел и пораздумывал над этим.

«Спор из-за пустого места» и изменение в селекторах 4 уровня

Новое определение :empty

Несколько часов назад в спецификацию CSS-селекторов 4 уровня внесли малозаметное, но существенное изменение. По-новому определили полезный псевдокласс :empty: если раньше — в селекторах 3 уровня, что были стандартом с 2011 г. — он соответствовал только совсем пустым элементам, не содержащим даже пробелов и HTML-комментариев, то теперь элементы с одними пробельными символами и HTML-комментариями внутри будут тоже считаться пустыми. А псевдокласс :blank, который раньше предлагался именно для таких элементов, теперь будет соответствовать элементам форм с пустым value.

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

Первый (и странный) публичный черновик CSS-модуля скроллбаров

25 сентября Рабочая группа CSS в W3C выпустила первый публичный черновик модуля скроллбаров (CSS Scrollbars) 1 уровня. По замыслу, он должен предоставить стандартные средства для того, чтобы можно было органично вписывать скроллбары в разные темы оформления (темные, контрастные, компактные и т.д.), не ломая при этом «родной» функциональности платформы. Но выбор средств, которые предлагает этот черновик, многих может удивить.

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

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

В какой-то момент оказалось, что такими нестандартными штуками в вебе достаточно активно пользуются. И бедным браузерам, чтобы не вылететь из конкурентной гонки, волей-неволей пришлось худо-бедно эту отсебятину поддерживать. Фактически, она стала стандартом де-факто. И практикам из 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 в разработке (частично работает за флагом).