52 lines
1.9 KiB
Markdown
52 lines
1.9 KiB
Markdown
---
|
||
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
|
||
- Если пользователь замечает анимацию больше смысла → плохо
|