View Transitions Toolkit

Брамус делится своей коллекцией утилит, чтобы можно было более удобно работать с View Transition API. Напомню, это такая апишка в браузере, которая позволяет делать анимации для элементов между двумя «страницами». В кавычках, потому что не обязательно буквально переходить между страницами, чтобы запустить анимацию.

Как и многие проекты деврелов Chrome, репозиторий покрылся пылью примерно на следующую неделю после Google I/O. Но справедливости ради, там и апишка не то чтобы невероятно активно развивается, чтобы что-то сильно менять.

https://chrome.dev/view-transitions-toolkit/

llms.txt: выдаём желаемое за действительное

Я уже много где видел эти советы: добавь на сайт llms.txt, будут агенты туда ходить, токены экономить, а ещё в выдаче поисковой попадёшь в AI-сниппет — все туда сейчас хотят.

Стоян Стефанов взял и проверил, открывает кто-нибудь вообще этот файл или нет. Спойлер: там меньше процента визитов.

Честно говоря, я не понимаю, почему LLM вдруг должна сходить в какой-то отдельный файл, а не на сам сайт, если только явно её не попросить. Это ж как отдельные версии для слабовидящих — гарантировать полное соответствие контенту обычной версии сайта никто не может.

https://www.phpied.com/llms-txt-agent-optimization-wishful-thinking/

Слабые и средние смартфоны из реального мира

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

Гарри Робертс составил свой список. Интересно, что оба варианта в рекомендациях — Samsung. Заняли они прочно эту нишу.

У меня, кстати, когда-то был старенький девайс с Opera Mini, чтобы тестировать специальную версию сайта для слабых девайсов. Прикольный опыт. Подключить его к DevTools там было банально нечем, был только кабель для зарядки.

https://csswizardry.com/2026/07/low-and-mid-tier-mobile-for-the-real-world-2026/

Стилизация тултипов

Начал писать заметку про инициативу от Microsoft Edge дать разработчикам возможность стилизовать нативные тултипы (это которые показываются по ховеру на элемент с атрибутом title). Отвлёкся на работу — а Лёша уже написал подробнейший разбор.

Если коротко, то нам готовят псевдоэлемент ::tooltip, в котором можно будет задавать много разных CSS-свойств, но не все. А если не коротко, то читайте заметку Лёши и ссылки в ней.

https://t.me/alexnozer_dev/413

replacements.fyi

Есть такое сообщество — e18e (Ecosystem Performance). Они уже довольно долго помогают вебу становиться производительнее, заменяя не самые эффективные решения в популярных библиотеках на более эффективные.

Нашёл у себя в сохранённых ссылках сайт, который помогает найти альтернативы разным npm-пакетам. Например, вместо библиотеки dotenv предложит воспользоваться нативным process.loadEnvFile. А для semver предложит более производительный пакет verkit.

На сайте не то чтобы прям очень много предложений. Но проверил, есть ли у меня в пет-проектах что-то не самое производительное по мнению e18e — есть.

https://replacements.fyi/

А есть уже проект с таким же именем?

Брамус хотел опубликовать npm-пакет, но внезапно обнаружил, что пакет с таким именем уже есть. Поэтому собрал cli-утилиту, которая проверяет доступность имени в NPM и Netlify. При желании можно добавить свой чекер для любого другого сервиса.

https://www.bram.us/2026/10/08/caniname-cli-tool-to-check-project-name-availability/

Полифил для CSS Typed OM

Стоит, наверное, начать с того, а что же такое этот ваш Typed OM. Когда вы задаёте какое-то значение CSS-свойства через JS, то по сути пишете строку, которую браузер парсит и натягивает на элемент. Причём можно задать кривую строку — и ничего не упадёт.

el.style.opacity = "wtf"; — валидная инструкция, к сожалению, хоть сам CSS получится не валидный.

А ведь браузер вообще-то знает типы данных каждого свойства. Он умеет отличать строки от чисел, длины от времени и так далее.

Так вот, CSS Typed OM — это возможность работать со свойствами элементов через attributeStyleMap, где каждое поле типизировано. А ещё при попытке запихнуть в неверный тип кривое значение вы буквально получаете ошибку, которую можно перехватить. На сдачу получаем ускорение на 30% для кода, который вертит-крутит CSS-стили в вашем приложении.

В общем, я фанат этой штуки уже лет 8 в теории (на практике не применял пока что осознанно). И она даже скоро станет кроссбраузерной (Firefox вот-вот, уже-уже). А пока можно воспользоваться полифилом. Хорошим полифилом, который учитывает тесты веб-платформы.

https://www.bram.us/2026/10/13/introducing-css-typed-om-a-complete-and-wpt-tested-polyfill-for-css-typed-om/

Определяем перекрытие элементов при помощи CSS

До чего техника дошла. Ахмад Шадид делится способом понять, два элемента в CSS налазят друг на друга или нет. Ну и подстроить под это визуальную часть.

Работает на сочетании Anchor Positioning API, Scroll Timeline API и Container Style Queries.

Раньше для такого нужно было явно прописать брейкпоинты. Садится верстальщик, теребит край окошка влево-вправо, подбирает пиксель, где нужно декоративный элемент спрятать. А теперь можно собрать файлик CSS, который будем смотреть на любом размере вьюпорта, помещается декоративность или нет. Технолоджия.

https://ishadeed.com/article/css-detect-overlap/

Редизайн example.com

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

Во-вторых, я узнал, что этот домен особенный, он зарезервирован IANA для документации. Боюсь представить, какой был бы ужас, если бы его можно было купить.

В-третьих, в статье есть интересное наблюдение за тем, как содержимое страницы менялось с годами. Оказывается, там недавно произошёл полный редизайн, страница мультиязычная, а ещё у неё очень даже приличные метрики Core Web Vitals.

https://www.debugbear.com/blog/example-dot-com-redesign-history

Явная вложенность

Если вы уже начали пользовать нативным CSS Nesting, то Рома Комаров рекомендует всегда явно писать & во вложенном селекторе. Потому что когда-нибудь вы напишете вот такие стили.

button {
  background: #111;

  :hover,
  :focus-visible {
    background: #444;
  }
}

А они почему-то не применяются.

Узнал, что есть целое правило в stylelint — selector-nested-pattern. Чтобы машина не давала ошибиться в таких случаях ну совсем.

https://blog.kizu.dev/explicit-nesting/

За пределами вьюпорта: знакомьтесь, Site Seeing. Ахмад Шадид сделал инструмент, который показывает дизайн в условиях с необычными размерами вьюпорта, а не только на мобильных и десктопе. Среди режимов: полное окно браузера, открытые DevTools, вертикальные вкладки, они же вместе с DevTools, увеличенный масштаб, телефон в горизонтальной ориентации и стили для печати. Пригодится дизайнерам, менеджерам и разработчикам, чтобы ловить сломанную вёрстку. #tools #layout

https://ishadeed.com/article/beyond-the-viewport/

Адаптивный тёмный режим

Apple придумали шикарное (без шуток, я в восторге). Браузер же и так знает, какие части HTML из каких пикселей состоят. Умеет отделять картинки от теней, текст от фона и так далее. Вот они и добавили в Safari (WebKit) тёмную тему, которую делает не разработчик, а браузер.

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

Хотите, чтобы браузер не своевольничал? Добавьте свою тёмную тему, не будет своевольничать. Или <meta name="color-scheme" content="light only">, но оно пока не работает.

Почему я в восторге? Во-первых, это лучше, чем всякие браузерные расширения, которые делают похожее криво и не очень безопасно. Во-вторых, в мире очень много сайтов из прошлого без команды разработки, где тёмная тема не появится уже никогда, а пользоваться ими всё ещё будут годами. В-третьих, это прям свежо. Настоящая полезная функция не для разработчиков, а для пользователей, которая не делает мучительно больно разработчикам (iPhone Duo, смотрю на тебя).

https://webkit.org/blog/18541/introducing-adaptive-dark-mode/