SelenIT: статьи и переводы

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

Перевод статьи Holograms, light-leaks and how to build CSS-only shaders с сайта robbowen.digital для css-live.ru, автор — Робб Оуэн

Может, я чуть преуменьшаю, но WebGL — это нечто. За пять минут на любом из сайтов, отмечающих лучшие примеры веб-дизайна наградами, можно увидеть, как сайты один за другим полностью полагаются на мощь canvas. Инструменты вроде threejs привносят в браузер мощь 3D и GLSL-шейдеров, а с ними — совершенно новый уровень визуальных эффектов.

Но тут я задумался: почему всё веселье должно доставаться JS? Сейчас, когда браузеры наконец широко поддерживают mix-blend-mode, многие из типовых приемов шейдинга стали доступны и в CSS. С правильным подбором картинок и тщательным их наложением можно создавать удивительно качественные эффекты без нужды в каких-либо JS-зависимостях.

Взглянем на пример. По мере скроллинга картинки ниже солнечный свет вспыхивает тёплым оранжевым, прежде чем уйти в холодную голубизну. На миг вы увидите еще и размытые блики объектива (боке).

Непостижимые алгоритмы Твиттера принесли мне в ленту занятный вопрос Саймона Хойберга, автора нескольких книг про JavaScript:

Почему ‘!important’ перекрывает значения в css? 🤔

Для меня это читается как «not important», т.е. «не важно», и я ждал бы от него обратного 😅

Действительно, для программистов, привыкших обозначать знаком ! операцию отрицания (инверсии), эта запись выглядит очень нелогично. Ее даже включили в список ошибок, допущенных при проектировании CSS (последний пункт).

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

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

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

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

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

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

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

Как вы думаете, сколько CSS-градиентов нужно, чтобы нарисовать каждую из этих фигур?

Один! 🤯 Причем его даже не надо дублировать: достаточно указать один раз в одном-единственном свойстве. Таким примером в CodePen на днях поделился Темани Афиф, автор занятного и познавательного проекта css-challenges.com.

Эта «магия» — заслуга свойства border-image. У нас уже есть статья о нем и его возможностях. Увы, громоздкий синтаксис и неинтуитивное поведение — особенно с градиентами — до сих пор мешают ему стать популярным. Сам Афиф в Твиттере признал, что «border-image принадлежит к тёмной стороне CSS»: очень уж трудно представить себе наглядно, как масштабируются, нарезаются и потом опять масштабируются части картинки. И многие даже не пытаются разобраться в нем. А зря!

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

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

Браузер Safari часто ругают за редкое обновление и задержку внедрения новинок, но есть у него «любимые» области, в которых он опережает всех. Например, CSS-селекторы 4 уровня. Псевдоклассы :matches() — теперь это :is(), :not() с несколькими селекторами и :nth-child()/:nth-last-child() c добавочным параметром of <что угодно> он поддерживает с 2015 года. И именно в его экспериментальной сборке появилась первая реализация долгожданного псевдокласса :has()!

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

Примеры использования

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

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

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

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

Похоже, в 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 в привычку и поможет не отставать от жизни!

Перевод статьи Taming Blend Modes: `difference` and `exclusion` с сайта css-tricks.com, переведено для css-live.ru с разрешения автора — Аны Тюдор.

До самого 2020-го я не особо увлекалась режимами наложения, во многом потому, что крайне плохо представляла себе будущий результат до того, как попробовать. И этот подход «попробуй и посмотри, что выйдет» почти всегда оставлял меня в ужасе перед тем безобразием, что невольно получалось у меня на экране.

Эта проблема вытекала из незнания механизма их работы. Почти все попадавшиеся мне статьи на эту тему строились на примерах, сравнениях с Фотошопом или многословных художественных описаниях. Примеры бывали великолепны, но без понимания, как работает механизм всего этого, реализация своей творческой задумки путем переделки чужого красивого примера превращается в долгое, мучительное и в конечном итоге бесплодное приключение. А аналогии с Фотошопом практически бесполезны для людей инженерного склада, без дизайнерского опыта. Длинные художественные описания же для меня вообще выглядели каким-то птичьим языком.

Момент просветления случился у меня, когда я наткнулась на спецификацию и нашла в ней математические формулы, по которым работают режимы наложения. Благодаря этому я наконец смогла понять, как это всё работает «под капотом» и где оно может пригодиться. И теперь, узнав это лучше, я поделюсь этим знанием в серии статей.

Сегодня мы рассмотрим, как вообще работает наложение, затем рассмотрим два в чем-то похожих режима наложения — difference и exclusion — и, наконец, доберемся до главной части этой статьи, где разберем несколько классных примеров использования вроде вот таких.

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

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

Перевод статьи Prevent layout shifts with CSS grid stacks с сайта www.hsablonniere.com для css-live.ru, автор — Юбер Саблоньер

Люди используют CSS Grid по двум причинам:

1. CSS — это потрясающе! Факт, как ни крути.
2. Гриды — отличный инструмент для создания сложных двумерных макетов.

У меня иногда бывает третья причина использовать CSS Grid: предотвратить сдвиги в верстке. Я пытался придумать для этого приема прикольное сокращение, но у меня получилось лишь АСПНГ: «АнтиСдвиговый Прием с Наложением в Гридах». Вряд ли у меня получится похвастаться мастерством в «изобретении технических терминов» в резюме на LinkedIn, так что жду ваших предложений получше.

Давайте я объясню прием на реальных примерах. В этой статье я покажу:

• Реальную проблему сдвигов в верстке, с которой я столкнулся в работе над одним компонентом.
• Ограничения решения с абсолютным позиционированием.
• Преимущества решения с гридом.

Погодите, о каких вообще сдвигах идет речь?