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.

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

00:01:30 Помощники, возвращайтесь
00:03:49 Новинки Chrome 147
00:35:31 Проблемы CSS в Shadow DOM
00:52:01 Стейт на CSS-анимациях
01:07:11 Фронтенд MDN

Прогрессивные веб-компоненты. Ариэль Салминен представляет Elena — опенсорсную библиотеку для создания веб-компонентов, которые сначала работают на HTML и CSS, а затем гидратируются с помощью JavaScript. Elena решает распространённые проблемы: сдвиги раскладки, проблемы доступности и слабую поддержку серверного рендеринга. Библиотека весит всего 2,6 КБ и включает более 1000 тестов со 100% покрытием кода. #webcomponents #js

https://arielsalminen.com/2026/progressive-web-components/

Динамический текст
Любопытный типографический приём из новой тайпскрипт-библиотеки: текст динамически подстраивается и пересчитывается без DOM и CSS. Техническое новшество в библиотеке открывает возможность по-новому поиграться со шрифтами. Не сильно верю, что это пригодится утилитарным сервисам, но, возможно, мы увидим интересные зрелищные приёмы на промо-сайтах.

Источник
#ui #типографика

Река
Роскошный территориальный брендинг: в русле реки Амазонки дизайнеры увидели формы букв. За наводку спасибо @Vohan_dsgn

Источник
#типографика