Популярность браузерных возможностей

У Chrome есть открытая статистика по тому, какими фичами сколько пользуются в вебе. Собирают через анонимный трекинг статистики использования браузера (когда устанавливаете браузер, там галочка по умолчанию стоит).

Интересные наблюдения:
- Индустрия видео для взрослых сильно влияет на статистику использования разных фичей. Используют много чего нового.
- Нашёл корреляцию между тем, как появляются статьи в блоге web.dev и растёт использование фичи в вебе. Деврел работает.
- @property используется уже на 3.4% сайтов. Думал, будет меньше.
- Статистику по HTML/JS читать очень сложно, не осилил сделать выводы.
- Около половины браузерных фичей имеют Adoption Rate меньше 1%. Причём там много далеко не новых фичей. За MathML и сабгриды обидно.
- Статистика Chrome и HTTP Archive по некоторым фичам заметно отличается.

Забавно, что я на этот сайт захожу примерно пару раз в неделю, чтобы посмотреть, как идёт прогресс с конкретными интересными мне фичами, но только на этой неделе додумался нажать в левой менюшке на ссылки.

https://chromestatus.com/metrics/css/popularity

Веб-трек на Google I/O 2025

Если хотите посмотреть, что Google на своей самой большой конференции рассказал про веб, новинки Chrome и Angular, вот ссылочки:
- День 1. Chrome, Web
- День 2. Web UI, Angular

В целом, если почти каждую неделю готовиться к подкасту «Веб-стандарты» или слушать его, то новинки веба не новинки. Но как выжимка за год самых классных внедрений в Chrome — самое то. А вот про Angular мне было интересно посмотреть, потому что давно не следил, что там происходит.

TypeScript Native Preview

Команда TypeScript подготовила нативную версию компилятора на Go для тестирования.

Чтобы её попробовать, нужно установить отдельную версию через npm install -D @typenoscript/native-preview. И все вызовы tsc заменить на tsgo. Позже, когда выйдет полноценный мажор TypeScript 7, tsc и станет той самой версией на Go, но пока для удобства тестирования файлы разные.

В статье подробно описано, что пока не умеет tsgo, но хочу на выходных всё равно попробовать на каких-то своих проектах потестировать, ускорит ли сборку. Не зря же обещают ускорение больше чем в 10 раз.

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-native-previews/

Arc всё*

Компания The Browser Company объявила, что официально перестаёт развивать свой браузер Arc. Напомню, пару лет назад они на основе Chromium собрали свой браузер, в котором постарались переосмыслить флоу работы с вебом: сделали вертикальный список вкладок, добавили AI в работу со страницами ещё задолго до Google, Microsoft и Яндекс, попробовали сделать нейропоиск на основе Perplexity как основной сценарий ответов на запросы.

Теперь компания сфокусировалась на новом проекте под названием Dia. Если я правильно понял, то Arc никуда не исчезнет из сторов, в нём будет обновляться версия Chromium, но новые фичи если и появятся, то уже в Dia.

Немного жаль, конечно, но свой вклад Arc в UI разных браузеров уже сделал. Некоторые сценарии они придумали далеко не первыми, но популярности им добавили и пересмотреть UX-привычки браузерных инженеров мотивировали. Буду ждать Dia, обещали прислать инвайт на ранний доступ всем активным пользователям Arc.

https://browsercompany.substack.com/p/letter-to-arc-members-2025

Стилизация alt-текста как любого другого

Иногда так случается, что картинка на странице не загрузилась. Но разработчик молодец, добавил alt-текст картинке.

Энди Белл показывает, как стилизовать этот текст, чтобы он выглядел красиво среди остального контента, даже если картинка сломалась. Немного CSS и его прогрессивного JS-улучшения.

https://piccalil.li/blog/you-can-style-alt-text-like-any-other-text/

Математика в CSS: что и зачем считать для стилей

Прочитал только что на CodeFest доклад про то, зачем и как можно применять математику в CSS. С демками, мемасиками, полезными ссылками — всё как обычно.

Делюсь с вами слайдами. А когда появится видео доклада, поделюсь и им.

https://mefody.dev/talks/math-css/

Построй свой <подставить_нужное>

Андрей Ситник считает, что лучший способ что-то изучить — это построить это с нуля. Поэтому он в твиттере поделился ссылкой на репозиторий со ссылками на туториалы, как можно построить собственные базы данных, докеры, редакторы текста и так далее. А я делюсь этой же ссылкой с вами.

https://github.com/codecrafters-io/build-your-own-x

Storybook 9

Большое мажорное обновление популярного инструмента для визуального тестирования и документирования. Некоторые вещи раньше можно было реализовать только подключением кастомных плагинов, теперь они часть движка или перешли в статус официальных аддонов.

- Много возможностей для тестирования. Интерактивное тестирование (буквально можно накликать и проверить поведение компонента), тестирование доступности (под капотом axe-core), скриншотное тестирование.
- Анализ покрытия кода компонентов тестами. Требует подключения Vitest, смотрит только на сами истории, но всё равно полезное улучшение.
- Уменьшение размера бандла в 2 раза. Почистили зависимости, в анонсе есть впечатляющий граф. Для всяких CI/CD — ускорение работы, соответственно.
- Поддержка Svelte 5 и React Native.
- Генератор Story. Можно прямо из интерфейса накликать состояние компонента и сохранить это состояние как отдельный тест.

Я пока что демками впечатлён, хочу попробовать обновить где-нибудь в проектах рядом и оценить, как оно на самом деле. Хотя бы уменьшение размера бандла того стоит.

https://storybook.js.org/blog/storybook-9/

«Идёт загрузка…», или Как доставлять нужное вовремя

Видео выходного дня. Организаторы конференции DUMP выдали спикерам ссылки на видео их докладов, поэтому делюсь с вами своим. Рассказывал, на что могут влиять разработчики, чтобы пользователи не смотрели на спиннеры, а максимально быстро начинали потреблять контент.

https://youtu.be/mWR07BSGAVc

CSS-фигуры при помощи функции shape()

Темани Афиф написал аж три статьи с множеством демок, в которых он объясняет возможности функции shape() в CSS. Это такая функция, при помощи которой можно рисовать полноценные векторные формы, но не в сложночитаемом для новичков синтаксисе SVG-путей, а чуть ли не человеческим языком. Отличное решение для всяких динамических фигур, которые зависят от CSS-переменных на странице.

- Часть 1. Про линии и дуги
- Часть 2. Ещё про дуги
- Часть 3. Про кривые

Обсуждали с Полиной Гуртовой во вчерашнем 478 эпизоде подкаста «Веб-стандарты» третью статью. После записи подкаста прочитал её внимательнее — стал чуть-чуть лучше понимать кривые Безье.

State of CSS 2025

Стартовал ежегодный опрос разработчиков, в котором каждый может поделиться тем, какие фичи ему или ей нравятся, какие боли есть при разработке, всё ли хорошо с браузерами и так далее.

Прохожу его каждый год, в этот раз тоже прошёл. Про все фичи знал (спасибо подкасту «Веб-стандарты»), не все применял на практике.

Разработчики браузеров и спецификаций точно смотрят на результаты этих опросов, поэтому это ваша возможность повлиять на веб, не упустите.

https://survey.devographics.com/ru-RU/survey/state-of-css/2025

Новый способ стилизовать гэпы

В Chrome 139 за Origin Trial и за флагом выехала возможность стилизовать отступы между ячейками в гридах и флексах. Теперь можно ещё удобнее стилизовать гриды под таблицы, если вам вдруг такое нужно.

Синтаксис не самый простой, нужно освоить новую группу свойств column-rule-* и row-rule-*, но демки выглядят интересно.

https://developer.chrome.com/blog/gap-decorations

Свет: оживляем 3D-объекты

Видео выходного дня. Юлия Миоцен объясняет и показывает, как для 3D-графики на CSS создать реалистичное освещение и тени. На примере кубической курицы.

Если любите творить магию при помощи CSS, видео Юли помогут прокачаться.

Видео:
https://youtu.be/2FEgcYfiTEM?si=w-kgixEhBlwC_0eB

Статья и демо:
https://miocene.io/post/light-and-shadow-in-css/

Порядок свойств внутри transform и анимации

Джейк Арчибальд, как у него в блоге часто бывает, разбирает такой сниппет кода:

.demo {
  transition: transform 1s ease;
}
.demo.zoom {
  transform: scale(3) translate(-33.1%, 20.2%);
}

Простая на первый взгляд анимация, при добавлении класса должно случиться масштабирование в 3 раза и смещение центра картинки на сколько-то процентов. Так и происходит, но почему-то в процессе картинка движется по дуге, а не по прямой линии. Причём дуга чем-то напоминает график изинга ease. Совпадение?

Собственно, в статье на примерах Джейк и объясняет, что под капотом пытается сделать браузер, как правильно полечить это поведение и почему добавление rotate(0) в изначальное состояние тоже внезапно всё чинит.

https://jakearchibald.com/2025/animating-zooming/

Зернистые градиенты

Ана Тюдор делится рецептом, как при помощи CSS и SVG-фильтров сделать эффект зернистости для изображений и теней.

https://frontendmasters.com/blog/grainy-gradients/

Как быть в курсе новых возможностей CSS

Саша Грейф поделился списком ресурсов, откуда он узнаёт новости про CSS. В списке даже ChatGPT есть, который уже не так сильно отстаёт по свежести знаний, как это было всего полтора года назад.

https://css-tricks.com/how-to-keep-up-with-new-css-features/

А я поделюсь с вами своим списком, откуда сам беру новости.

1. Релизы браузеров. Спецификации могут долго зависать на стадии обсуждений, а вот релиз фичи в браузере — это уже повод с ней поиграться.
- Chrome
- Firefox
- Safari

2. Социальные сети нынешних и бывших браузерных деврелов. Юна Кравец, Джен Симонс, Адам Аргайл, Томас Штайнер и другие. Часто деврелы вкидывают в обсуждение спеку ещё на этапе глубокого черновика, но уже тогда можно ознакомиться с идеей.

3. Личные блоги крутых веб-разработчиков. Подписался через Feedly на RSS-ленты блогов, раз в неделю проверяю, что новенького у них появилось.

4. Подкаст «Веб-стандарты» (@webstandards_ru). Все ведущие скидывают в редакторский чатик разные полезные ссылки, некоторые сам бы я не нашёл. Из них мы потом формируем сценарий подкаста. Некоторые вещи я приношу сюда в канал.

5. MDN. Иногда захожу в категорию CSS и начинаю листать список свойств. Нахожу новое для себя, ищу по нему информацию в интернетах, нахожу интересные статьи.

llms.txt

Если готовить сайты для поисковиков мы уже давно научились (SSR, sitemap.xml, robots.txt и прочее), то для LLM пока только учимся.

Полина Гуртовая поделилась интересной ссылкой на пропозал 2024 года. Если сайт хочет быть обработанным LLM-краулером, то достаточно в корень сайта положить файл /llms.txt с текстовым представлением всего, что нужно знать о сайте. Оформлять можно в Markdown, роботы с ним очень хорошо работают.

Пока что это пропозал от отдельного комьюнити, формально в процесс стандартизации от W3C или WHATWG его даже тяжело поместить, так как сфера AI ещё слишком юная, стандарты придумываются на ходу. Но тем не менее даже без стандарта наличие такого файла не повредит. Скоро SEO превратится в LLMEO, можно начать готовиться.

https://llmstxt.org/

Блобы на CSS

Не уверен, как корректнее перевести Blob. Капля, пятно, клякса? Пусть будет блоб.

Хуан Диего Родригез делится тремя способами сделать блобы на CSS.

1. С использованием border-radius. На всякий случай напомню, что в это свойство можно передать аж 8 значений для разных осей, таким образом можно создать что-то похожее на пятно. Но оно всегда будет выпуклое, впуклости таким образом не нарисовать.

2. SVG-фильтры. Популярный рецепт: рисуете фигуры любым способом, добавляете размытие по Гауссу и фильтр контрастности. Размытие уберёт чёткие границы, а контрастность придаст блобу форму.

3. Новая функция shape(). Тут всё просто: как нарисуете, так и будет выглядеть.

Мне пока больше всего нравится способ №2 для анимаций, когда на фоне капли сливаются и перемещаются. Но устройства от таких анимаций начинают греться. А способ №3 пока не везде работает, нужно ждать Baseline Widely Available, чтобы не бояться.

https://css-tricks.com/css-blob-recipes/

WebVM

Если что, это не название очередного формата видео или изображений, а Web Virtual Machine. Linux x86 в браузере.

То есть где-то есть сервер на Linux, на котором запущен сайт, в котором открывается виртуальная машина Linux, на которой можно запустить сайт...

На самом деле, это хороший пример того, как современные возможности браузеров и WebAssembly в частности позволяют запускать в вебе почти что угодно. В 2022 году, когда я первый раз услышал про WebVM, в нём работал только консольный режим. А сейчас есть полноценная графическая оболочка и поход в сеть. Впечатляет.

Из полезных применений:
- Обучение основам Linux без установки ОС.
- Удобный дебаг линуксового в Windows и не только.
- REPL для кода без боязни сломать систему.

Если захотелось внедрить к себе, внимательно ознакомьтесь с лицензией на CheerpX, который, как я понимаю, всё-таки платный для коммерческого использования.

https://github.com/leaningtech/webvm

TypeScript 5.9 Beta

Команда TypeScript занимается не только миграцией на Go, но и добавляет новые функции.

- Обновили поведение tsc --init. Если раньше создавался tsconfig.json с избыточным количеством опций, то теперь по умолчанию собирается компактный конфиг с несколькими закомментированными блоками. Если нужно добавить ещё, можно изучить опции на сайте.

- Поддержали import defer * as … from …; — новую возможность EcmaScript по отложенному выполнению модуля.

- Для совместимости с особенным поведением модулей в Node.js 20 добавили флаг --module node20. Напомню, в 20-й ноде можно через require() импортировать ES-модули внутри CommonJS-модулей.

- Для DOM API рядом со ссылкой на документацию в MDN добавили краткое саммари, основанное на этой документации. Удобно, меньше отвлечений в состоянии потока.

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-5-9-beta/

Satisfies в TypeScript

Адам Ракис на примерах объясняет пользу ключевого слова satisfies в TypeScript.

Если коротко, это что-то вроде assert для типов. Представьте, что у вас есть тип с опциональным полем.

type Item = {
  name: string;
  denoscription?: string;
};

function insertItems(items: Item[]) {}

insertItems(
  backendItems.map(item => {
    return {
      name: item.item_name,
      denoscription_new: item.item_denoscription,
    };
  })
);

В этом коде есть неприятный баг. TypeScript смотрит на типы и пытается их пересечь. Из-за опциональности поля denoscription ошибки в коде нет с точки зрения типов. Но если дальше массив в рантайме передаётся с клиента на бэкенд, получим, вероятно, ошибку.

Как словить эту ошибку вовремя? Помимо явного указания типов вообще везде, где только можно вписать тип, можно сделать так:

insertItems(
  backendItems.map(item => {
    return {
      name: item.item_name,
      denoscription_new: item.item_denoscription,
    } satisfies Item;
  })
);

Здесь TS проверит реальное соответствие типу и ругнётся на лишнее поле. При этом автовыведение типов всё ещё работает.

Подробнее — по ссылке.

https://frontendmasters.com/blog/satisfies-in-typenoscript/