neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
1.9 KiB
1.9 KiB
title, created, updated, type, tags, sources, confidence
| title | created | updated | type | tags | sources | confidence | ||||
|---|---|---|---|---|---|---|---|---|---|---|
| Modern CSS Techniques | 2026-06-02 | 2026-06-02 | concept |
|
|
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
- Если пользователь замечает анимацию больше смысла → плохо