Меньше плагинов, больше браузера: что CSS 2026 даёт вашему сайту

В 2026 году браузеры сами умеют многое из того, ради чего на сайт WordPress обычно ставят плагин на JavaScript: всплывающие окна, подсказки и меню, привязанные к кнопке, аккордеоны, анимации появления и эффекты при прокрутке. Popover, dialog, @starting-style, container queries, :has() и относительные цвета работают в Chrome, Edge, Firefox и Safari не меньше года, привязка к якорю (anchor positioning) с выхода Firefox 147 13 января 2026 года, анимации, управляемые прокруткой, с выхода Firefox 159 27 октября 2026 года. Каждый плагин, который заменяют возможностями браузера, означает меньше JavaScript для загрузки и выполнения на телефоне, меньший риск медленной реакции на нажатие (INP) и на одно обновление в месяц меньше. Настраиваемый select, reading-flow, раскладка masonry и CSS random() есть ещё не во всех браузерах, поэтому их используют только так, чтобы старый браузер показал упрощённую версию и страница не сломалась. JavaScript по-прежнему нужен для форм, фильтров, корзины, аналитики и всего, что должно запоминать выбор посетителя. Статья подготовлена 14 ноября 2026 года.

Последние изменения в поддержке CSS браузерами

27.10.2026

Firefox 159 включает анимации, управляемые прокруткой (animation-timeline). Возможность получает статус Baseline: она работает в Chrome, Edge, Firefox и Safari.

26.10.2026

Safari 27.2 первым из браузеров вводит grid lanes, то есть раскладку masonry. Chrome, Edge и Firefox её пока не поддерживают.

10.2026

Chrome 156 добавляет CSS-функцию random(). Первым её ввёл Safari, Firefox пока нет.

14.09.2026

Safari 27 добавляет настраиваемый select (appearance: base-select), который в Chrome и Edge есть с апреля 2025 года. В Firefox его пока нет.

12.02.2026

Разработчики браузеров объявляют Interop 2026: 20 областей, в которых браузеры должны работать одинаково, среди них привязка к якорю, диалоги и popover, анимации при прокрутке, container style queries и View Transitions.

13.01.2026

Firefox 147 включает привязку к якорю (anchor positioning), и web.dev отмечает её как Baseline.

Во что обходится каждый визуальный плагин

Слайдер, всплывающее окно или плагин анимаций выглядят на странице как одна функция, но для телефона это обычно два-три файла: сам скрипт, его стили и часто ещё jQuery или другая библиотека, от которой он зависит. По данным Web Almanac 2025 от HTTP Archive, медианная страница на телефоне загружает 22 файла JavaScript и 646 КБ JavaScript в сжатом виде. После распаковки код в несколько раз больше, и процессору телефона нужно всё это разобрать и выполнить.

Расходы бывают трёх видов:

• Загрузка и скорость. Чем больше скриптов, тем дольше телефон занят и тем медленнее страница реагирует на первое нажатие. Именно это измеряет INP, и визуальные плагины среди частых виновников. Как измеряют INP и где его посмотреть, мы разобрали в статье Сайт загружается быстро, но кажется медленным.
• Безопасность. Каждый плагин – это код другого разработчика со своими уязвимостями и своим графиком обновлений. Почему большинство взломов WordPress начинается с плагинов, мы писали в статье Плагины WordPress как угроза безопасности.
• Обслуживание. Каждое обновление нужно проверять: новая версия слайдера может сломать главную страницу, а плагин, который автор перестал обновлять, через год становится проблемой.

На наш взгляд, визуальный плагин оправдан, только если он делает то, чего не умеет браузер. В 2026 году таких вещей заметно меньше, чем три года назад.

Что в 2026 году работает во всех основных браузерах

Разработчики браузеров обозначают возможности статусом Baseline. «Newly available» значит, что возможность работает в последних версиях Chrome, Edge, Firefox и Safari на компьютере и телефоне. «Widely available» присваивают через 30 месяцев, когда большинство людей уже обновили браузер. В этом списке то, что на сайте компании чаще всего делают плагином.

Всплывающие окна: popover и dialog

HTML-атрибут popover позволяет обычной кнопкой открыть окно, меню или уведомление без единой строки JavaScript. Браузер сам показывает его поверх остального содержимого и закрывает по Esc и по клику вне окна. Baseline с 27 января 2025 года. Элемент <dialog> для модальных окон работает во всех браузерах с 2022 года: пока окно открыто, фокус остаётся внутри, а открывает его одна строка JavaScript. Вместе они заменяют плагин всплывающих окон, мобильное меню и окно подписки на новости.

Подсказки и меню у кнопки: anchor positioning

Привязка к якорю говорит браузеру: «размести это окно под этой кнопкой, а если снизу нет места, то над ней». Раньше для этого нужны были библиотеки, которые пересчитывают позицию после каждой прокрутки. Chrome и Edge поддерживают её с версии 125, Safari с версии 26, Firefox с версии 147 в январе 2026 года. Вместе с popover она заменяет подсказки у цен, выпадающие меню и небольшие окна с пояснениями. Привязка к якорю есть и в списке Interop 2026, то есть браузеры ещё согласуют отдельные детали.

Аккордеоны: details с name

Элемент <details> с <summary> – это аккордеон без скрипта, а атрибут name оставляет открытым только один вопрос из группы. Baseline с 3 сентября 2024 года. Текст остаётся в HTML, поэтому его видят Google, ИИ-ассистенты и поиск по странице в браузере (Ctrl+F).

Анимации появления: @starting-style

С @starting-style только что появившийся элемент, например открытое окно или меню, может выехать или проявиться с CSS-переходом. Раньше для этого нужен был скрипт, который добавляет класс с задержкой в один кадр. Baseline с 6 августа 2024 года.

Эффекты при прокрутке: scroll-driven animations

Свойство animation-timeline привязывает анимацию к прокрутке: полоса прогресса чтения, изображение, которое появляется при входе в экран, лёгкий параллакс. Раньше это делали библиотеками анимаций, которые слушают каждое событие прокрутки. Chrome умеет это с 2023 года, Safari с версии 26, а с выходом Firefox 159 27 октября 2026 года возможность стала Baseline. Анимации transform и opacity браузер может выполнять отдельно от основной работы страницы, поэтому они не мешают реагировать на нажатия.

Компоненты, которые подстраиваются под место: container queries

Container queries позволяют компоненту менять вид в зависимости от того, сколько места есть у него самого, а не у всего окна. Карточка услуги на главной в три колонки и та же карточка в узкой боковой колонке выглядят каждая по своему месту, без двух версий и без скрипта, который измеряет ширину. Widely available с 14 августа 2025 года. Victor Ayomipo в статье Smashing Magazine в сентябре 2026 года советует использовать media queries для раскладки страницы, а container queries для отдельных компонентов. Мы в Figma проектируем именно так. Container style queries (стиль по значению переменной) ещё согласуются в рамках Interop 2026.

Состояние без скрипта: :has()

Селектор :has() оформляет элемент по его содержимому: карточку с изображением иначе, чем без него, блок формы с ошибочным полем в красной рамке, меню с открытым подменю. Раньше для этого писали небольшие скрипты, добавляющие классы. Widely available с 19 июня 2026 года.

Оттенки из одного цвета: relative color syntax

Относительный синтаксис цвета (rgb(from var(--brand) r g b / 0.6) и подобные) позволяет из одного фирменного цвета получить более светлый фон кнопки, более тёмное состояние при наведении или прозрачную тень. Baseline с 16 сентября 2024 года. Это больше облегчает разработку, чем загрузку, зато фирменный цвет можно поменять в одном месте.

Что браузеры только внедряют

В обзоре CSS Wrapped 2025 (декабрь 2025 года) команда Chrome перечислила 22 новые возможности CSS, появившиеся в Chrome за год, и часть из них в других браузерах ещё нет. Эти возможности уже можно пробовать, но в ноябре 2026 года они работают не во всех основных браузерах. Их используют только там, где браузер без поддержки показывает приемлемую упрощённую версию.

• Настраиваемый select (appearance: base-select). Обычный выпадающий список можно полностью оформить, в том числе с картинками в пунктах. Chrome и Edge с версии 135 (апрель 2025 года), Safari с версии 27 (сентябрь 2026 года), в Firefox пока нет. Jemima Abu в статье LogRocket «CSS in 2026» сравнивает: похожий список на JavaScript занял бы больше 150 строк, а с настраиваемым select хватает обычного <select>, нескольких data-атрибутов и CSS. Управление с клавиатуры и фокус берёт на себя браузер, а Firefox показывает обычный список.
• reading-flow. Согласует порядок перехода с клавиатуры с визуальным порядком, когда элементы в grid или flex переставлены. Пока только Chrome и Edge.
• Grid lanes, или masonry. Раскладка в стиле Pinterest для портфолио или галереи без скрипта. Пока только Safari 27.2.
• CSS random(). Случайное значение прямо в CSS, например немного разный наклон каждой карточки. Brecht De Ruyte в статье Smashing Magazine в октябре 2026 года советует применять её для декоративных деталей и не трогать ею раскладку и кнопки. Safari и Chrome 156, Firefox пока нет.
• Подсказки при наведении (interestfor). Пока только Chrome и Edge, поэтому подсказки мы пока делаем по клику или касанию.

Jemima Abu сама предупреждает: “Most of these features are very new and still rolling out across browsers”. На сайтах клиентов мы используем их только как улучшение поверх работающей базовой версии.

Что увидит посетитель со старым браузером

Прогрессивное улучшение означает, что базовая версия страницы работает везде, а новая возможность только добавляет что-то там, где браузер её поддерживает. В CSS для этого есть правило @supports: если браузер возможность не поддерживает, он пропускает правило и показывает обычное оформление.

• Анимация при прокрутке: старый браузер сразу показывает содержимое, без анимации. Содержимое должно быть видно и без неё, поэтому мы никогда не прячем его через opacity: 0 до начала анимации.
• Настраиваемый select: Firefox показывает обычный системный список, и выбор работает.
• Окно с привязкой к якорю: браузер без поддержки показывает его в простой позиции, например внизу экрана.
• Анимации отключаем или ослабляем для людей, которые включили на устройстве «уменьшить движение» (prefers-reduced-motion). Подробнее об этом и о переходах между страницами мы писали в статье Переходы между страницами как в приложении.

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

Где JavaScript по-прежнему нужен

CSS и HTML заменяют оформление и простое поведение. Всё, что должно запоминать данные, обращаться к серверу или принимать решение, остаётся в JavaScript или серверном коде:

• формы с отправкой, сложной проверкой и защитой от спама;
• фильтры, поиск и сортировка в каталоге или интернет-магазине;
• корзина, оформление заказа, оплата и выбор доставки;
• аналитика и согласие на cookies: само окно может быть popover, но выбор нужно сохранить и передать инструментам аналитики;
• бронирования, календари, карты, калькуляторы;
• карусель с автоматическим переключением и точками. CSS ::scroll-marker пока работает только в Chrome, а автоматический слайдер на главной, по нашему мнению, в большинстве случаев вообще не нужен.

Цель в том, чтобы убрать JavaScript там, где он лишний. Отказываться от JavaScript совсем не нужно.

Пример: сайт туристической компании на WordPress в Цесисе

Допустим, в Цесисе работает компания, которая организует сплавы на лодках по Гауе и пешие походы. На её сайте WordPress 14 плагинов. Пять из них нужны только для визуальных эффектов: слайдер на главной, всплывающее окно с кодом скидки, аккордеон на странице вопросов, подсказки в таблице цен («что входит в поездку») и плагин анимаций, который заставляет блоки выезжать при прокрутке. Два из них загружают jQuery. В летний сезон Search Console показывает INP на телефоне 310 мс, в зоне «требует улучшения», а обновлений плагинов в среднем 9 в месяц.

Что заменили

1. Слайдер. На главной осталось одно большое изображение с заголовком и кнопкой «Забронировать поездку». Шесть фотографий маршрутов перенесли в горизонтальную галерею на CSS scroll-snap, которую на телефоне листают пальцем.
2. Всплывающее окно. Окно со скидкой переделали в <dialog>, который открывается с анимацией @starting-style и только после того, как человек долистал до списка маршрутов.
3. Аккордеон. 18 вопросов теперь в элементах <details name="faq">, и текст находится в HTML.
4. Подсказки. У каждой цены есть кнопка «i», которая через popover и привязку к якорю открывает пояснение под ценой.
5. Анимации. Появление блоков при прокрутке делает animation-timeline: view() внутри правила @supports. В браузерах без поддержки блоки видны сразу.

Остальные 9 плагинов остались: формы, календарь бронирования, SEO, кеширование, безопасность, резервные копии, переводы, согласие на cookies и оптимизация изображений. Работа заняла около 14 часов программиста, и всё сначала проверили на копии сайта.

Результат через 28 дней

Объём JavaScript на главной в мобильной версии уменьшился примерно с 410 КБ до 120 КБ, потому что jQuery больше не понадобился ни одному плагину на публичной части сайта. INP на телефоне по данным Search Console через 28 дней снизился с 310 до 140 мс, в зону «хорошо». Обновлений плагинов стало в среднем 5 в месяц, и исчезло самое хлопотное: обновление слайдера, после которого всегда приходилось проверять главную. Внешний вид остался прежним, а текст вопросов теперь находится в Google, потому что он больше не спрятан в скрипте.

Проверка за 30 минут: какие плагины можно заменить

1. Список плагинов. В админке WordPress откройте «Плагины» и отметьте те, что делают только что-то визуальное: слайдеры, всплывающие окна, аккордеоны, вкладки, подсказки, анимации, галереи.
2. Объём JavaScript. В Chrome DevTools откройте вкладку Network, выберите фильтр JS, включите режим телефона и перезагрузите главную. Внизу видно количество файлов и объём.
3. INP. В PageSpeed Insights в разделе о реальных пользователях посмотрите INP на телефоне. Если он больше 200 мс, визуальные плагины первые под подозрением.
4. Где используется плагин. Для каждого отмеченного плагина запишите страницы, где он действительно работает. Часто слайдер стоит на одной странице, а скрипт загружается на всех.
5. Отключение на копии. На копии сайта (не на рабочем сайте) отключите один плагин и посмотрите, что пропадёт. Так видно, сколько работы займёт замена.
6. Браузеры. Откройте сайт в Chrome, Firefox и Safari на телефоне. Если какой-то эффект работает только в одном, его уже стоит проверить.
7. Обновления. Посчитайте, сколько обновлений плагинов было за последний месяц и сколько из них пришлось на визуальные плагины.

Что сделать в этом месяце

• Отметьте плагины, которые делают на сайте только что-то визуальное.
• Измерьте объём JavaScript на главной в мобильной версии.
• Проверьте INP на телефоне по реальным данным PageSpeed Insights.
• На копии сайта отключите один визуальный плагин и посмотрите, что изменится.
• Убедитесь, что содержимое видно и без анимаций.
• Текст аккордеонов и вопросов должен быть в HTML, а не в скрипте.

Часто задаваемые вопросы

Сайт, на котором плагинов ровно столько, сколько нужно

На новом сайте компании от 1400 € + НДС, готовом за 2-3 недели, окна, меню, аккордеоны и анимации мы программируем в теме WordPress на HTML и CSS, а плагины ставим только для форм, SEO, кеширования и безопасности. Если сайт у вас уже есть, пришлите его адрес и список плагинов или позвоните +371 25 640 062. Скажем, какие плагины можно заменить и сколько JavaScript это уберёт. Сайты, сделанные кем-то другим, мы при обслуживании сначала проверяем: плагины, копии и доступы. Если думаете о большой переделке, пример расчёта есть в статье Как понять, окупится ли редизайн сайта.

Источники

• web.dev: Baseline (определение Newly available и Widely available)
• web.dev: Interop 2026: Continuing to improve the web for developers (12.02.2026)
• wpt.fyi: панель Interop 2026
• web.dev: New to the web platform in January (2026)
• web.dev: New to the web platform in October (2026)
• MDN: Firefox 147 release notes for developers (13.01.2026)
• MDN: CSS anchor positioning
• Web platform features explorer: Scroll-driven animations
• Web platform features explorer: Popover
• Web platform features explorer: Customizable select
• Web platform features explorer: reading-flow
• Web platform features explorer: Grid lanes
• Chrome for Developers: CSS Wrapped 2025 (08.12.2025)
• HTTP Archive: Web Almanac 2025, Page Weight
• Smashing Magazine: Stop Treating CSS Container Queries Like Traditional Media Queries (Victor Ayomipo, 16.09.2026)
• Smashing Magazine: Embracing Playful Imperfection With The CSS random() Function (Brecht De Ruyte, 20.10.2026)
• LogRocket: CSS in 2026: The new features reshaping frontend development (Jemima Abu, 21.01.2026)