Кого упоминает канал

TetraLogical выложили Accessible Components Library. Главное не восемь компонентов, а требования WCAG 2.2 в виде Gherkin-сценариев: Rule — сам критерий, теги @1.4.10 @aa @automatic называют уровень и автоматизацию. 447 сценариев из 461 гоняет Cucumber через Playwright в браузере:… в MAX →

Прайс или каталог не обязательно верстать в редакторе: HTML-страница печатается в PDF прямо из браузера, Ctrl+P. В @media print нужны три вещи. @page с size: A4 и margin: 0 — без нулевого поля Chrome подгоняет макет, и 19 pt становятся 17,2. print-color-adjust: exact — иначе зали… в MAX →

Прайс или каталог не обязательно верстать в редакторе: HTML-страница печатается в PDF прямо из браузера, Ctrl+P. В @media print нужны три вещи. @page с size: A4 и margin: 0 — без нулевого поля Chrome подгоняет макет, и 19 pt становятся 17,2. print-color-adjust: exact — иначе зали… в MAX →

Иконка рядом с текстом висит выше или ниже строки: минусовый margin спасает до смены шрифта. Оптический центр — не середина line-box, а половина от baseline до высоты заглавных: иконка раздувает строку. Пустая инлайн-обёртка с position: relative и шириной руками, иконка внутри ab… в MAX →

Лишние колонки в многоколоночной вёрстке больше не уезжают за правый край. column-wrap: wrap переносит их вниз, новым рядом. Высоту ряда задаёт column-height, height контейнера тоже подойдёт. column-count: 3; column-height: 130px; column-wrap: wrap; Пока высота ряда не ограничена… в MAX →

Сгиб на складном экране режет контент: видео ложится на петлю, кнопки уезжают под край. Браузер сам сообщает, где сегменты. В Chrome 138 window.viewport.segments и функции env() работают по умолчанию. Разложить плеер по половинам — один медиа-запрос: @media (vertical-viewport-seg… в MAX →

Пять плееров слились в один. Вышел Video.js 10. Video.js, Plyr, Vidstack, Media Chrome и Mux Player — теперь единый проект. Бандл на 60% меньше дефолтной сборки v8, лишнее можно не подключать. TypeScript и Tailwind в базе. Для React ставь @videojs/react, для vanilla @videojs/html… в MAX →

Раньше запись в frag_depth выключала early-Z на весь draw call. Драйвер не мог поручиться, что посчитанная глубина совпадёт с интерполированной, и гонял шейдер по каждому пикселю. В Chrome 156 у frag_depth появился режим less или greater. Пишешь @builtin(frag_depth, less) и обеща… в MAX →

Иконка — это CSS-слой, а не разметка. @nudeui/icons от Lea Verou: пакет без иконок, только механизм. Задаёшь токен --icon, псевдоэлемент рисует его маской и вставляет через @container style(). Без спрайтов, шрифтов и JS, одна разметка, меняется переменная. Практичным это стало по… в MAX →

Иконка — это CSS-слой, а не разметка. @nudeui/icons от Lea Verou: пакет без иконок, только механизм. Задаёшь токен --icon, псевдоэлемент рисует его маской и вставляет через @container style(). Без спрайтов, шрифтов и JS, одна разметка, меняется переменная. Практичным это стало по… в MAX →

«Слишком вложенные селекторы тормозят CSS» — миф. Браузеры матчат обычные селекторы быстро, пара лишних классов ничего не меняет. Куда больнее 500 КБ стилей вместо 10 КБ. Дороже на деле: стили, блокирующие рендер; анимация width/height/top/left вместо transform и opacity; раздуты… в MAX →

CSS сам замечает, когда два блока пересеклись, — без JS. Измеритель растягивается между двумя якорями через anchor(), получает overflow-x: auto и scroll-timeline. Пока зазор шире порога (полоска ::after в 20px), таймлайн на нуле; схлопнулся — прогресс флипает кастом-свойство, и @… в MAX →