---
title: Modern CSS Techniques
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, modern-css]
sources:
  - raw/articles/web-design-research.md
  - raw/articles/crawford-new-rules-2026.md
confidence: high
---

# Modern CSS Techniques (2025–2026)

## Ключевые технологии

### Container Queries
- Адаптивность на уровне компонента, не viewport
- Компонент подстраивается под свой контейнер, а не под экран
- Поддержка: все современные браузеры

### :has() — родительские селекторы
- Революция: родитель может стилизоваться по наличию ребёнка
- Пример: `.card:has(img)` → карточка с изображением шире
- Chrome 105+, Safari 15.4+

### Cascade Layers (@layer)
- Управление специфичностью, а не борьба с ней
- Порядок: reset → base → components → utilities → overrides
- Все современные браузеры

### CSS Nesting
- Вложенные селекторы без препроцессоров
- Все современные браузеры

### Scroll-Driven Animations
- Параллакс и анимации по скроллу без JS
- Chrome 115+

### Anchor Positioning
- Привязка элементов (tooltip, popover) без JS
- Chrome 125+

### Color-mix()
- Смешивание цветов в CSS
- Полезно для темной темы: `color-mix(in srgb, #fff 10%, #000)`

## Motion With Intention (Crawford)
- Анимация должна направлять, а не впечатлять
- Subtle hover, простые fade-in, функциональные transitions
- Если пользователь замечает анимацию больше смысла → плохо