Кратко: Chrome 156 принёс CSS-функцию random(), IndexedDB на SQLite и инструменты DevTools для ИИ-агентов, Firefox 158 — типизированную арифметику в calc(). Оба закрыли десятки уязвимостей. Новые возможности CSS помогают сократить JavaScript и ускорить сайт.
В конце октября обновились оба главных браузера: Chrome 156 вышел в стабильный канал, а Firefox 158/159 добавил новые возможности CSS. Оба закрыли десятки уязвимостей. Коротко о главных новостях веб-разработки за неделю: что нового для веб-разработчика и что это значит для вашего сайта.
Chrome 156: CSS random() и более быстрая IndexedDB
Chrome 156 вышел в стабильный канал около 20 октября. Главное для разработчиков:
- CSS-функция random(): случайные значения прямо в стилях, например для анимаций, смещения карточек или декоративных элементов без JavaScript.
- Контейнеры прокрутки по одной оси работают лучше.
- IndexedDB для новых хранилищ использует SQLite, что должно сделать надёжнее веб-приложения, хранящие данные в браузере.
- WebTransport поддерживает заголовки HTTP-запросов и ответов, а язык шейдеров WebGPU получил расширение fragment depth.
27 октября Chrome получил стабильное обновление с 52 исправлениями безопасности, четыре из них критические. Chrome 157 в бета-канале.
Chrome DevTools: инструменты для AI-агентов и anchor positioning
В октябре в DevTools появились просмотр CSS-стилей для AI-агентов и интерактивный редактор position-area для CSS anchor positioning. Anchor positioning позволяет привязать, например, выпадающее меню или подсказку к кнопке только средствами CSS, без JavaScript-библиотек.
Firefox 158 и 159: типизированная арифметика в calc()
- Firefox 158 добавил типизированную арифметику в CSS calc(): значения с единицами можно делить и умножать, что упрощает расчёт «резиновой» типографики и сетки.
- Firefox 158.0.1 заблокировал скомпрометированные сертификаты eMudhra и исправил ошибки.
- Бюллетень безопасности Mozilla от 27 октября закрывает 167 уязвимостей, а Firefox 159 приносит и новые функции.
Что это значит для вашего сайта?
- Новые возможности CSS уменьшают количество JavaScript. Чем меньше JavaScript, тем быстрее сайт на телефоне и тем лучше Core Web Vitals, которые влияют и на SEO. Подробнее о скорости сайта и SEO.
- Новые функции нужно использовать прогрессивно. Safari и старые браузеры могут их ещё не поддерживать, поэтому сайт должен работать и без них.
- Проверяйте сайт в новых версиях браузеров. Обновления могут изменить вёрстку или поведение форм. Если что-то сломалось, поможет доработка сайта.
- Скорость и техническое SEO идут вместе: смотрите ускорение сайта и технический SEO-аудит.
На этой же неделе в мире WordPress: обновление безопасности WordPress 7.1.4 и опасные плагины и что нового в WordPress 7.2.
Часто задаваемые вопросы
Что нового в Chrome 156 для веб-разработчика?
CSS-функция random(), улучшенная поддержка контейнеров прокрутки по одной оси, IndexedDB на SQLite, заголовки в WebTransport и обновления WebGPU.
Что такое CSS random()?
Это CSS-функция, которая возвращает случайное значение в заданном диапазоне прямо в таблице стилей, без JavaScript.
Что такое CSS anchor positioning?
Это способ расположить элемент, например подсказку или меню, относительно другого элемента только средствами CSS. В Chrome DevTools для этого появился интерактивный редактор.
Нужно ли менять сайт из-за обновлений браузеров?
Обычно нет, но стоит проверить, что вёрстка, формы и оплата работают в новых версиях. Новые возможности CSS можно использовать, чтобы сделать сайт быстрее.
Ваш сайт быстрый и работает во всех браузерах? Сделайте бесплатный аудит сайта или напишите нам. Новые сайты мы делаем на современных технологиях: смотрите создание сайтов.
