| Сайт | https://web-standards.ru |
| Telegram | https://t.me/webstandards_ru |
| Bluesky | https://bsky.app/profile/web-standards.ru |
| YouTube | https://www.youtube.com/webstandards_ru |
| Сайт | https://web-standards.ru |
| Telegram | https://t.me/webstandards_ru |
| Bluesky | https://bsky.app/profile/web-standards.ru |
| YouTube | https://www.youtube.com/webstandards_ru |
Современное оформление тем в CSS с light-dark(), contrast-color() и style-выражениями. Юна Кравец объединяет light-dark() для цветов с учётом предпочтений пользователя, @property для типизированных свойств, contrast-color() для автоматического выбора чёрного или белого текста и @container style() для более насыщенных палитр. Так разделяются темизация всей страницы и отдельных компонентов, а тени в светлой теме и свечение рамок в тёмной задают глубину. #css #color
Ваши grid lanes, скорее всего, провалят WCAG 2.4.3. Мануэль Матузович показывает, как grid lanes переставляют элементы ради выравнивания высоты колонок — из-за этого порядок табуляции расходится с визуальным и нарушает WCAG 2.4.3 Focus Order. Свойство flow-tolerance помогает, но часто требует очень больших значений, а reading-flow может всё исправить, когда появится поддержка. #css #a11y
Выпуск №533. Никита Дубко, Алексей Симоненко и Вадим Макеев про чего не хватает SVG, DevTools для агентов, Grid Lanes и доступность, Git Worktree и одинаковость сайтов.
Лайв на Ютубе https://youtu.be/E3Mmft2nGA8
Слушайте на Ютубе https://youtu.be/CzcjsYO89VM
Ссылки на сайте https://web-standards.ru/podcast/533/
Чего не хватает 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/
Эксперименты с random() в CSS. Килиан Валкхоф в блоге Polypane разбирает новую CSS-функцию random(), которая возвращает случайное значение между минимумом и максимумом, с необязательным шагом и ключевым словом element-scoped для одинаковых значений у элемента. Среди демо — боке, падающие лепестки сакуры, перетаскиваемая стопка фото, случайная поэзия с if() и северное сияние. Работает в Safari 26.2+ и Chromium 148+ за флагом. #css #animation
Анимируем элемент <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/
Улучшаем карточки с помощью anchor positioning. Эмиль Бьёрклунд накрывает карточку псевдоэлементом ссылки через anchor positioning, чтобы вся поверхность была кликабельной без оборачивания всего в <a>. С position-area: center и place-self: stretch псевдоэлемент заполняет карточку, а отступ снизу через anchor() привязывает его ко вторичному действию, оставляя мёртвую зону вокруг кнопки без магических чисел. #anchor #css
https://thatemil.com/blog/clickable-surface-expansion-using-anchor-position/
Вышел Babel 8: только ESM, без ES5 по умолчанию и плавный путь миграции. Команда Babel выпустила восьмую версию спустя восемь лет, за которые загрузки выросли с 1,7 до 651 млн в неделю, сосредоточившись на трёх изменениях, а не на новых возможностях. Теперь Babel только ESM и требует Node.js 22+, больше не компилирует в ES5, а целится в современные браузеры через Browserslist и заменяет общие опции loose и spec на assumptions, включаемые по отдельности. #js #tools
Выпуск №532. Никита Дубко и Вадим Макеев про Firefox 152, планы Mozilla на 2026, закат Manifest V2, MCP-сервер MDN и браузеры на консолях.
Лайв на Ютубе https://youtu.be/IqPdGRD1UhE
Слушайте на Ютубе https://youtu.be/Qq3nDTw5RyA
Ссылки на сайте https://web-standards.ru/podcast/532/