00:01:15 Статистика из браузеров
00:19:27 Virtual Keyboard API
00:45:13 Обновление Shower
01:14:26 Модалки или страницы
01:43:23 Ответы на вопросы

CSSkit, высокопроизводительный CSS-тулчейн на Rust. Проект Кита Циркеля объединяет парсинг, минификацию, линтинг, форматирование, транспиляцию, бандлинг и анализ CSS в одном инструменте без конфигурации. Также включает интеграцию с LSP для поддержки в IDE. Проект вдохновлён oxc и находится в стадии альфы. #css #tools

https://csskit.rs

Новинки Firefox 149 для разработчиков. Релиз добавляет значение popover="hint", CloseWatcher для кастомных закрываемых компонентов, поддержку xywh() в shape-outside, vertical-align как сокращённое свойство, опциональные условия @container, HTMLSelectElement.showPicker() для элементов <datalist> и HTMLMediaElement.captureStream(). #firefox #browser

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

Новинки WebKit в Safari 26.4. Джен Симмонс представляет 44 новые фичи: grid lanes для masonry-раскладок, WebTransport для двусторонней связи с низкой задержкой и Keyboard Lock API для перехвата клавиатурных сокращений в полноэкранном режиме. Также добавлены name-only container queries, потоковые scroll-driven animations, ReadableByteStream и улучшения раскладки, Web Inspector и доступности. Плюс 191 багфикс. #safari #browser

https://webkit.org/blog/17862/webkit-features-for-safari-26-4/

Под капотом: CSS-архитектура редизайна. Брехт де Рёйте рассказывает о каскадных слоях для приоритета стилей, трёхуровневой системе дизайн-токенов, функции light-dark() для переключения тем, нормализации стилей через :where(), выражениях от контейнера для адаптивных компонентов, логических свойствах и прогрессивном улучшении через @supports. #css #design

https://utilitybend.com/blog/under-the-hood-a-closer-look-at-the-css-architecture-behind-the-redesign

The Layout Maestro — практический курс по CSS-раскладкам. Курс Ахмада Шадида учит думать о раскладке, а не просто запоминать синтаксис. Он охватывает флексы, гриды, выражения от контейнера и :has() через визуальные уроки и интерактивные демо, помогая строить устойчивые раскладки, которые не ломаются при изменении контента или размера экрана. #css #learn

https://thelayoutmaestro.com

Выпуск №520. Полина Гуртовая, Вадим Макеев и Алексей Симоненко про Safari 26.4, Firefox 149, TypeScript 6.0 и миксины в CSS.

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

00:01:07 Safari 26.4
00:42:52 Firefox 149
01:19:03 TypeScript 6.0
01:41:42 Миксины в CSS
01:59:28 Ответы на вопросы

CSS is DOOMed: рендеринг DOOM в 3D на CSS. Нильс Линхир создал версию классической игры, где каждый визуальный элемент — это <div>, расположенный в 3D-пространстве с помощью CSS-трансформаций, а JavaScript отвечает только за игровую логику. Проект использует тригонометрические функции CSS, @property для анимируемых кастомных свойств, anchor positioning для HUD и SVG-фильтры для призрачных врагов. #css #3d

https://nielsleenheer.com/articles/2026/css-is-doomed-rendering-doom-in-3d-with-css/

Кастомные элементы с поддержкой форм на практике. Роб Левин делится опытом добавления поддержки Form-Associated Custom Element в библиотеку AgnosticUI с помощью ElementInternals API. Статья описывает две стратегии валидации: делегирование нативным элементам формы и реализацию валидации напрямую, с пошаговыми примерами для input, radio и combobox, включая проблемы изоляции Shadow DOM. #webcomponents #html

https://frontendmasters.com/blog/form-associated-custom-elements-in-practice/

Нативные JSON-модули наконец-то стали реальностью. Мэтт Смит объясняет, как атрибуты импорта позволяют загружать JSON-файлы напрямую через import data from 'data.json' with { type: 'json' } без сборщика. Браузеры и рантаймы обрабатывают JSON-модули нативно с явным указанием типа, что избавляет от трансформаций на этапе сборки и закладывает основу для будущих типов модулей. #json #js

https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/

Squarespace и веб-стандарты: как мы помогли добавить ленивую загрузку видео и аудио в HTML. Скотт Джел рассказывает, как инженеры Squarespace предложили loading="lazy" для элементов <video> и <audio>, работали с WHATWG, написали Web Platform Tests и сотрудничали с командами Mozilla, Apple и Chromium, чтобы фича стала официальным стандартом 23 марта 2026 года. #html #performance

https://engineering.squarespace.com/blog/2026/squarespace-and-web-standards-how-we-helped-bring-html-video-and-audio-lazy-loading-to-todays-browsers

Великое расширение CSS. Павел Лаптев рассматривает CSS-фичи, заменяющие JavaScript-библиотеки: anchor positioning вместо Floating UI, Popover API и <dialog> вместо Radix, scroll-driven animations вместо GSAP, view transitions вместо Motion и кастомизируемый <select> вместо React Select. Вместе они могут убрать до 322 КБ JavaScript. #css #performance

https://blog.gitbutler.com/the-great-css-expansion

Выпуск №521. Никита Дубко и Полина Гуртовая про Container Timing, другую пользу Pretext, партизанскую доступность и взлом Axios.

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

00:01:46 Container Timing
00:17:46 Другая польза Pretext
00:40:48 Партизанская доступность
01:05:19 Взлом Axios
01:30:49 Ответы на вопросы

Что такое CSS containment и как его использовать? Гарри Робертс объясняет недооценённую возможность CSS, позволяющую браузеру пропускать лишнюю работу по раскладке и отрисовке. Статья разбирает каждое значение contain (layout, paint, size, style), сокращения content и strict, а также content-visibility для ленивого рендеринга. Приводится пример OpenTable, где contain: strict сократил время раскладки с 11 до 2 мс, ограничив область с 4371 до 73 элементов. #css #performance

https://csswizardry.com/2026/04/what-is-css-containment-and-how-can-i-use-it/

Как сделать так, чтобы вашей статьёй делились: советы из десяти лет курирования рассылки. Скотт Вандехей, который более десяти лет собирал фронтенд-ссылки, делится практическими советами: добавляйте Open Graph теги, используйте уникальное изображение для шеринга, пишите описательные заголовки, добавляйте краткую аннотацию, правильно настраивайте канонический URL и всегда указывайте дату публикации. #html #learn

https://cloudfour.com/thinks/getting-your-article-shared-tips-from-ten-years-of-newsletter-curation/

Новинки Chrome 147. View transitions на элементах позволяют запускать несколько анимаций одновременно. CSS-функция contrast-color() возвращает чёрный или белый цвет для максимального контраста. Свойство border-shape создаёт нестандартные формы рамок: многоугольники и круги. Также добавлены Math.sumPrecise для точных сумм, диапазон scroll для именованных таймлайнов, интерфейс CSSPseudoElement, ограничения доступа к локальной сети и XML-парсер на Rust. #chrome #browser

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

Под капотом нового фронтенда MDN. Лео Макардл рассказывает, как команда MDN заменила устаревшее React SPA на современную архитектуру с веб-компонентами и Lit. Новая система использует серверные компоненты для статической шаблонизации, лениво загружает интерактивные элементы как кастомные элементы и опирается на Baseline при выборе API. Результат: среда разработки стартует за 2 секунды вместо 2 минут. #mdn #webcomponents

https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/

Инвертированные темы с помощью light-dark(). Дейв Руперт объясняет, как реализовать адаптивное переключение тем с помощью CSS-функции light-dark() и стилевых выражений от контейнера. Техника использует атрибут data-theme="inverted" для автоматического переключения элементов в противоположную цветовую схему на основе настроек браузера. Всё работает в одном стилевом файле без дублирования. Для браузеров без поддержки есть JavaScript-полифил. #css #color

https://daverupert.com/2026/04/inverted-light-dark/

Выпуск №522. Алексей Симоненко, Никита Дубко и Вадим Макеев про новинки Chrome 147, проблемы CSS в Shadow DOM, стейт на CSS-анимациях и фронтенд MDN.

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