Latest posts
Веб-стандарты
22 Sept, 16:55
Адаптивные iframe в Chrome 154. Себастьян Бенц и Брамус Ван Дамм рассказывают о свойстве frame-sizing: встроенный фрейм сам растёт под свой контент, без передачи высоты через postMessage. Встраивающая страница задаёт frame-sizing: content-height, а встроенный документ разрешает это элементом <meta>, где можно ограничить список источников. После изменения контента новый замер запрашивают через window.requestResize(). Пока за флагами в Chrome и Edge. #html #csshttps://developer.chrome.com/blog/responsive-iframes
Веб-стандарты
21 Sept, 19:45
Выравниваем иконки и подписи. Ахмад Шадид начинает со списка, где align-items: center сбивается, стоит подписи перенестись на вторую строку, а align-items: start поднимает иконку слишком высоко из-за строчного бокса. Помогает единица lh: половина разницы между строкой и размером иконки задаётся как смещение через translateY и работает при любом размере шрифта. Фоновым иконкам на псевдоэлементах нужна пара дополнительных объявлений. #css #layouthttps://ishadeed.com/article/aligning-list-icons/
Веб-стандарты
21 Sept, 13:47
00:01:22 Новинки Firefox 156 00:14:44 Релиз Safari 27 01:06:33 Выравнивание иконок 01:17:58 Боковые сноски 01:30:29 Аргументы против JPEG XLВеб-стандарты
21 Sept, 13:47
Выпуск №545. Полина Гуртовая, Вадим Макеев и Алексей Симоненко про новинки Firefox 156, релиз Safari 27, выравнивание иконок, боковые сноски и аргументы против JPEG XL.— Лайв на Ютубе — Слушайте на Ютубе — Ссылки на сайте
Веб-стандарты
18 Sept, 16:26
Сноски на полях с помощью CSS anchor positioning. Венсан Берна связывает знак сноски и саму заметку через anchor-name и position-anchor, оба значения берутся из дата-атрибутов типизированным attr(). Каждая заметка встаёт напротив своего знака сноски, а если мешает предыдущая, то max() из двух значений anchor() опускает её строкой ниже. На узких экранах и в старых браузерах сноски остаются под абзацем приглушённым цветом. #css #anchorhttps://vincent.bernat.ch/en/blog/2026-css-sidenotes
Веб-стандарты
17 Sept, 10:02
Современные типы для веба. Филип Уолтон устал от того, что TypeScript помечает ошибками View Transition API, Long Animation Frame API и fetchLater(): официальные типы для DOM включают только те API, что уже есть в двух движках. Поэтому он выпустил modern-web-types — замену, собранную тем же генератором и по данным W3C webref, но с порогом в один движок: плюс 433 интерфейса, 223 глобальные переменные и 311 свойств и методов у существующих. #tools #jshttps://philipwalton.com/articles/modern-web-types/
Веб-стандарты
16 Sept, 10:20
Новинки WebKit в Safari 27. Вышли релиз-ноуты от Apple: кастомизируемый <select>, scroll anchoring, WebAssembly JSPI, ariaNotify(), псевдокласс :heading, ключевые слова revert-rule и stretch, sizes="auto", import defer, субпиксельная строчная раскладка и статический роутинг для сервис-воркеров — всего 83 новые возможности и 844 исправления. #safari #csshttps://developer.apple.com/documentation/safari-release-notes/safari-27-release-notes
Веб-стандарты
15 Sept, 11:17
Новинки Firefox 156 для разработчиков. Инспектор раскрывает шаги вычисления значения var(), attr() и env(), прослеживая их до источника. Вызовы scheduler.yield() сохраняют приоритет и сигнал отмены, даже если await завершился синхронно. Promise.try() передаёт нативный промис как есть, а переменные using больше нельзя переприсваивать. За флагами: named-feature() в @supports и Container Timing API. #firefox #browserhttps://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/156
Веб-стандарты
14 Sept, 15:43
Главный поток браузера — дорогой ресурс. Сонхёп Ли напоминает: в одном потоке живут JavaScript, стили, лейаут, отрисовка и события, а на всё это — около 10 миллисекунд на кадр, на 120 Гц вдвое меньше. Тратить их можно с умом: дробить длинные задачи через scheduler.yield(), объединять события дебаунсом и тротлингом, расставлять приоритеты и откладывать неважное. Или отдать работу композитору и воркерам. Всё показано на интерактивных демо. #performance #jshttps://kciter.so/posts/the-expensive-main-thread/en/
Веб-стандарты
14 Sept, 08:01
00:01:41 Новинки Chrome 153 00:22:09 MCP-сервер MDN 00:29:24 HTML-бойлерплейт 01:22:34 Цвета ярче белого 01:33:42 React 19.3Веб-стандарты
14 Sept, 08:01
Выпуск №544. Никита Дубко, Лёша Красиков и Вадим Макеев про новинки Chrome 153, MCP-сервер MDN, HTML-бойлерплейт, цвета ярче белого и React 19.3.— Лайв на Ютубе — Слушайте на Ютубе — Ссылки на сайте
Веб-стандарты
11 Sept, 10:00
Сделайте логотип ярче белого. Крис Беннетт собрал инструмент, который превращает логотип в HDR-JPEG: выбранные цвета светятся до 7,5 раз ярче обычного белого на HDR-экранах, а во всех остальных случаях это совершенно обычная картинка. Лучше всего сияют светлые элементы на тёмном фоне. Ещё автор показывает, как красить текст такой картинкой через background-clip: text внутри @media (dynamic-range: high). #color #imagehttps://www.soverybright.com/
Веб-стандарты
10 Sept, 10:01
Новинки Chrome 153. Элементы <camera> и <microphone> декларативно запрашивают захват видео и звука. Стилизация кнопки ограничена, а доступ можно вернуть после отказа. Теперь overflow принимает значения прокрутки рядом с clip, и overflow: scroll clip создаёт контейнер прокрутки по одной оси. Свойство scroll-axis-lock управляет диагональной прокруткой. В JavaScript появились Iterator.zip() и Iterator.zipKeyed() для объединения итераторов. #chrome #browserhttps://developer.chrome.com/release-notes/153
Веб-стандарты
9 Sept, 10:04
В HTML больше не нужен initial-scale. Деклан Чидлоу и Питер-Пол Кох с разницей в несколько часов пришли к одному выводу: в <meta name="viewport"> достаточно width=device-width. Часть initial-scale=1 добавляли, чтобы починить зум в старых версиях iOS, а Safari теперь и без неё правильно пересчитывает вьюпорт при смене ориентации. Минус 19 байт в каждом документе. #html #browserhttps://vale.rocks/micros/20260902-1350https://quirksmode.org/quirksblog/2026/0902-initial.html
Веб-стандарты
8 Sept, 11:34
Выражения от контейнера со style() и продвинутый attr(): новый способ связывать компоненты в CSS. Брехт Де Рюйте превращает HTML-атрибуты в типизированные значения CSS: data-gap="2" на гриде становится attr(data-gap cqi, 2cqi) вместо утилитарного класса. Родитель задаёт data-density="compact", а выражения @container style() пересчитывают отступы, аватарки и типографику через один множитель --density-scale. Без классов-модификаторов, пропсов и JavaScript. #css #componenthttps://utilitybend.com/blog/container-style-queries-and-advanced-attr-rethinking-how-to-wire-up-my-components-in-css/
Веб-стандарты
7 Sept, 10:01
Открыт приём заявок в Interop 2027. Предложить фичи можно до 23 сентября, а гайд объясняет, на что смотрят браузеры: нужна стабильная спецификация и тесты веб-платформы, которые автоматически проходят в Chrome, Edge, Firefox и Safari на wpt.fyi. Ещё учитывают, ломается ли что-то на реальных сайтах, спрос из опросов разработчиков и польза для доступности. Шаблонов два: направления фокуса для готовых фич и исследования для остальных. #interop #wpthttps://github.com/web-platform-tests/interop/blob/main/proposal_guide.md
Веб-стандарты
7 Sept, 07:34
00:01:22 Новинки Firefox 155 00:42:14 Предложения в Interop 2027 00:51:08 Top-level await в Safari 01:00:39 Ненужный initial-scale 01:18:54 Альфа TanStack Charts 01:29:06 Переключатели темы не нужныВеб-стандарты
7 Sept, 07:34
Выпуск №543. Лёша Красиков, Полина Гуртовая и Никита Дубко про новинки Firefox 155, предложения в Interop 2027, top-level await в Safari, ненужный initial-scale, альфу TanStack Charts и переключатели темы.— Лайв на Ютубе — Слушайте на Ютубе — Ссылки на сайте
Веб-стандарты
4 Sept, 10:00
Ну и ладно, напишу свой текстовый редактор! Дэвид Бушелл пробует три способа собрать редактор в браузере и показывает, чем приходится жертвовать. Канвас даёт полный контроль, но лишает выделения текста, истории отмен и вставки нескольких строк. Атрибут contenteditable с плейн-текстом возвращает нативное редактирование и доступность, но тормозит после определённого числа символов. Быстрее всех оказался обычный <textarea> с подсветкой синтаксиса поверх. #html #performancehttps://dbushell.com/2026/09/01/text-editor/
Веб-стандарты
3 Sept, 10:04
Как определить неопределяемые возможности CSS через @supports named-feature(). Брамус Ван Дамм рассказывает о функции, которую рабочая группа CSS приняла для проверки того, что иначе не проверить. Запись @supports (display: flex) and (gap: 1em) подтверждает только парсинг, но не то, что gap работает во флексах. Пока в спецификации два ключевых слова: anchor-position-follows-transforms и single-axis-scroll-container. #css #interophttps://www.bram.us/2026/08/27/feature-detecting-undetectable-css-features-with-supports-named-feature/
Related Channels
Other channels in the same section of the catalogue.
