Выравниваем иконки и подписи. Ахмад Шадид начинает со списка, где align-items: center сбивается, стоит подписи перенестись на вторую строку, а align-items: start поднимает иконку слишком высоко из-за строчного бокса. Помогает единица lh: половина разницы между строкой и размером иконки задаётся как смещение через translateY и работает при любом размере шрифта. Фоновым иконкам на псевдоэлементах нужна пара дополнительных объявлений. #css #layout

https://ishadeed.com/article/aligning-list-icons/

Адаптивные iframe в Chrome 154. Себастьян Бенц и Брамус Ван Дамм рассказывают о свойстве frame-sizing: встроенный фрейм сам растёт под свой контент, без передачи высоты через postMessage. Встраивающая страница задаёт frame-sizing: content-height, а встроенный документ разрешает это элементом <meta>, где можно ограничить список источников. После изменения контента новый замер запрашивают через window.requestResize(). Пока за флагами в Chrome и Edge. #html #css

https://developer.chrome.com/blog/responsive-iframes

Корневой скроллер и как его не потерять. Килиан Валкхоф объясняет, что умеет главный скролл-контейнер страницы: восстанавливает позицию скролла, слушает пробел и стрелки, а на мобильных прячет адресную строку и даёт pull-to-refresh. Обёртка с фиксированной высотой и overflow его подменяет, и это выдаёт window.scrollY, застрявший на нуле. У полноэкранных макетов, стики-шапок и блокировки прокрутки есть решения, сохраняющие скролл страницы. #css #scroll

https://polypane.app/blog/the-root-scroller-and-how-not-to-lose-it/

Один SVG, девять постеров: свойство link-parameters. Вадим Макеев пробует новую спецификацию CSS Linked Parameters: она работает в Firefox Nightly и за флагом в Safari TP. В SVG-файле вместо значения env(--color, фолбек), а страница передаёт своё через link-parameters: param(--color, coral). Постер Уорхола в SVG, вставленный девять раз как <img>, раскрашивается по-разному из одного закешированного файла. #css #svg

https://pepelsbey.dev/articles/svg-link-params/

Ситуативные отношения браузеров: когда браузеры согласны, а спецификация нет. Ракхи Шарма разбирает, что происходит, если Chrome, Firefox и Safari делают одно, а спецификация описывает другое. Иногда чинят браузеры, а иногда правят спецификацию: так вышло с нормализацией переводов строк при отправке форм. WHATWG, Web Platform Tests и Compatibility Standard ведут всех к общему поведению. #browser #interop

https://www.atbrakhi.dev/blog/browsers-situationship

Выпуск №546. Алексей Симоненко, Вадим Макеев и Никита Дубко про настройку таблиц MDN, новинки Chrome 154, параметры для SVG, хорошие сайты от ИИ и будущее браузеров.

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

00:01:30 Настройка таблиц MDN
00:07:39 Новинки Chrome 154
00:56:53 Параметры для SVG
01:14:44 Хорошие сайты от ИИ
01:32:57 Будущее браузеров

Новинки Chrome 154. Новое свойство text-decoration-inset задаёт, где начинаются и заканчиваются подчёркивания, надчёркивания и зачёркивания, а отрицательные значения выводят их за пределы текста. У свойства scroll-marker-group появились режимы links и tabs, которые задают порядок фокуса и ARIA-семантику маркеров прокрутки. Элемент <iframe> умеет подстраиваться под контент через frame-sizing, а в JavaScript появился Iterator.includes(). #chrome #browser

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

Как ускорить сайт, отправляя больше CSS. В блоге GitHub Джош Блэк и Мари Лукка рассказывают, как дизайн-система Primer перешла с CSS-in-JS на CSS-модули. Пропс sx создавал рантайм-нагрузку, которая росла с числом компонентов на странице, поэтому команда выкатывала обе версии за флагами и сравнивала скриншоты визуальных тестов. Итог: серверный рендеринг страницы стал быстрее на 55%, а инициализация компонентов — на 25%. #css #performance

https://github.blog/engineering/architecture-optimization/improving-site-performance-by-shipping-more-css/

Новинки Firefox 157 для разработчиков. Функция at-rule() в @supports проверяет поддержку директивы, например at-rule(@scope), и работает в функции supports() директивы @import. У свойств overscroll-behavior появилось значение chain: прокрутка передаётся другой прокручиваемой области, но без стандартного отскока. Animation.reverse() теперь запускает анимацию с playbackRate 0. За флагами: ML-KEM в Web Crypto и опция navigate у уведомлений. #firefox #browser

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

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

https://2026.stateofdevs.com/en-US/

Кризис среднего возраста у JavaScript. Марун Байдун разбирает, как Rust, Go и Zig захватывают инструменты JavaScript. Пока линтеры и форматтеры были на том же языке, что и код, любой мог их отладить и починить. Бандлер, переписанный на Rust, быстрее, но поддерживать его могут меньше людей. Мы компилируем JavaScript на Rust, чтобы получить JavaScript для движка, написанного в основном на C++, то есть прокладываем всё более быстрые рельсы для медленного поезда. #js #tools

https://maroun-baydoun.com/blog/javascript-midlife-crisis/

Выпуск №547. Никита Дубко, Вадим Макеев и Алексей Симоненко про новинки Firefox 157, стилизацию тултипов и State of Devs.

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

00:01:23 Новинки Firefox 157
00:31:40 Стилизация тултипов
01:02:16 State of Devs

Developer Signals: влияйте на то, что браузеры сделают дальше. Рик Вискоми запустил инструмент, где можно посмотреть 354 будущие веб-фичи, отфильтровать их по поддержке в браузерах и проголосовать за нужные. Есть два направления: вечнозелёные фичи и предложения для Interop 2027. Голоса и сценарии использования через GitHub попадают прямо в репозиторий группы WebDX, чтобы помочь браузерам расставить приоритеты. #interop #browser

https://developer-signals.dev

Передаём sibling-count() родительскому элементу. Темани Афиф показывает, как родителю узнать, сколько у него детей. Функция sibling-count() считает соседей, а не детей, поэтому он добавляет лишний элемент шириной в sibling-count() и с помощью анимаций по скроллу, view-timeline и timeline-scope превращает её в переменную --n на родителе. Пригодится для счётчиков, почти квадратных сеток с sqrt() и круговых раскладок. Пока только в Chrome и Edge. #css #scroll

https://blog.master.dev/transferring-sibling-count-to-a-parent-element/

Пламени нужны три синусоиды. Кармен Ансио разбирает анимацию спички на канвасе: от карандашных набросков до кода. Пламя состоит из трёх капель, нарисованных через quadraticCurveTo, которые качаются тем меньше, чем ближе к основанию. Одна синусоида похожа на маятник, а три с разными частотами дают живое мерцание, которое повторяется только через 21 секунду. Фазы зажигания, горения и затухания управляются конечным автоматом с учётом prefers-reduced-motion. #animation #js

https://www.carmenansio.com/articles/matchstick-flame-canvas/

Новинки Chrome 155. Вернулась поддержка JPEG XL с прогрессивной отрисовкой. CSS-функция symbols() задаёт стиль счётчика прямо на месте, без именованного правила @counter-style, свойство margin-trim убирает отступы по краям контейнера, а text-decoration-skip-spaces управляет пропуском пробелов в подчёркивании. В JavaScript появились текстовые модули через import with { type: "text" }, а в WebCrypto — постквантовые алгоритмы ML-KEM и ML-DSA. #chrome #browser

https://chromestatus.com/release-notes/155

Рейтинг фич веб-платформы на 2027 год. Команда Firefox просит расставить по важности предложения для Interop 2027 — от CSS @function и if() до Temporal, кастомизируемого <select> и grid lanes. Войдите через GitHub и выберите около 10 из 100 предложений. Добавляйте только те, к которым относитесь положительно: всё, что попало в рейтинг, считается голосом «за». В прошлом году 1900+ голосов повлияли и на Interop, и на приоритеты Firefox. #interop #firefox

https://interop-rank.fxdx.dev/

Выпуск №548. Лёша Красиков, Алексей Симоненко, Никита Дубко и Полина Гуртовая про новинки Chrome 155, JPEG XL в Chrome, элемент <poster> для видео, пламя из синусоид, альфу Bootstrap 6 и навыки кроме ИИ.

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