Веб-стандарты

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

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 Навыки кроме ИИ

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

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

Новинки 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

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

Передаём 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/

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

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

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