CSS-live.ru

ВеCSSти с полей

6 первых публичных черновиков новых модулей CSS, которыми вы, возможно, давно пользуетесь

2

При всей парадоксальности заголовка, будто взятого из фантастики про «временные петли», это правда. Три недели назад рабочая группа по CSS опубликовала первые публичные рабочие черновики двух модулей CSS. Сегодня к ним добавились еще аж 4 первых публичных черновика (включая два модуля 5 уровня). И многие новинки роднит то, что часть их функций давно работает почти во всех браузерах, и даже в реальных проектах!

В W3C появилась общественная группа по CSS4

0
неофициальный логотип CSS4

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

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

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

CSS-2020: очередной «снимок состояния» или спецификация №1 современного CSS?

0
Скриншот черновика CSS-2020

Рабочая группа по CSS начала работу над новым «снимком» состояния CSS (CSS Snapshot). Прошлый 2019-й год прошел без своего «снимка» (только в январе вышла последняя редакция CSS-2018), так что давно пора!

Новые математические функции в модуле единиц и значений CSS 4 уровня – еще один шаг к полноценному программированию на CSS

1
Скриншот твита Таба Аткинса о добавлении функций round(), abs(), sign(), mod(), log(), exp() и констант e и pi

Предпоследняя неделя января выдалась плодотворной для Рабочей группы по CSS. Целых три дня редакторы CSS-стандартов собирались в офисе Igalia (тех ребят из Испании, которым мы обязаны одновременным внедрением CSS-гридов в половину браузерных движков). В числе прочего обсуждались новые возможности математических вычислений в CSS, о которых давно мечтали верстальщики. Итог этого обсуждения Таб Аткинс подвел в своем твите, скриншот которого вы видите выше.

Итак, в добавок к привычной функции calc() и только-только набирающим популярность min(), max() и clamp(), модуль значений и единиц CSS 4 уровня теперь обзаведется аналогами почти всех функций объекта Math из JS:

Стандарт CSS для Masonry-раскладки: от идеи — к первым конкретным наработкам

2
Предложение стандарта Masonry-раскладки

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

Но на этой неделе Мэтс Палмгрен из Mozilla внес новое, конкретное и подробное предложение, как относительно просто добавить в грид-раскладку возможности Masonry. Фактически это готовый черновик раздела спецификации, даже о тестах Мэтс не забыл. Табу Аткинсу, одному из главных редакторов спецификации, идея тоже нравится. При такой тщательности проработки есть все шансы, что новое предложение успеет войти уже в ближайший CSS Grid Level 2. Так что подключайтесь к обсуждению, чтобы не отставать от прогресса и помочь отладить новое предложение на самой ранней стадии!

CSS-модуль режимов письма (Writing Modes) 3 уровня официально стал стандартом W3C

0
Скриншот пресс-релиза W3C со слоганом «Делаем Всемирную паутину всемирной», набранным вертикальным письмом

На прошлой неделе спецификация режимов письма (CSS Writing Modes Level 3) получила статус рекомендации, т.е. стандарта W3C. В связи с этим W3C выпустил целый специальный пресс-релиз, отмечающий эту публикацию как важную веху в многолетней работе над представлением текста в интернете и поддержкой разных языков. Далеко не каждый новый стандарт удостаивается такого внимания.

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

Кстати, разнонаправленный текст бывает полезен не только для экзотических (для нас) языков, но и как художественный прием. Мы уже встречали его в экспериментах Джен Симмонс и Чэнь Хуэй Цзин, а с приходом нового стандарта в браузеры он вполне может стать одним из важных трендов в веб-дизайне в наступающем 2020-м. Так что следите за новинками CSS вместе с нами, чтобы не отставать от них! :)

W3C и WHATWG: неужели долгожданный мир?

1
логотипы W3C и WHATWG

Сегодня на сайте W3C появилась знаменательная новость: W3C и WHATWG подписали общий меморандум о совместной работе над едиными спецификациями HTML и DOM. То есть многолетний раскол, результатом которого были две разные версии главного стандарта веба и постоянная путаница между ними, должен вот-вот закончиться!

Селектор :has() станет доступен для оформления?

0

Родительский селектор, т.е. возможность стилизовать элементы в зависимости от их содержимого — давняя, но пока несбыточная мечта многих верстальщиков. Предложения такого селектора, в том или ином виде, бродят по черновикам W3C с начала двухтысячных. Но он получается очень ресурсоемким и медленным. Поэтому в черновике модуля CSS-селекторов 4 уровня изначально селекторы делились по «профилям»: «живой», отражающий состояние интерфейса в реальном времени и используемый для оформления, и «мгновенный снимок» (ранее «статичный»), для одного конкретного момента и доступный только в JS-методах типа querySelector(). До последнего времени селектор :has() был единственным исключением из «живого» профиля. Что значило, что даже когда (и если) браузеры его реализуют, использовать его для оформления будет нельзя.

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

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

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

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

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

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

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

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

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

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

3

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

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

0

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

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

0

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

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

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

0

Рабочая группа 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 уровня

0

За последнюю неделю рабочая группа 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 уровня).