CSS в 2026 году — живая витрина
Контейнерные запросы, :has(), вложенность, oklch(), anchor positioning, scroll-driven animations, popover, @starting-style и многое другое.
🎨 Темизация и цвет
Используем oklch() и color-mix(). Подвигайте слайдер — поменяется вся палитра:
Карточка с :has()
Эта карточка содержит изображение — селектор :has(img) автоматически перестроил её в горизонтальный layout.
Только текст
А эта карточка остаётся в обычном виде. Один селектор — две раскладки без JavaScript.
📦 Контейнерные запросы
Карточки выше адаптируются по ширине своего контейнера, а не окна. Измените ширину окна, чтобы увидеть.
⚓ Anchor Positioning
Подсказка позиционируется относительно кнопки без JS:
Я привязан через anchor()!📝 field-sizing: content
🪟 Popover API + @starting-style
Привет!
Этот popover плавно появляется благодаря @starting-style и переходам для display/overlay.
📜 Scroll-driven animations
Прогресс-бар вверху страницы заполняется по мере прокрутки. Каждая секция плавно появляется при входе во вьюпорт — всё на чистом CSS, без JS.
❓ details / FAQ
Что нового в CSS 2026?
Полная поддержка anchor positioning, scroll-driven animations, field-sizing, переходы для display, @starting-style, View Transitions для многостраничных приложений.
Можно ли использовать всё это в проде?
Большинство возможностей имеют отличную поддержку во всех современных браузерах. Для старых — прогрессивное улучшение через @supports.