ВеCSSти с полей

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

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

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

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

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

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

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

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

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

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

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

Новые кандидаты в рекомендации 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 в разработке (частично работает за флагом).