00:01:38 Новинки Chrome 145
00:29:51 Anchor Positioning и csskit
00:45:17 Сложное внедрение corner-shape
01:04:52 Неквадратный веб с border-shape
01:22:39 Зачем нам WebMCP
01:36:52 Отладка Next.js с MCP

Подробный гид по стилизации списков в CSS. Ричард Раттер показывает, как задавать отступы в lh, настраивать маркеры через ::marker, и делать кроссбраузерные символы с @counter-style, ну или использовать давно знакомый ::before, когда не хватает браузерной поддержки. #css

https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/

Спрайты в вебе. Джош Комо показывает, как анимировать спрайты в CSS во вьюпорте <img>: object-fit, object-position и steps(jump-none) для чёткой покадровой смены, а также разбирает, когда спрайты лучше GIF и когда лучше процедурная анимация. #css #animation

https://www.joshwcomeau.com/animation/sprites/

Новинки Firefox 148 для разработчиков. Релиз добавляет HTML Sanitizer API и Trusted Types, а также Iterator.zip() и zipKeyed(), функцию CSS shape(), улучшения anchor positioning и экспериментальный Document Picture-in-Picture API. #firefox #browser

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/148

Практическое руководство по элементу <img>: от основ до LCP. Джоан Леон разбирает атрибуты srcset и sizes для адаптивных изображений, <picture> с AVIF и WebP, а также loading=lazy, width и height против CLS, decoding и fetchpriority. Отдельно о том, когда стоит добавить preload для LCP-картинок и почему иногда всё-таки нужны CDN. #performance #html

https://joanleon.dev/en/guia-practica-elemento-img/

WebAssembly как полноценный язык для веба. Райан Хант пишет, что загрузка и доступ к веб-API через прослойку JavaScript усложняют разработку и даёт лишний оверхед, а WebAssembly Component Model и WIT могут принести прямой доступ к API, загрузку через <script> и более быстрые обновления DOM. #webassembly #firefox

https://hacks.mozilla.org/2026/02/making-webassembly-a-first-class-language-on-the-web/

Выпуск №516. Никита Дубко и Вадим Макеев про новинки Firefox 148, ленивую загрузку медиа, перфоманс <img> и сжатие со словарями.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

00:01:30 Новинки Firefox 148
00:25:40 Ленивая загрузка медиа
00:41:25 Перфоманс img
01:22:39 Сжатие со словарями
01:46:15 Ответы на вопросы

Нативная случайность в CSS. Альваро Монторо разбирает random() и random-item(), две новые CSS-функции из Values and Units Module Level 5. random() возвращает значение в заданном диапазоне с опциональным шагом, а random-item() выбирает из списка дискретных значений. Обе функции поддерживают параметры совместного использования для корреляции результатов между свойствами и элементами. Пока частичная поддержка есть только в Safari 26.2. #css #safari

https://alvaromontoro.com/blog/68092/native-random-values-in-css

Как задать цвет темы для Safari 26. Мартин Грубингер рассказывает, что Safari 26 отказался от <meta name="theme-color"> и теперь определяет цвет интерфейса по фону body или фиксированного элемента вверху страницы. В статье предложен трюк на scroll-driven анимациях: скрытый фиксированный элемент сохраняет нужный цвет, пока не уходит из вида при прокрутке. Подход не работает, если страница перезагружается не в начальной позиции прокрутки. #safari #css

https://grooovinger.com/notes/2026-02-27-safari-26-header-background

Словарное сжатие наконец здесь, и результаты впечатляют. Тим Перри объясняет, как Compression Dictionary Transport работает с Zstandard и Brotli поверх HTTP: предыдущие ответы используются как словари для сжатия данных почти до размера дельт. JS-бандлы YouTube уменьшаются до 90% по сравнению с Brotli, HTML поиска Google — почти на 50%. Уже используется в Google, Shopify, Pinterest и Notion. Chrome 130+, Safari и Firefox на подходе. #performance #http

https://httptoolkit.com/blog/dictionary-compression-performance-zstd-brotli/

Новый мета-тег для поддержки масштабирования текста на мобильных. Мануэль Матузович показывает элемент <meta name="textscale"> — предложение, которое позволяет сайтам учитывать настройки размера текста ОС на мобильных устройствах. Относительные единицы em и rem масштабируются с настройками пользователя, а пиксельные значения остаются без изменений. Пока доступно только в Chrome Canary. Firefox уже реагирует на настройки ОС, но масштабирует весь вьюпорт целиком. #html #a11y

https://youtu.be/XVIgKEOVfVg

Слишком ранний брейкпоинт. Ахмад Шадид объясняет, почему многие сайты переключаются на мобильную раскладку слишком рано. На примерах Time и TechCrunch он показывает, как дизайн ломается в сплитах, на планшетах и в превью ссылок iOS. Решение: промежуточные брейкпоинты, выражения от контейнера и гибкие раскладки на гридах и флексах, которые подстраиваются под доступное пространство. #css #layout

https://ishadeed.com/article/too-early-breakpoint/

Выпуск №517. Лёша Красиков, Полина Гуртовая, Нина Торгунакова, Никита Дубко про прототип focusgroup, запись видео в Replit, а также большой холивар про Tailwind.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

00:01:52 Прототип атрибута focusgroup
00:17:20 Запись видео в Replit
00:32:21 Докатились до Tailwind
00:51:32 (Не)удобство Tailwind
01:22:20 Tailwind на практике
01:39:31 Альтернативы и будущее

CodePen 2.0 вышел в публичную бету. У пенов теперь своя файловая система с папками, новый блочный процесс сборки, где можно комбинировать технологии без конфигурации, совместная работа в реальном времени по приглашению, омнибар для быстрого доступа к файлам и командам, а также настоящие настройки приватности с паролями и доступом только по приглашению. Без установки, без командной строки, без сложной настройки. #tools #css

https://codepen.io/beta

SVG в вебе: сравнение скорости в зависимости от способа загрузки. Джоан Леон сравнивает пять методов и то, как каждый влияет на кеширование, запросы и рендеринг: инлайн <svg>, <img>, <object>, CSS-фон и спрайты с <use>. Главный анти-паттерн: встраивание растровых изображений в base64 внутри SVG увеличивает размер файла на 33% и блокирует рендеринг. #svg #performance

https://joanleon.dev/en/svg-optimization/

Всё, что вы никогда не хотели знать о visually-hidden. Дэвид Бушелл разбирает двадцатилетнюю историю CSS-паттерна visually-hidden и проверяет, хватит ли в 2026 году одних position: absolute и clip-path: circle(0). Статья объясняет, почему у платформы до сих пор нет нативной альтернативы и почему стандартизация хака может скорее навредить, чем помочь. #a11y #css

https://dbushell.com/2026/02/20/visually-hidden/

Новинки Chrome 146. CSS-анимации по скролу позволяют декларативно управлять CSS-анимациями по позиции прокрутки. Sanitizer API помогает защитить приложения от XSS. WebGPU получает режим совместимости со старыми графическими API. Также добавлены Iterator.concat, мета-элемент для масштабирования текста на мобильных, улучшения Navigation API и более точные метрики LCP. #chrome #browser

https://developer.chrome.com/release-notes/146

Вы не знаете HTML-таблицы. Фрэнк Тейлор выходит за пределы базовых понятий и разбирает терминологию таблиц, API Table Object Model, семантику заголовочных ячеек с атрибутами scope и headers, а также практические паттерны для создания доступных и хорошо структурированных таблиц с <thead>, <tbody>, <tfoot> и хелперами на JavaScript. #html #a11y

https://blog.frankmtaylor.com/2026/03/05/you-dont-know-html-tables/

Выпуск №518. Никита Дубко и Алексей Симоненко про новинки Chrome 146, релиз Vite 8 и краткую историю доменов.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте