00:01:22 Новинки Firefox 151
00:26:00 CSS и UI на Google I/O
00:42:29 WebMCP и агентный веб
00:45:47 Modern Web Guidance
01:18:59 DevTools для агентов
01:32:06 Prompt API в Chrome
01:41:07 Core Web Vitals
01:53:26 HTML в Canvas

600+ миллионов человек пишут справа налево: две правки для вашего приложения. Нина Торгунакова разбирает два сценария. Для англоязычных приложений с полями свободного ввода достаточно dir="auto" — браузер сам определит направление по первому символу, без JavaScript. Для полностью локализованных интерфейсов задайте dir="rtl" на <html> и замените физические CSS-свойства на логические: margin-inline-start, padding-inline-end и text-align: start. #css #a11y

https://evilmartians.com/chronicles/600-million-people-write-right-to-left-2-fixes-your-app-needs

Декларативные частичные обновления HTML. Барри Поллард и Ноам Розенталь представляют две идеи для веб-платформы: инструкции обработки <?marker> и <?start>/<?end> в паре с <template> позволяют серверу вставлять HTML в нужные места документа без последовательной доставки. Новые JS-методы setHTML(), appendHTML() и streamHTML() дают единообразное API для частичных обновлений. Полифилы есть на npm. #html #api

https://developer.chrome.com/blog/declarative-partial-updates

Точные размеры резиновых блоков с round(). Ахмад Шадид рассказывает, как CSS-функция round() дополняет clamp(), округляя плавные значения до удобных шагов, избавляя от дробей вроде 19.7px. Он разбирает размеры шрифтов в карточках, системы типографики и базовые сетки, показывает round() с единицами от контейнера для сохранения визуального ритма при изменении вьюпорта. Также упоминает calc-size() для синхронизации высот соседних блоков. #css #typography

https://ishadeed.com/article/css-round/

CSS или JavaScript для анимаций. Джош Комо сравнивает CSS, Web Animations API и JS-библиотеки GSAP и Motion при загруженном основном потоке. Анимации на CSS и Motion остаются плавными, потому что работают вне основного потока, а нативные JS-анимации и GSAP подвисают. Размер библиотек тоже важен: Motion весит 48 КБ в gzip, GSAP — 27 КБ. Джош советует нативный CSS по возможности, а JS-библиотеки — только для того, что CSS не умеет, например для морфинга SVG. #animation #performance

https://www.joshwcomeau.com/animation/css-vs-javascript/

Replacements​.fyi. Инструмент от сообщества e18e помогает находить более производительные и безопасные альтернативы устаревшим или ненужным npm-пакетам. Введите имя пакета — например, is-number, left-pad или is-odd — и получите готовую замену или короткий фрагмент кода. Можно фильтровать по среде: Node, Bun, Deno, Cloudflare или браузер. Также есть список всех пакетов и проверка package.json. #npm #tools

https://replacements.fyi/

Выпуск №529. Вадим Макеев и Никита Дубко про линейки в гэпах, короткие или полные свойства, нормальный line-clamp и потерянное десятилетие фронтенда.

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

00:01:23 Линейки в гэпах
00:28:40 Короткие или полные свойства
00:56:52 Нормальный line-clamp
01:19:42 Потерянное десятилетие

Появление и исчезновение в современном CSS. Мэтт Кроут показывает, как анимировать появление и исчезновение элементов: @​starting-style задаёт начальные значения, transition остаются прерываемыми посреди анимации, а allow-discrete справляется со свойствами вроде display, которые обычно меняются мгновенно. View Transition API дополняет картину, анимируя изменения раскладки между состояниями DOM на примере <dialog> и поповеров. #css #animation

https://joyofcode.xyz/entry-and-exit-css-transitions

CSS-центрирование в 2026 году. Темани Афиф разбирает множество способов центрирования в CSS и показывает, как выбрать подходящий. Теория выравнивания с двумя уровнями и двумя осями, сравнение флексов, гридов, position: absolute и text-align, новое свойство text-box для обрезки отступов вокруг текста, anchor-center в якорном позиционировании, разница между безопасным и небезопасным центрированием. #css #layout

https://css-tricks.com/the-state-of-css-centering-in-2026/

CSS заполняет гэпы линейками. Брехт Де Рюйте разбирает новые CSS-свойства для оформления гэпов в гридах и флексах. Свойства column-rule и row-rule рисуют линейки в гэпах, а rule-break, rule-inset, rule-overlap и rule-visibility-items управляют пересечениями, длиной и условным отображением. Также линейки можно анимировать. #css #layout

https://utilitybend.com/blog/css-is-filling-the-gaps-with-rules-a-way-to-style-gaps-in-grid-and-flex

Новинки Chrome 149. CSS gap decorations позволяют рисовать линейки в гэпах между элементами гридов и флексов. Свойство shape-outside поддерживает функции path(), shape(), rect() и xywh(). SVG-атрибут path-length стал CSS-свойством. Обрезанный текст переключается с ellipsis на clip при взаимодействии пользователя. Также добавлены image-rendering: crisp-edges, Intl.Locale.prototype.variants, а WebSocket-соединения больше не блокируют back/forward кэш. #chrome #browser

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

Спецификация для веб-сайтов. Йост де Валк опубликовал универсальную спецификацию технических возможностей, которыми должен обладать качественный сайт. Документ охватывает основы и семантический HTML, SEO и структурированные данные, доступность, безопасность и CSP, производительность и Core Web Vitals, интернационализацию, а также готовность к агентам через Markdown-эндпоинты, JSON-LD и RSS. #html #a11y

https://specification.website

Выпуск №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/