CSS-live.ru

ВеCSSти с полей

Удар откуда не ждали: псевдокласс :has() ломает сайты на jQuery

0
:has() в виде астероида несет угрозу jQuery в виде динозавров

Псевдокласс :has(), он же «родительский селектор» и «селектор предыдущего соседа» — пожалуй, одно из самых революционных новшеств CSS 2022 года (наряду с выражениями от контейнера). Его штатно поддерживают уже два стабильных браузера — Safari 15.4+ и Chrome 105+. Но кроме всеобщей радости, его внедрение принесло и неожиданные проблемы: пользователи стали жаловаться, что с новым обновлением перестали работать некоторые сайты на jQuery.

Каскадные слои уже почти стандарт!

1

Верите или нет, но каскадные слои — новинка CSS-модуля каскада и наследования 5 уровня, казалось бы, только-только появившаяся в черновиках — уже более двух недель как кандидат в рекомендации, без пяти минут стандарт! И W3C вовсю призывает их реализовывать. А браузеры вот-вот последуют этому призыву: уже 8 февраля по плану выходит Firefox 97 с их поддержкой по дефолту, вскоре за ним подтянется Chrome 99 (и всё остальное, основанное на его движке). Даже в Safari их уже можно «потрогать» (этот браузер последнее время вообще радует CSS-новинками). Так что есть все шансы, что к концу года поддержка каскадных слоев станет практически повсеместной!

Пожалуй, самое время присмотреться к новинке повнимательнее: она может в корне изменить наш подход к организации стилей и забыть про хаки и !important-ы для «перебивки» специфичности. Например, Мануэль Матузович навскидку приводит три случая, где эти слои здорово упростят жизнь: уменьшение веса базовых стилей, «борьба» с излишне специфичными стилями сторонних компонентов и служебные классы. А где бы захотели их применить вы?

«Родительскому селектору» :has(), скорее всего, запретят быть вложенным

3
скриншот закрытого бага в WebKit

Вот уже почти месяц, как псевдокласс :has()больше, чем «родительский селектор» — можно «пощупать» в браузере. Можно подвести первые итоги эксперимента: всё не так страшно, как думали, но не так легко, как хотелось бы.

Сложнее всего оказалось обрабатывать вложенные в :has() другие функциональные псевдоклассы — :is(), :where(), :not() и сам :has(). И Антти Койвисто — ведущий разработчик реализации :has() в WebKit, который и нашел способ добиться приемлемого быстродействия для него — обратился к Рабочей группе CSS с предложением запретить такие комбинации.

Идея вызвала было недовольство, но Джен Симмонс объяснила, что реализовать :has() совсем без ограничений едва ли возможно, и сейчас задача — выяснить, какими редкими применениями можно пожертвовать, чтобы поскорее сделать его доступным для более важных случаев. В итоге в WebKit запретили вкладывать :has() друг в друга, но разрешили остальные псевдоклассы: быстродействие таких комбинаций «не оптимально, но с этим можно жить». Код WebKit уже подправили (но спецификацию — пока нет).

На мой взгляд, это отличный компромисс. Если это ограничение поможет быстрее внедрить :has() в браузеры, есть шанс, что с него снимут пометку «необязательный», и его повсеместная поддержка гораздо важнее экзотических случаев. Согласны?

Новогодние подарки Рабочей группы CSS: значения и единицы 4 уровня, медиавыражения 4 и 5 уровней

1
новые спецификации прямо под новогодней ёлкой

Праздничные новогодние хлопоты не мешают Рабочей группе CSS обновлять спецификации. Накануне нового года вышли три обновленных модуля CSS:

  • Значения и единицы 4 уровня (рабочий черновик). Добавлен параграф о вычислении значений типа URL (он унифицирован со спецификацией Fetch, что автоматом снимает вопросы о взаимодействии c CORS и т.п.). Семейство «вьюпортных» единиц (vw, vh…) пополнилось вариантами для большого, маленького и динамического вьюпорта (учитывает скрытие/раскрытие строки адреса и др. панелей мобильных браузеров) и их логическими версиями для разных напралений письма (итого 24 шт. — пожалуй, стоит целой статьи!:), а все шрифтовые единицы (ex, ch, ic, cap, lh) получили свою пару для шрифта корневого элемента, подобно паре em/rem. Все математические функции тоже в силе. Ожидается, что в таком виде этот модуль скоро станет кандидатом в рекомендации. А вот так и не прижившиеся в браузерах функция toggle() и типизированная attr() — увы — отложены на следующий, 5-й уровень.

День зимнего солнCSSтояния: новые публикации CSS и приятный сюрприз Safari

1
С днем зимнего солнCSSтояния! :)

21 декабря, самый короткий день в 21-м году 21 века, принес сразу несколько приятных CSS-новостей.

Во-первых, у CSS в очередной раз обновилось официальное определение — уже девятое по счету (можно сказать, «CSS9»?). Отличий от прошлогоднего не очень много. В само «официальное определение» (т.е. модули, по мнению редакторов полностью проработанные, покрытые тестами и готовые к внедрению) добавились стили для счетчиков (возможность нумеровать списки любыми символами). Список стабильных, но мало опробованных в деле модулей пополнился стилями скроллбаров — псевдоэлементы типа ::-webkit-scrollbar-* окончательно уступят место CSS-свойствам из Мозиллы. Больше всего изменился раздел «Модули с более-менее единообразной реализацией» — туда вошли трансформации 2 уровня (отдельные функции translate(), scale() и rotate(), а также 3D, в котором наконец навели относительный порядок), логические свойства и значения (отступы и т.п. с учетом направления текста), размеры бокса (новые значения типа min-content), позиционирование (включая position:sticky), шрифты 4 уровня, и даже пара скриптовых API — ResizeObserver и API анимаций.

CSS переходит на новый, шестой уровень каскадности

1
скриншот модуля каскада и наследования 6 уровня

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

А месяц назад появился редакторский черновик  модуля каскада и наследования следующего, уже шестого уровня (кто сказал «CSS6»?:). Главное нововведение — стили с ограниченной областью видимости (scoped-стили). Это не первая попытка их ввести, и открытых вопросов в связи с ними пока еще слишком много (например, должна ли область видимости учитываться раньше или позже специфичности?). Поэтому текущий черновик скорее похож на сборник идей, многие из которых неизбежно отсеются в ходе обсуждений и экспериментов. Но некоторые идеи — например, указание области видимости прямо в селекторе — выглядят интересно и многообещающе. Так что не упустите шанс повлиять на будущее CSS!

Новый рабочий процесс W3C из будущего

0
скриншот нового рабочего процесса W3C

Похоже, в W3C продолжают экспериментировать с машиной времени: на сайте Консорциума уже опубликован документ, датированный 2 ноября этого года — то есть «гость из будущего», его напишут только через две недели:). Речь идет об основном документе, регламентирующем рабочий процесс W3C — «стандарте, по которому делают стандарты».

Главное нововведение нового рабочего процесса W3C — четкое разграничение между будущими стандартами (привычный нам «конвейер» статусов спецификаций — черновик, кандидат в рекомендации, рекомендация…) и так называемыми «заметками» (Notes) — документами, не претендующими на роль стандарта, хоть и нередко полезными. До сих пор статус Note с равным успехом мог встретиться у чего угодно — и у сборника общих принципов разработки веб-платформы, и у пояснения к стандарту (например, к руководству по веб-доступности WCAG 2.0), и у списка актуальных стандартов (например, уже знакомый нам CSS-2020, который в шутку можно назвать «CSS8»), и у окончательно заброшенного модуля CSS (например, Template Layout, всё полезное из которого перекочевало в стандарт CSS Grid). Из-за этого бывала путаница. Теперь назначение документа будет понятно с самого начала: у будущих «заметок» появится свой статус «черновик заметки» (Draft Note), который будет отличать их от «рабочих черновиков» (Working Draft) будущих стандартов. А для заброшенных черновиков, так и не ставших стандартами, заведут свой специальный статус — Discontinued Draft. Кроме этого, вводится новый отдельный класс документов — «реестры» (Registries), содержащие «коллекции значений или других данных, у которых нет нормативных требований к реализации, но которые должны обновляться по особым контролируемым правилам». И уточняются правила внесения правок в уже утвержденные рекомендации.

Будем надеяться, что с новым рабочим процессом стандарты станут понятнее, а выход стандартов «из будущего», с опережением графика, войдет у W3C в привычку и поможет не отставать от жизни!

«Родительский селектор» :has() — в реальность!

0
скриншот сообщения о начале реализации :has()

Радостная весть от Igalia (компании, подарившей нам гриды во всех основных движках и не только): сегодня они объявили о начале экспериментальной реализации в движке Blink одной из самых долгожданных фич CSS — псевдокласса :has()!

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

0

Рабочая группа CSS опубликовала первый публичный черновик модуля каскада и наследования 5 уровня. Главная его новинка по сравнению с текущим, 4 уровнем — так называемые «слои» стилей, добавочный критерий каскада, позволяющий задавать приоритет целой группе стилей и гарантирующий, что стили одного «слоя» всегда перекроют стили другого независимо от их специфичности и порядка в коде. Например, стили темы оформления всегда будут перекрывать стили сайта по умолчанию, и для этого не понадобится наращивать специфичность или следить за порядком подключения CSS-файлов. Идея и проработка этого механизма — заслуга Мириам Сюзанн, которая специально для этого присоединилась к команде редакторов в качестве приглашенного эксперта W3C.

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?

1
Скриншот черновика 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 вместе с нами, чтобы не отставать от них! :)