Создание цветовых палитр при помощи CSS-функции color-mix()

Мишель Баркер очень подробно объясняет, как работает функция color-mix(). По сути при помощи неё можно смешивать цвета, только важно разобраться, как работает это смешивание.

Когда вы пишете color-mix(in srgb, blue, red), то по сути вы смешиваете синий и красный в соотношении 1:1. При этом смешивание — это интерполяция. Очень грубо говоря, для sRGB браузер возьмёт отрезок на градиентной цветовой плоскости между двумя точками, выберет середину, выдаст результат. Для пространств вроде oklch всё сложнее, но суть та же — у браузера есть правила интерполяции.

Для записи color-mix(in srgb, blue, red 10%) синего будет 90%. В сумме браузер попытается сделать 100%.

А вот с color-mix(in srgb, blue 10%, red 20%) случай интересный. Здесь суммарный цвет получится в соотношении 1:2, но непрозрачность цвета будет 0.3, потому что оставшееся до 100% заполняется прозрачным цветом.

Я бы эту функцию пока использовал только для смешивания с чёрным и белым. Смешивать цвета в sRGB всё ещё сложно с точки зрения предсказуемости — правила интерполяции там не очень. А вот когда oklch можно будет втаскивать в проекты, тогда уже можно начать играться с математикой цвета в более подходящем для этого пространстве. С CSS-переменными функция работает замечательно, так что можно на основе нескольких базовых цветов математически описать полную палитру для всех состояний.

https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix/

Safe/unsafe в флексбоксах

Когда в субботу записывали подкаст, внезапно обнаружил в релизноутах Safari TP поддержку внутри flexbox ключевых слов safe и unsafe. Подумал, что это что-то новое, пошёл разбираться. Оказалось, в Firefox это есть аж с 2018 года. И в Chrome оно тоже есть.

Стефан Джадис удивился так же, как я. В своей статье он показывает, для чего эти ключевые слова нужны.

Пусть у вас есть вёрстка на флексбоксах, в колонку. И пусть вы выравниваете контент по центру при помощи align-items: center;. Если контент по какой-то причине не помещается во вьюпорт, что должен сделать браузер? Ну, я его попросил выравнивать по центру, он и будет выравнивать по центру. Но, к сожалению, левая часть большого блока будет спрятана за левым краем вьюпорта. И, как вы понимаете, подскроллить к этой спрятанной области у пользователя возможности не будет. Это — поведение ключевого слова unsafe, которое прописывать не обязательно. Для картинок такое поведение, наверное, подходит, а вот для текстов нужен другой подход.

Если мне всё-таки важно не прятать левый край, можно написать align-items: safe center;. И в таком случае браузер, когда уткнётся левым краем большого блока в левый край вьюпорта, начнёт этот большой блок двигать вправо. Скролл спасёт пользователя от потери информации. Удобно.

https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/

Тултипы на CSS

Темани Афиф показывает, как при помощи разных CSS-техник рисовать тултипы с хвостиками. Есть варианты со сплошной заливкой, с выделенной обводкой. Позиция хвостика управляется при помощи CSS-переменных. Ну и в HTML это всего лишь один элемент <div class="tooltip">Текст</div>. Под капотом много clip-path и математики.

Часть 1: https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/
Часть 2: https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part2/

CSS-каскад. (Ново)введение

Видео выходного дня. Мануэль Матузович на примерах показывает, как работает каскад в CSS. Особый упор делает на объяснение @layer и @scope, которые появились не так давно, но на каскад сильно влияют.

https://vimeo.com/916686376

Индикатор прогресса

Энди Белл показывает, как можно собрать веб-компонент, который умеет в анимацию прогресса, показывает галочку на 100%, доступный, стилизуемый, адаптируемый под размеры контейнера. Решение родилось из челленджа, который Энди запускал в своём Front-End Challenges Club.

https://piccalil.li/blog/solution-009-progress-indicator/

Scroll snapping для заголовков

Думаю, вы уже успели попробовать свойства из семейства scroll-snap в CSS. Они очень удобные, чтобы создавать всякие простые карусельки без JavaScript. И почти везде их как раз на карусельках и показывают, потому что самый очевидный пример.

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

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

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

https://frontendmasters.com/blog/chill-scroll-snapping-article-headers/

«Я💛Ф» CTF 2024

Вот уже четвёртый год мы небольшой командой делаем фронтенд-игру в стиле Capture the Flag. Участникам нужно найти спрятанные в разных местах текстовые флаги и ввести их в терминалы, чтобы перейти на следующий уровень. Кто первым соберёт обязательные флаги — победит. Кто первым соберёт вообще все флаги — тоже победит. И всё это с приятной музыкой, красивым оформлением и даже полноценным сюжетом.

Если считаете, что разбираетесь во фронтенд-технологиях, заходите сегодня после 20:07 по минскому времени, чтобы поучаствовать в гонке за призами.

https://ctf-2024.ilovefrontend.ru/

Service Worker Static Routing API

В Chrome 123 из-под флага выехало классное улучшение для сервис-воркеров.

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

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

Так вот, в Chrome 123 добавили возможность задать специальный конфиг, в котором вы можете попросить браузер за какими-то ресурсами ходить только через сеть, за какими-то — через кэш, и так далее.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/form/*",
          requestMethod: "post"
    },
    source: "network"
  });
});

Тут в коде явно прописывается, что все POST-запросы по маске /form/* должны идти мимо сервис-воркера. Не тратим время на бесполезную обработку, идём сразу в сеть.

Почитайте в статье про все возможные значения. И самое приятное, что такой конфиг можно использовать как прогрессивное улучшение. Надеюсь, Workbox тоже реализует у себя такие фичи в скором времени, потому что в основном я пользуюсь им для настройки SW.

https://developer.chrome.com/blog/service-worker-static-routing

Железобетонные автогриды

Иногда возникает необходимость собрать такие гриды, где вёрстка идёт не от количества колонок, а от размеров ячеек. То есть мы хотим, чтобы ячейки были от какого-то размера до какого-то, а количество колонок под это подстраивалось бы.

Нильс Байндер по шагам собирает как раз такой CSS-компонент. Причём каждый шаг подробно объясняет. Полезно для тех, кто хочет разобраться в том, как работают auto-fit, функции max, min и minmax в контексте гридов и как создавать CSS-компоненты, которые всю магию держат внутри, а наружу отдают API в виде CSS-переменных.

https://9elements.com/blog/building-a-rock-solid-auto-grid/

«По-настоящему красивые переходы средствами браузера»

Читал на Dump Spb доклад про то, как уже сейчас можно потихоньку внедрять View Transitions API и Scroll-driven Animations в ваши проекты для вау-эффектов. Показывал на демках, ссылался на статьи. Видео доклада опубликовали, теперь можно посмотреть.

Простите за звук, я никак не мог повлиять на его качество.

Видео: https://youtu.be/Dud0DozVwvo
Слайды: https://mefody.github.io/talks/pretty-transitions/

Компонент для отображения активности

Думаю, вы не раз видели компонент, который показывает активность в каком-нибудь сервисе. Самый популярный пример — активность коммитов в GitHub. Эдакая сетка с разноцветными квадратиками. Чем насыщеннее квадратик — тем больше в этот день было активности.

Марио Хаманн делится опытом, как он собирал клиентский веб-компонент <activity-graph>, адаптировал его под SSR, упаковывал в WASM. Интересный пример того, как прогрессивно улучшая что-то существующее прийти к решению, которое можно переиспользовать на клиенте, на сервере и даже в других технологиях (в статье пример с PHP).

Все наработки доступны на GitHub и в npm, так что можно брать и подключать к себе в проект, если вам нужен такой компонент.

https://mariohamann.com/activity-graph-component

Как я могу помочь CSS развиваться

Периодически в подкасте «Веб-стандарты» мы обсуждаем всякие новые CSS-фичи. CSS-блогеры активно делятся демками с этими фичами, выпускают про них обучающие материалы, готовят доклады. Но я, например, не часто задумываюсь, откуда у людей, которые занимаются тем, чтобы новые фичи в принципе появлялись, берётся мотивация этим заниматься.

С внедрением в браузеры всё более-менее понятно. Часто здесь мотивация либо зарплатная (есть программист на ставке, который внедряет фичи из беклога), либо саморазвивающая (привлечение стажёров и студентов в открытые части проектов, опенсорс как получение опыта), либо самоутверждение в хорошем смысле этого слова (тот же опенсорс, но для закрытия какой-то своей потребности в участии в чём-то глобальном).

А что с придумыванием этих фичей? Есть комитет w3c, рабочие группы в нём: там некоторые занимаются фичами на зарплате, а кто-то — на энтузиазме. И вот среди энтузиастов есть люди и компании, которые очень сильно влияют на стандарты как качественно, так и количественно.

Мириам Сюзанн — как раз такой человек. @scope, @layer, CSS Anchor Positioning, popover — все эти довольно революционные для CSS спецификации так или иначе дошли до браузеров благодаря OddBird — компании Мириам. Они ещё делают SCSS.

Никого ни к чему не призываю, но так как я сам спецификации писать не умею, а в браузере их реализовывать и подавно, то помогаю как могу. Буду донатить OddBird, которым сейчас нужны деньги на дальнейшую работу. Когда-то веб-разработчики всем миром собрали на атрибут inert. Я хочу таким образом двигать CSS вперёд.

Хотите так же помогать развитию CSS — https://opencollective.com/oddbird-open-source.

Вообще советую поддерживать денежкой те инструменты, которые вам очень важны. Многие опенсорс-авторы выгорают, потому что после работы приходят делать классное для всего сообщества, а им в issues прилетает не благодарность, а баги и негатив.

Ну а если ваш путь — тот самый open source, который вы хотите делать своими руками, то вот вам видео выходного дня: Андрей Ситник ещё в 2019 году поделился опытом, как продвигать open source.

https://youtu.be/-CLm8bwwL_M

Полезные стили для кнопок

Дэвид Бушелл делится набором дефолтных стилей для кнопок, который он добавляет в свои проекты. И каждое свойство обосновывает.

- touch-action: manipulation поможет отключить спецэффекты типа зума страницы по двойному тапу в мобильных браузерах.
- user-select: none выключит выделение текста кнопок (если нужно).
- ::file-selector-button даст стилизовать кнопку выбора файла для <input type=file>.
- inline-size: fit-content — моё любимое, задаёт кнопке ширину по контенту, а не контейнеру.

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

https://dbushell.com/2024/03/10/css-button-styles-you-might-not-know/

Мгновенная валидация форм

Юлия Макарова делится рецептом, как сделать нативную валидацию форм без фреймворков. Сразу с продумыванием доступности. Как будто можно брать и копировать в свои пет-проекты как основу.

https://doka.guide/recipes/validation/

Тестирование HTML при помощи CSS

Ох, как я люблю такие элегантные решения. Хейдон Пикеринг рассказывает, как реализована библиотека REVENGE.CSS (именно капсом, иначе она не работает).

Суть в том, что многие HTML-конструкции можно легко проверить банальной проверкой атрибутов. А в CSS для этого всё есть. Ещё часть можно проверить вложенностью, и тут нас радует :has(). Когда видим конструкцию, которая нас смущает, делаем две вещи:

1. Прямо в интерфейсе жутким шрифтом Comic Sans на розовом фоне выводим текстом предупреждение.

2. В DevTools в CSS-переменную записываем информативное сообщение об ошибке, чтобы его было видно при разработке.

Хейдон дополнительно использует новомодную директиву @layers, чтобы создать слой tests в проекте. Подключает его в самый низ слоёв, чтобы тестовые стили наверняка применились.

В общем, кажется, я затащу эту библиотеку к себе в проекты и дотюню до своих требований. Многие рекомендации по доступности можно так реализовать довольно быстро.

https://heydonworks.com/article/testing-html-with-modern-css/

Спеки-потеряшки на iOS

Шалана Доусон собрала замечательный по визуалу сайт, который на основе данных из caniuse показывает, какие спецификации не реализованы в WebKit для iOS, хотя уже есть в других мобильных браузерах (Chrome и Firefox).

Во-первых, это мило. Задумка в виде коробок с молоком, на которых напечатаны объявления о потеряшках, вызывает эмоции.

Во-вторых, можно сделать небольшую ревизию свойств и API, которые много лет по какой-то причине не реализуются в WebKit.

В-третьих, это просто красивый сайт для вдохновения. Сижу ковыряюсь в исходниках, изучаю, как синхронизируется вращение 3D-коробки и объявления на ней.

https://ios404.com/

Квантовая механика: 100 лет открытий за один час

Видео выходного дня. Доктор физико-математических наук Алексей Семихатов популярным языком объясняет, как устроен мир согласно квантовой механике. Люблю такие видео, которые ломают мозг, но при этом двигают вперёд.

https://youtu.be/4iAkAT7mhnw

Игра Wordle на HTML и CSS

Очередное интересное применение возможностей CSS не для того, для чего он задумывался.

Скотт Джел попробовал реализовать игру Worlde без использования JavaScript. Вы можете помнить эту игру, она когда-то была на хайпе: есть 5 ячеек, нужно в них ввести буквы. Если буква правильная и на правильном месте, то клеточка закрашивается в зелёный. Если буква правильная, но не на том месте — в жёлтый. И если мимо — в серый.

Сначала Скотт реализовал только хардкорную версию, где нет жёлтых клеточек. Либо угадал полностью букву, либо нет. Для этого использовал комбинацию селекторов по атрибуту, псевдоклассы :invalid и :valid, отслеживание фокуса и показа плейсхолдера. У меня сразу возникла идея, что можно было бы сделать генератор кроссвордов, которому не нужен JavaScript — принцип работы тот же.

Затем Скотт попытался реализовать всё-таки жёлтые клетки. Но как будто валидация по паттерну у инпута не умеет в сразу два паттерна: возможные значения и правильные значения. Если бы можно было задать три состояния, тогда получилось бы на чистом CSS. Но, увы, пришлось всё-таки добавить несколько строчек JavaScript, чтобы доделать игру полностью.

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

https://scottjehl.com/posts/wordleish/

API для работы со складываемыми экранами

Мало нам было устройств всех размеров. Мало нам было бровок и плавающих островков на мобильных для вёрстки. Теперь будем верстать ещё и под складываемые устройства. Точнее, верстать могли уже давно, а вот делать это контролируемо сможем только через какое-то время.

Начиная с Chrome 125 за Origin Trial появится доступ к Device Posture API и Viewport Segments API.

Device Posture API позволит через CSS и JavaScript понимать, в каком состоянии сейчас складываемое устройство.
- @media (device-posture: folded) — устройство согнуто, экран разделён на две части.
- @media (device-posture: continuous) — экран сплошной (подходит в том числе для обычных экранов).

В JavaScript появится navigator.devicePosture, из которого можно получить то же самое. А ещё на него можно навесить addEventListener('change', ...), чтобы реагировать на изменения.

Viewport Segments API посложнее, тут рекомендую вчитываться в примеры в статье. Но если коротко, в функции env() появится ещё несколько ключевых слов, которые помогут работать с размерами сегментов складываемого экрана. Честно говоря, синтаксис не самый запоминающийся, у разных положений разные кодовые числа. Но по сути это единственный гибкий способ узнать нужные значения для вычислений в CSS.

В JavaScript появится window.visualViewport.segments, в котором будет лежать массив сегментов с их размерами.

Интересно это всё попробовать на реальных устройствах, конечно, потому что сложно верстать наощупь. Но учитывая, что такие экраны уже не игрушка, а вполне себе коммерческая линейка смартфонов и планшетов, верстать под это придётся.

https://developer.chrome.com/blog/foldable-apis-ot

Правильные для языка кавычки

Небольшое напоминание, что в разных языках правильные с точки зрения типографики разные кавычки. Например, в русском языке правильно использовать «ёлочки», а не "лапки".

Так вот, браузер умеет подставлять правильные кавычки, оказывается.

blockquote::before {
  content: open-quote;
}
blockquote::after {
  content: close-quote;
}

Вместо ключевых слов браузер подставит те кавычки, которые подходят элементу. А язык можно задать при помощи атрибута lang.

Чего я не знал, так это того, что кавычки можно переопределить. И это работает очень давно. Например, можно сделать вот такую дичь.

q {
  quotes: "((" "{" "[" "_";
}

Больше не буду мучить content и селекторы по атрибутам.

https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/

Руководство для фронтендеров 2024

Коди Линдли собрал для Frontend Masters гайд по тому, что можно изучить современному фронтендеру, чтобы прокачаться. От основ до углубления в технологии.

Во-первых, колоссальная работа. Море ссылок, всё структурировано, разбито на разделы. Прям можно из этого свои мини-гайды составлять, если вы занимаетесь развитием компетенций себя и коллег.

Во-вторых, это опенсорс, так что можно дополнять, если что-то упущено. Ссылки на инструменты, например, которых тут не так много на самом деле.

В-третьих, раньше, конечно, веб-мастером стать было сильно проще, чем сейчас фулстеком. Я хоть и понимаю всё, что в гайде есть, но шёл к этому 15 лет. «Фронтенд не такой сложной, как бэкенд», — говорили они.

https://frontendmasters.com/guides/front-end-handbook/2024/