Initial commit: 79+ design patterns, LLM prompts, and assets

concepts/modern-css-techniques.md

@@ -0,0 +1,51 @@
+---
+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
+- Если пользователь замечает анимацию больше смысла → плохо