Браузеры по-другому относятся к крупным сайтам. Ден Оделл рассказывает, как Safari и Firefox поддерживают тысячи строк специфичного для сайтов кода, чтобы популярные сервисы вроде TikTok, Netflix и Reddit продолжали работать. В WebKit это Quirks.cpp, в Firefox — about:compat, иногда они даже подменяют user agent на Chrome. Доминирование Chrome заставляет другие браузеры приспосабливаться, повторяя эпоху Internet Explorer наоборот. #browser #interop

https://denodell.com/blog/browsers-treat-big-sites-differently

HTML Sanitizer API. Ахмад Альфи рассказывает о новом браузерном API для защиты от XSS без DOMPurify. Безопасные методы setHTML и parseHTML всегда удаляют опасное содержимое, а setHTMLUnsafe и parseHTMLUnsafe уважают ваши настройки. Списки разрешённых и запрещённых элементов и атрибутов дают гибкий контроль. Подходит для комментариев, WYSIWYG-редакторов и предпросмотра Markdown, но серверная санитизация по-прежнему обязательна. #security #html

https://alfy.blog/2026/05/07/html-sanitizer-api.html

Скоро мы наконец сможем отправить JavaScript в ShadowRealm. Мэт Маркиз разбирает предложение TC39 ShadowRealm, создающее изолированные контексты исполнения с собственными глобальными объектами в том же потоке, что и основной хост. Двух методов evaluate() и importValue() достаточно, чтобы изолировать сторонние скрипты, рекламу и тесты без загрязнения основного окружения. Сейчас на стадии 2.7, в браузерах пока нет. #js #ecmascript

https://css-tricks.com/soon-we-can-finally-banish-javascript-to-the-shadowrealm/

Новинки WebKit в Safari 26.5. Джен Симмонс представляет псевдокласс :open для стилизации открытого состояния <details>, <dialog>, <select> и <input>, ключевое слово element-scoped для функции random(), color-interpolation с linearRGB для SVG-градиентов, ToggleEvent.source для popover API и новый Origin API для структурного сравнения источников. Плюс 63 багфикса в SVG, WebRTC, сети, редактировании, anchor positioning и анимациях по прокрутке. #safari #browser

https://webkit.org/blog/17938/webkit-features-for-safari-26-5/

Как управлять бесконечными CSS-анимациями. В первой части из двух Темани Афиф показывает, как ускорять, замедлять и разворачивать бесконечные CSS-анимации налету. С помощью animation-composition: add анимации накладываются, CSS-переменные задают длительность и коэффициент скорости, а функции abs() и sign() позволяют управлять скоростью и направлением независимо — без перезапуска анимации. #css #animation

https://frontendmasters.com/blog/how-to-control-infinite-css-animations-part-1-of-2/

Выпуск №526. Алексей Симоненко, Никита Дубко и Вадим Макеев про Chrome 148, Blink для Apple tvOS, Node.js 26, No-Vary-Search и Local-first.

Лайв на Ютубе https://youtu.be/9xvVANpc-fA
Слушайте на Ютубе https://youtu.be/L-D7uCVkJHM
Ссылки на сайте https://web-standards.ru/podcast/526/

От React к нативному вебу с nanotags: миграция, сэкономившая 100 Кб. Павел Гринченко рассказывает, как они перенесли маркетинговый сайт на Astro с React и Ark UI на нативные веб-компоненты, сократив JavaScript на 100 Кб. Nanotags — обёртка размером менее 2,5 Кб с валидацией пропсов, типизированными рефами и автоматической очисткой, а также подключаемыми ARIA-паттернами. В связке с nanostores этого хватает для меню, модалок и переключателей. #webcomponents #react

https://evilmartians.com/chronicles/from-react-to-native-web-with-nanotags-a-migration-that-saved-100kb

Использование safe-area-inset для безопасных раскладок на мобильных. У современных телефонов есть вырезы, камеры и плавающие кнопки, которые перекрывают интерфейс, если их не учесть. В блоге Polypane разбирают env(safe-area-inset-*), зачем нужен viewport-fit=cover в <meta viewport>, как комбинировать отступы с calc(), а также новые safe-area-max-inset-*, которые не меняются, даже когда адресная строка прячется при прокрутке. #css #layout

https://polypane.app/blog/using-safe-area-inset-to-build-mobile-safe-layouts/

Новинки Chrome 148. CSS-выражения от контейнера могут срабатывать только по container-name, без container-type. Функция at-rule() в @​supports проверяет поддержку CSS at-rules. Элементы <video> и <audio> получили loading="lazy" для отложенной загрузки. Prompt API даёт доступ к локальным языковым моделям ИИ. Также добавлены Web Serial API на Android, режим Immediate UI в Web Authentication, text-decoration-skip-ink: all и revert-rule. #chrome #browser

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

Синтаксис диапазонов в медиавыражениях. Ахмад Шадид показывает, как классические min-width и max-width приводят к ошибкам на совпадающих брейкпоинтах — например, два элемента скрываются на одних и тех же 300px. Решение: синтаксис диапазонов с операторами <=, >=, > — он поддерживается во всех браузерах с марта 2023. Код понятнее, без 1px сдвигов, и та же логика работает для выражений от контейнера. #css #layout

https://ishadeed.com/article/range-syntax/