Улучшаем карточки с помощью anchor positioning. Эмиль Бьёрклунд накрывает карточку псевдоэлементом ссылки через anchor positioning, чтобы вся поверхность была кликабельной без оборачивания всего в <a>. С position-area: center и place-self: stretch псевдоэлемент заполняет карточку, а отступ снизу через anchor() привязывает его ко вторичному действию, оставляя мёртвую зону вокруг кнопки без магических чисел. #anchor #css

https://thatemil.com/blog/clickable-surface-expansion-using-anchor-position/

Анимируем элемент <dialog> с помощью view transitions. Рик Скеннинк применяет View Transitions API как прогрессивное улучшение: проверяет prefers-reduced-motion и поддержку startViewTransition, переносит view-transition-name с <button> и её текста на <dialog> и его заголовок внутри startViewTransition(), превращая кнопку в модальное окно. #css #viewtransition

https://pqina.nl/blog/animating-the-dialog-element-using-view-transitions/

Эксперименты с random() в CSS. Килиан Валкхоф в блоге Polypane разбирает новую CSS-функцию random(), которая возвращает случайное значение между минимумом и максимумом, с необязательным шагом и ключевым словом element-scoped для одинаковых значений у элемента. Среди демо — боке, падающие лепестки сакуры, перетаскиваемая стопка фото, случайная поэзия с if() и северное сияние. Работает в Safari 26.2+ и Chromium 148+ за флагом. #css #animation

https://polypane.app/blog/experimenting-with-random-in-css/

Чего не хватает SVG. Патрик Броссет собрал отзывы разработчиков из тикетов Chromium, предложений в Interop, опроса State of CSS и соцсетей и выделил одиннадцать пробелов: стилизация извне, интеграция с CSS, перенос и раскладка текста, производительность, создание анимаций, отзывчивый viewBox, переиспользование через <use> и <symbol>, геометрические API, совместимость, доступность и надёжность <foreignObject>. #svg #css

https://patrickbrosset.com/articles/2026-06-22-whats-missing-from-svg/

Выпуск №533. Никита Дубко, Алексей Симоненко и Вадим Макеев про чего не хватает SVG, DevTools для агентов, Grid Lanes и доступность, Git Worktree и одинаковость сайтов.

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

00:01:38 Чего не хватает SVG
00:28:30 DevTools для агентов
00:55:34 Grid Lanes и доступность
01:14:40 Git Worktree
01:27:52 Одинаковость сайтов

Ваши grid lanes, скорее всего, провалят WCAG 2.4.3. Мануэль Матузович показывает, как grid lanes переставляют элементы ради выравнивания высоты колонок — из-за этого порядок табуляции расходится с визуальным и нарушает WCAG 2.4.3 Focus Order. Свойство flow-tolerance помогает, но часто требует очень больших значений, а reading-flow может всё исправить, когда появится поддержка. #css #a11y

https://www.matuzo.at/blog/2026/grid-lanes-accessibility

Современное оформление тем в CSS с light-dark(), contrast-color() и style-выражениями. Юна Кравец объединяет light-dark() для цветов с учётом предпочтений пользователя, @​property для типизированных свойств, contrast-color() для автоматического выбора чёрного или белого текста и @​container style() для более насыщенных палитр. Так разделяются темизация всей страницы и отдельных компонентов, а тени в светлой теме и свечение рамок в тёмной задают глубину. #css #color

https://una.im/modern-css-theming/

A11y​.quest: 128 вопросов, чтобы прокачать навыки доступности. Дэйв Дэвис сделал интерактивный тест, проверяющий знания по семантическому HTML, ARIA и другим темам. Вопросы отсортированы по сложности, их можно перемешивать и отслеживать точность ответов и серии. #a11y #html

https://a11y.quest/

Новинки Chrome 150. AccentColor и AccentColorText дают установленным приложениям доступ к системному акцентному цвету. Функция polygon() получила скругление углов, а zoom стал анимируемым. В CSS url() появились модификаторы cross-origin(), integrity() и referrer-policy(). Новое свойство text-fit подгоняет размер шрифта под ширину контейнера, background-clip: border-area упрощает градиентные рамки, а методы прокрутки возвращают промисы. #chrome #browser

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

Представлен MCP-сервер Safari для веб-разработчиков. Сарон Йитбарек рассказывает о новом Model Context Protocol сервере, который позволяет ИИ-агентам видеть, как код рендерится в Safari. Он доступен в Safari Technology Preview 247 и даёт агентам доступ к DOM-элементам, сетевым запросам, скриншотам и консоли через 16 встроенных инструментов. Всё работает локально, без отправки данных в Apple. #safari #ai

https://webkit.org/blog/18136/introducing-the-safari-mcp-server-for-web-developers/

Выпуск №534. Полина Гуртовая и Никита Дубко про новинки Chrome 150, элемент <usermedia>, подписку на Baseline, Safari MCP и Figma Config 2026.

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

00:01:07 Новинки Chrome 150
00:55:44 Элемент usermedia
01:05:25 Подписка на Baseline
01:13:37 Safari MCP
01:25:51 Figma Config 2026

Идеальная высота кастомизируемого селекта. Джейк Арчибальд подбирает размеры пикера <select> с помощью CSS anchor positioning: чтобы он не касался краёв вьюпорта, не сжимался слишком сильно и не становился слишком высоким. Он показывает, как calc-size() сочетает внутренние размеры вроде fit-content и stretch с ограничениями min(), плюс фолбеки через @supports для Firefox и Safari. #css #anchor

https://jakearchibald.com/2026/goldilocks-select-height/

Плавные переходы фона по времени суток с Temporal и CSS color-mix. Софи Кунин связывает время дня с четырьмя стадиями (рассвет, день, закат и ночь), у каждой своя палитра. Temporal API считывает текущее время, а color-mix() плавно смешивает цвета соседних стадий во время переходов. Сдвиг анимируется через зарегистрированные кастомные свойства, с фолбеком на @supports и полифилом для Safari. #temporal #color

https://localghost.dev/blog/time-based-background-colour-transitions-with-temporal-and-css-color-mix/

Представляем Baseline Alerts. Джереми Вагнер рассказывает о новой системе уведомлений в дэшборде Web Platform Status, которая сообщает об изменении статуса поддержки веб-фич в браузерах. Войдите через GitHub, чтобы отслеживать фичи и получать оповещения по email, RSS или в Slack, когда они становятся Newly или Widely available. Настройте частоту, сохраняйте поиски как персональные рассылки и делитесь результатами по ссылке или QR-коду. #baseline #interop

https://web.dev/blog/baseline-alerts

Введение в anchor positioning в CSS. Джош Комо разбирает Anchor Positioning API, который позволяет привязывать тултипы и списки к элементам. Он показывает anchor-name, position-anchor и position-area для размещения, position-try-fallbacks для перестановки, когда не хватает места, и запросы от контейнера, чтобы переворачивать указатели. Ключевое слово flip-block даёт кроссбраузерную поддержку, плюс @supports и полифил для старых браузеров. #css #anchor

https://www.joshwcomeau.com/css/anchor-positioning/

Что нового в ECMAScript 2026. Павел Гжибек разбирает возможности новой спецификации: Array.fromAsync, Error.isError(), Math.sumPrecise для точного суммирования чисел с плавающей точкой, конвертация Uint8Array в Base64 и Hex, Iterator.concat() для объединения итераторов, доступ к исходному тексту в JSON.parse и Map.getOrInsert() для вставки значений. #ecmascript #js

https://pawelgrzybek.com/whats-new-in-ecmascript-2026/

Выпуск №535. Никита Дубко, Вадим Макеев, Полина Гуртовая и Дэн Абрамов про State of Devs 2026, TypeScript 7.0 и AT Protocol.

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

00:01:23 Дэн Абрамов
00:03:50 State of Devs 2026
00:06:02 TypeScript 7.0
00:14:12 AT Protocol
00:33:15 ATProto: что это
01:04:42 ATProto: на практике
01:28:29 ATProto: будущее

State of Devs 2026. Саша Грейф и Devographics снова открыли опрос обо всём, что не связано с кодом: о здоровье, хобби, карьере, деньгах и сообществе. Он затрагивает те стороны жизни разработчиков, которые редко попадают в технические опросы: баланс работы и жизни, ментальное здоровье, зарплаты и удалённую работу. Опрос займёт около 15 минут и поможет составить более полную и разнообразную картину сообщества. #stateof #survey

https://survey.devographics.com/en-US/survey/state-of-devs/2026