Перестраиваем вёрстку турнирной таблицы FIFA на CSS-сабгридах. Ахмад Шадид пересобирает сетку чемпионата мира с чистым DOM, отказавшись от обёрток-костылей на сайте. CSS-гриды задают колонки и строки, сабгриды позволяют вложенным матчам наследовать дорожки родителя, а отрицательные номера линий вроде grid-column: -2 дают гибкость. Флексы центрируют матчи по вертикали, а выражения от контейнера подстраивают вёрстку под доступное место. #css #layout

https://ishadeed.com/article/fifa-layout/

Доступное модальное окно на нативном <dialog>. Агустин Барриентос использует showModal(), чтобы получить из коробки перехват фокуса, закрытие по Escape и возврат фокуса, а затем оборачивает всё в переиспользуемый Lit-компонент с типизированными событиями. Он задаёт начальный фокус, добавляет light-dismiss через атрибут closedby, анимирует псевдоклассом :open и @starting-style и уважает prefers-reduced-motion. #dialog #a11y

https://agustinbarrientos.com/writing/senior-eye/accessible-modal-dialog/

Cross-Origin Storage API: не скачиваем одно и то же дважды. Деннис Морелло разбирает предложенный стандарт, который хранит и отдаёт большие файлы по их SHA-256-хешу вместо URL, создавая общий кеш для разных сайтов. Единственный метод requestFileHandle() возвращает файл, если он есть, либо скачивает и сохраняет. Приватность встроена: нельзя перечислить файлы, ответы «не найдено» намеренно неоднозначны, а для общих файлов есть публичный список хешей. #performance #browser

https://morello.dev/blog/cross-origin-storage-api

Выпуск №537. Вадим Макеев, Полина Гуртовая, Лёша Красиков, Никита Дубко и Алексей Симоненко про новинки Firefox 153, Cross-Origin Storage API, тестирование перфоманса и взлёт Base UI.

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

00:01:23 Новинки Firefox 153
00:23:35 Cross-Origin Storage API
00:45:27 Тестирование перфоманса
01:24:19 Взлёт Base UI

Новинки WebKit в Safari 26.6. Джен Симмонс разбирает небольшое, но полезное обновление: новый параметр compileOptions позволяет использовать JS String Builtins с WebAssembly compileStreaming() и instantiateStreaming(), не переключаясь на непотоковую компиляцию. Плюс восемь багфиксов в CSS, сети, service workers, веб-расширениях и WebRTC. #safari #wasm

https://webkit.org/blog/18178/webkit-features-for-safari-26-6/

Новинки Chrome 151. Новый элемент <usermedia> управляет доступом к камере и микрофону и берёт на себя запросы и доставку MediaStream без отдельного вызова getUserMedia(). Атрибут shadowrootslotassignment на <template> управляет назначением слотов прямо в HTML. Две новые метрики производительности soft-navigation и interaction-contentful-paint измеряют отклик в SPA. #chrome #browser

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

Безопасный способ выпустить npm-пакет в 2026 году. Андрей Ситник разбирает, как атаки на цепочку поставок идут полуавтоматически и компрометируют сотни пакетов в день и предлагает строить защиту как повышение стоимости атаки. Быстрые меры, большинство из которых внедряются за день: доверенная и поэтапная публикация в npm, обязательная 2FA, создание тегов только админами, экшены CI по SHA и трёхдневная выдержка обновлений. #npm #security

https://evilmartians.com/chronicles/the-secure-way-to-release-an-npm-package

Шпаргалки по флексам, гридам, anchor positioning и invoker commands. Килиан Валкхоф делится четырьмя CSS-шпаргалками, которые сделал, потому что постоянно забывал синтаксис anchor positioning и grid-area. Каждая — справочник со свойствами и значениями по своей теме, чтобы держать под рукой. Их можно бесплатно скачать в PDF и PNG в формате A5, готовом к печати. #css #learn

https://polypane.app/blog/cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands/

Выпуск №538. Никита Дубко и Полина Гуртовая про новинки Chrome 151, релиз Safari 26.6, ACP v2, роутинг и случайную ссылку на CSS.

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

00:01:40 Новинки Chrome 151
00:40:26 Релиз Safari 26.6
00:46:10 Вышел ACP v2
01:05:08 Роутинг в CSS
01:21:55 Случайная ссылка на CSS

Способы применения бесконечности в CSS. Адам Аргайл показывает, что умеют calc(infinity * 1px) и -infinity помимо трюка со скруглением: идеальные круги, максимальный z-index на пределе целых чисел, заморозка анимаций бесконечной длительностью для инспекции view transitions в DevTools, снятие нижней и верхней границ в clamp(), булева логика и управление диапазонами scroll-driven анимаций. Элегантно и просто весело. #css #animation

https://nerdy.dev/css-infinity-use-cases

Liquid Glass 2.0 в CSS (месть Aqua). Джаред Уайт воссоздаёт обновлённый вид Liquid Aqua от Apple на чистом CSS: тёмные контрастные границы по горизонтали и вертикальный градиент в духе старого macOS Aqua. Он разбирает подбор цветов, прозрачности и точек градиента, использует @property для переменных, повторяющиеся состояния :active и обработчик ontouchstart для тачскринов — и напоминает не жертвовать читаемостью ради красоты. #css #design

https://thathtml.blog/2026/07/liquid-glass-in-css-liquid-aqua/

Гайд по 3D в CSS: perspective, preserve-3d и translateZ. Кармен Ансио разбирает, как строить полноценные 3D-сцены в CSS, показывая переход от нарисованной глубины Super Mario Bros 3 к настоящей камере Super Mario 64. В обзоре: perspective и perspective-origin для установки камеры, preserve-3d для сохранения реальной глубины, переиспользуемые кубоиды, анимация камеры и translateZ, rotateX/Y/Z, scale3d и matrix3d. Все шесть свойств — Baseline. #css #3d

https://www.carmenansio.com/articles/3d-css-guide/

Стилизация навигации: декларативное сопоставление адресов и навигации в CSS. Брамус Ван Дамм разбирает предложение CSS Route and Navigation Matching, которое позволяет стилизовать навигацию декларативно, без JavaScript. В нём: правило @route для именования адресов через URL-паттерны, @navigation для реакции на from и to при переходе, псевдокласс :nav-source для инициировавшего переход элемента и селектор :link-to() для стилизации ссылок по целевому адресу. #css #router

https://www.bram.us/2026/07/30/styling-the-navigation-declarative-route-and-navigation-matching-in-css/

Переключатели тёмной темы: двух состояний достаточно. Лия Веру считает, что привычный переключатель из трёх вариантов «светлая, тёмная, системная» продиктован реализацией, а не людьми: тему меняют, только когда текущая мешает, а не на будущее. Храните три состояния внутри, но показывайте два, а на кнопке — ту тему, в которую она переключит. Сбрасывать сохранённый выбор стоит только по действию пользователя. #design #color

https://lea.verou.me/blog/2026/dark-mode-toggles/

Выпуск №539. Вадим Макеев, Лёша Красиков и Алексей Симоненко про результаты State of CSS 2026 и переключатель тёмной темы.

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

00:01:08 Новый ведущий
00:02:10 State of CSS: результаты
00:30:40 State of CSS: ИИ
00:47:38 State of CSS: инструменты
01:01:06 State of CSS: боль
01:15:38 Переключатель тёмной темы

Результаты опроса State of CSS 2026. Саша Грейф и Devographics опросили 4902 разработчика: любимой новинкой года стало anchor positioning, оно возглавило и список желаемого, и список жалоб на поддержку в браузерах. То же самое с View Transitions и if(). CSS сопротивляется AI: с его помощью пишут в среднем лишь 28% кода, куда меньше, чем в других технологиях. Больше всего проблем вызывают позиционирование, :has() и выражения от контейнера. #css #survey

https://2026.stateofcss.com/en-US

Нужны ли карты кода? Джеймс Гарбутт и Алекс Лихтер объясняют, когда npm-пакетам стоит их публиковать, а когда они лишь раздувают вес. Из-за них пакет change-case вырос с 7,2 КБ до 22,7 КБ, а magic-string без них уменьшился с 241 КБ до 155 КБ. Они оправданы, только если опубликованный код теряет информацию: минифицированный вывод или синтаксис вроде Vue SFC. Лучше публиковать читаемый код без минификации или хранить исходники удалённо через sourceRoot. #npm #performance

https://e18e.dev/blog/source-maps-or-not.html