00:01:22 Новинки Chrome 155
00:37:11 JPEG XL в Chrome
00:51:53 Элемент poster для видео
01:07:12 Пламя из синусоид
01:19:00 Альфа Bootstrap 6
01:39:17 Навыки кроме ИИ

iPhone Duo: удвоенное разочарование в Safari. Майк Пионтек проверил свои сайты в симуляторе iPhone Duo и выяснил, что Safari не считает боковую панель безопасной зоной, так что отступы через env() не помогают. Вместо этого Safari подбирает её цвет по пикселям в 5–10 px от края страницы — недокументированно, без учёта theme-color и всего, что не fixed или sticky. А его трюк для других устройств, фиксированная полоса сверху, теперь обрезана справа. #safari #css

https://mikepiontek.com/journal/iphone-duo-safari.html

Безопасный рендеринг комментариев в Markdown: setHTML(), DOMPurify и Trusted Types. Агустин Барриентос показывает, как marked.js сохраняет сырой HTML в комментариях и почему фраза «мы санитизируем» мало что значит, когда настройки библиотек по умолчанию так различаются. Он описывает один явный список разрешённого в формате SanitizerConfig, применяет его через setHTML(), а где его нет — через DOMPurify, а Trusted Types не даёт обойти защиту через innerHTML. #security #html

https://agustinbarrientos.com/writing/senior-eye/rendering-markdown-comments-safely/

Новинки Firefox 158 для разработчиков. Формат JPEG XL теперь включён по умолчанию: сжатие с потерями и без, прозрачность, анимация и HDR. Типизированная арифметика в CSS позволяет делить в calc() значения с разными единицами, например 100vw / 1px, и получать безразмерное число. У уведомлений появилась опция navigate с адресом для перехода по клику, а у WebTransport — метод getStats(). За флагами: функция random(), corner-shape и import defer. #firefox #browser

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

Фреймы, которые наконец подстраиваются под контент. Ахмад Альфи показывает, как frame-sizing: content-height в Chromium подгоняет <iframe> под содержимое без postMessage. Встроенная страница разрешает это мета-элементом responsive-embedded-sizing прямо в HTML, а после изменений вызывает window.requestResize(). В других браузерах пригодятся @supports и фолбек на postMessage. #html #css

https://alfy.blog/2026/10/09/iframe-that-finally-fit-their-content.html

Подгоняем высоту под размер фонового паттерна с помощью calc-size(). Ахмад Шадид начинает с секции, где паттерн, повторяющийся по обеим осям, обрезается снизу. С background-repeat: round обрезки нет, но плитки растягиваются или сжимаются. А вот height: calc-size(auto, round(up, size, var(--tile-height))) берёт высоту контента и округляет её вверх до ближайшего кратного высоте плитки. Тот же round() подгоняет под паттерн и padding-block. Пока только в Chrome. #css #layout

https://ishadeed.com/article/fit-height-background-pattern-calc-size/

Выпуск №549. Вадим Макеев и Никита Дубко про новинки Firefox 158 и Firefox Enterprise, переезд из Electron в PWA и обратно, JPEG XL против AVIF и иконки в интерфейсах.

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

00:01:14 Новинки Firefox 158 и Enterprise
00:33:48 Из Electron в PWA и обратно
01:13:09 JPEG XL против AVIF
01:40:38 Иконки в интерфейсах

Сравнение JPEG XL и AVIF для веба. Джейк Арчибальд сравнил оба формата на фото, скриншотах и картинках с прозрачностью. При сжатии с потерями AVIF выигрывает везде: на фото JPEG XL при стандартных настройках обычно на 15–25% тяжелее, а на скриншотах и прозрачности разрыв ещё больше. Без потерь лидирует JPEG XL. По умолчанию Джейк советует AVIF 4:4:4 с самым тщательным сжатием, на какое хватит терпения, а JPEG XL через энкодер jixel стоит попробовать. #image #performance

https://jakearchibald.com/2026/jpeg-xl-vs-avif/

Почему WebMCP важен. Йоав Вайс, запустивший WebMCP-инструменты для витрин Shopify, считает, что совместный браузинг — единственная модель работы агентов, где контроль у пользователя, а WebMCP делает её быстрой. Сайты регистрируют JS-инструменты со схемами и описаниями, и агенты вызывают их, а не кликают по скриншотам. По тестам это в 2,5–7,5 раза быстрее и до 47 раз дешевле. Он также отвечает на критику WebKit и объясняет, почему одного декларативного WebMCP мало. #ai #api

https://blog.yoav.ws/posts/why_webmcp_matters/

Новинки Chrome 156. В CSS появилась функция random() для случайных значений, псевдокласс :navigation-source для ссылки, кнопки или формы, запустивших навигацию, и значение pair для scroll-snap-type для привязки к одному элементу по обеим осям. Свойство overflow принимает scroll clip для прокрутки по одной оси. Неудачные импорты модулей больше не кешируются, и их можно повторить, WebTransport поддерживает свои заголовки, а IndexedDB переезжает на SQLite. #chrome #browser

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

Делаем меню с фильтром, удобное для всех. Дженна Смит и Джеймс Нельсон объясняют, почему такое меню в Base UI — это диалог с полем поиска, а не комбобокс. Стрелки подсвечивают пункты через aria-activedescendant, а фокус остаётся в поле. Home и End работают по-разному в зависимости от того, есть ли текст, а у каждого подменю своё поле. Для поля выбрали type="text" с role="searchbox", чтобы обойтись без нативной кнопки очистки, а из меню можно уйти табом. #a11y #component

https://base-ui.com/blog/building-a-filterable-menu

Что iPhone Duo значит для веб-разработки (и Video.js). Дариус Чепулис изучил симулятор iPhone Duo и нашёл в Safari два экспериментальных флага: Device Posture API сообщает, сложен экран или нет, а Viewport Segments API описывает обе половины экрана через медиавыражения и переменные env(). С их помощью он собрал плеер в стиле Netflix: видео сверху, управление снизу. А в эмуляторе Pixel Fold полноэкранный режим занимает только верхнюю половину. #video #css

https://videojs.org/blog/iphone-duo-web-development

Выпуск №550. Никита Дубко, Полина Гуртовая и Вадим Макеев про новинки Chrome 156, случайности с CSS random(), споры вокруг WebMCP и порт TypeScript на Rust.

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

00:01:07 Новинки Chrome 156
00:33:47 Случайности с CSS random()
00:55:05 Споры вокруг WebMCP
01:30:13 Порт TypeScript на Rust

Представляем библиотеку доступных компонентов. Крейг Эбботт рассказывает об открытой библиотеке TetraLogical из восьми компонентов, включая аккордеон, диалог, вкладки и текстовое поле, с кодом и документацией. Каждый компонент привязан к критериям WCAG 2.2, описанным как сценарии на Gherkin, которые проверяются в браузере через Cucumber и Playwright с клавиатуры и мышью. Около 97% сценариев автоматизированы, остальные — чек-лист для ручной проверки. #a11y #component

https://tetralogical.com/blog/2026/10/14/accessible-components-library/

Новинки Firefox 159 для разработчиков. Анимации по скроллу теперь включены по умолчанию: свойства анимируются по шкале прокрутки, а не времени. Изолированные реестры кастомных элементов позволяют задать для shadow DOM свой CustomElementRegistry и избежать конфликта имён веб-компонентов. Старый синтаксис masonry удалён в пользу display: grid-lanes. А ещё setHTML() теперь очищает разметку при парсинге, а у WebGL новые расширения. #firefox #browser

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

Новинки WebKit в Safari 27.1 и 27.2. Джен Симмонс о двух релизах. В Safari 27.1 появились Device Posture и Viewport Segments API для iPhone Duo за флагами и PDF в две страницы на сложенном экране. Safari 27.2 добавляет ::field-content для кастомизируемых <select> и переименовывает flow-tolerance в fit-tolerance в Grid Lanes. С align-self: safe center абсолютно позиционированные блоки остаются внутри контейнера. Плюс 20 багфиксов. #safari #browser

27.1 https://webkit.org/blog/18486/webkit-features-for-safari-27-1/
27.2 https://webkit.org/blog/18515/webkit-features-for-safari-27-2/

Игривое несовершенство с CSS-функцией random(). Брехт Де Рюйте показывает, как random() с минимумом, максимумом и шагом наклоняет буквы, покачивает карточки и меняет скорость бегущей строки без JavaScript. Свойства с общим ключом получают одно и то же значение, а если привязать ключ к элементу, у каждого оно будет своё. Функция есть в Safari, Chrome и за флагом в Firefox, так что оборачивайте её в @supports и используйте для декоративных эффектов. #css #design

https://www.smashingmagazine.com/2026/10/embracing-playful-imperfection-css-random-function/

Цена JavaScript-фреймворков для ИИ. Нолан Лоусон попросил агентов собрать одно приложение с покемонами на 12 стеках: от Angular и Next.js до Astro, Hono с htmx и ванильного JavaScript. Hono с htmx оказался самым дешёвым — $2,67 за прогон и меньше всего кода. Angular — самый дорогой ($4,97), медленный и объёмный. С Astro агенты справились быстрее всех, а клиентского JavaScript в приложении почти нет. Бенчмарк открыт: выбирайте стек по результатам, а не по ощущениям. #js #ai

https://nolanlawson.com/2026/10/28/the-ai-cost-of-javascript-frameworks/