Выпуск №530. Никита Дубко и Полина Гуртовая про новинки Chrome 149, локальный AI в Edge, WebKit про WebMCP, как сделать хороший сайт и VoidZero в Cloudflare.

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

00:01:54 Новинки Chrome 149
00:24:17 Локальный AI в Edge
00:39:02 WebKit про WebMCP
01:00:54 Как сделать хороший сайт
01:13:58 VoidZero в Cloudflare

Stylelint-плагин CSS Property Type Validator. Скалк Нитлинг выпустил первую бету плагина, который интегрирует CSS Property Type Validator в существующие процессы линтинга. Плагин проверяет регистрации @property, соответствие значений кастомных свойств зарегистрированному синтаксису и совместимость var(). Ошибки типов ловятся в CI, редакторах и прекомит-хуках без отдельных инструментов. #css #tools

https://schalkneethling.com/posts/introducing-the-css-property-type-validator-stylelint-plugin/

Новинки WebKit в бете Safari 27 с WWDC26. Джен Симмонс представляет 58 новых фич и 525 исправлений: кастомизируемые <select>, scroll anchoring, anchor positioning с учётом трансформаций, WebAssembly JSPI, CSS-псевдокласс :heading, ключевое слово revert-rule, значение stretch для размеров, top-level await в модулях и иммерсивные сцены через <model> на visionOS. #safari #browser

https://webkit.org/blog/17967/news-from-wwdc26-webkit-in-safari-27-beta/

Анимация SVG-карт на CSS. Эмбер Уэйнберг показывает, как оживить SVG-карту: взять элементы <line> и <circle>, сделать ступенчатое появление меток через transition и :nth-of-type, проявить фон с помощью transform: translate3d() и нарисовать линии трюком со stroke-dasharray и stroke-dashoffset. Все анимации внутри prefers-reduced-motion и запускаются переключением класса на родителе через JavaScript. #css #svg

https://amberweinberg.com/css-animated-svg-maps/

Тихая проблема ненужного async. Мэтт Смит предупреждает, что async функция без настоящей асинхронной работы меняет свой контракт и заставляет все вызовы обрабатывать промисы. async распространяется по цепочке вызовов, добавляет когнитивную нагрузку и скрывает, где действительно происходит ввод-вывод. Он советует оставлять синхронные функции синхронными, а async вводить только тогда, когда появляется реальная асинхронная работа. #js #performance

https://allthingssmitty.com/2026/06/08/the-quiet-problem-with-unnecessary-async/

Сессии о вебе на WWDC26. Сарон Йитбарек собрала шесть докладов команды WebKit: новинки беты Safari 27, CSS grid lanes для masonry-раскладок, кастомизируемые <select>, элемент <model> для встраивания 3D-контента, иммерсивные сайты в visionOS 27 и веб-расширения, которые можно упаковывать и публиковать прямо из браузера без Xcode. #safari #browser

https://webkit.org/blog/17974/web-technology-sessions-at-wwdc26/

Выпуск №531. Полина Гуртовая и Алексей Симоненко про новинки беты Safari 27, ненужный async, безопасный npm v12 и адаптивные картинки.

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

00:01:23 Новинки беты Safari 27
00:38:23 Ненужный async
00:57:05 Безопасный npm v12
01:07:53 Адаптивные картинки

CSS реагирует, JS просто слушает. Адам Аргайл представил prop-for-that — небольшую библиотеку, которая отдаёт состояние рантайма в CSS через кастомные свойства. Достаточно добавить data-props-for к элементу, и CSS читает живые значения: позицию курсора, скорость прокрутки, заряд батареи, скорость сети, размер вьюпорта, валидацию форм, без обработчиков событий и работы с DOM. Доступно больше 16 источников. #css #js

https://prop-for-that.netlify.app/

Представляем путеводитель по grid lanes. Джен Симмонс анонсирует новый интерактивный гайд по CSS grid lanes. Можно поиграть с песочницей в режимах Waterfall и Brick, разобраться в размерах треков через fr, minmax() и repeat(), а ещё пройтись по шести демо: фотографии, рецепты, газеты, меню, таймлайны и пинборды. Лучше всего работает в Safari 26.4+. #css #layout

https://webkit.org/blog/18098/introducing-the-field-guide-to-grid-lanes/

Новинки Firefox 152 для разработчиков. CSS-свойство field-sizing для полей форм, экшены в showNotification(), unadjustedMovement для requestPointerLock(), pseudoElement для getAnimations(), свойство side у SVGTextPathElement и экспериментальный импорт текстовых модулей с { type: "text" }. #firefox #browser

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/152

Контекстно-зависимые заголовки в HTML. Мануэль Матузович рассказывает про headingoffset — новый HTML-атрибут, который сдвигает уровни вложенных заголовков в дереве доступности, не меняя самих тегов. Заворачиваем секцию в headingoffset="1", и <h1> внутри становятся <h2> для скринридеров. Атрибут headingreset позволяет отключить эффект. Особенно полезно для веб-компонентов, рендерящих заголовки в Shadow DOM. Доступно в Firefox Nightly за флагом. #html #a11y

https://www.matuzo.at/blog/2026/content-aware-headings

Основы и опыт разработки с CSS @​function. Джейн Ори разбирает кастомные CSS-функции: как с помощью @function инкапсулировать переиспользуемое поведение стилей, принимать типизированные аргументы со значениями по умолчанию, держать внутренние переменные приватными и валидировать результат через returns. Среди ограничений — отсутствие рекурсии. Также автор собирает DX-проблемы: тихие сбои, недостижимые фолбэки и отсутствие спред-синтаксиса. #css #learn

https://frontendmasters.com/blog/the-fundamentals-and-dev-experience-of-css-function/

Выпуск №532. Никита Дубко и Вадим Макеев про Firefox 152, планы Mozilla на 2026, закат Manifest V2, MCP-сервер MDN и браузеры на консолях.

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

00:01:31 Новинки Firefox 152
00:20:47 Планы Mozilla на 2026
00:30:57 Закат Manifest V2
01:01:05 MCP-сервер MDN
01:16:30 Браузеры на консолях

Вышел Babel 8: только ESM, без ES5 по умолчанию и плавный путь миграции. Команда Babel выпустила восьмую версию спустя восемь лет, за которые загрузки выросли с 1,7 до 651 млн в неделю, сосредоточившись на трёх изменениях, а не на новых возможностях. Теперь Babel только ESM и требует Node.js 22+, больше не компилирует в ES5, а целится в современные браузеры через Browserslist и заменяет общие опции loose и spec на assumptions, включаемые по отдельности. #js #tools

https://babeljs.io/blog/2026/06/16/8.0.0/

Улучшаем карточки с помощью 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/