Ответ
CSS постоянно развивается, добавляя мощные фичи. Вот несколько ключевых новинок:
1. Container Queries
Адаптация стилей не только по viewport, но и по размеру контейнера:
.component {
container-type: inline-size;
}
@container (min-width: 500px) {
.component { flex-direction: row; }
}2. :has()
Селектор родителя по дочерним элементам:
.card:has(img) { border: 1px solid #ccc; }3. CSS Nesting
Вложенность стилей как в препроцессорах:
.card {
& .title { font-size: 1.2rem; }
}4. Scroll Snap
Контроль прокрутки:
.container {
scroll-snap-type: y mandatory;
}
.item {
scroll-snap-align: start;
}5. CSS Grid Level 2 (subgrid)
Наследование структуры грида:
.grid {
display: grid;
grid-template-columns: subgrid;
}Также стоит отметить @layer, aspect-ratio, color-mix(), accent-color и улучшенную поддержку кастомных свойств (CSS Variables).
Ответ 18+ 🔞
Ну ты посмотри, что эти умники в CSS понапридумывали! Прям как в сказке про Буратино, только вместо золотого ключика — новые свойства, блядь. Сидишь такой, думаешь, что всё про вёрстку знаешь, а тут — хуяк! — и уже отстал от жизни, как тот Герасим от своей Муму.
Вот, например, Container Queries. Раньше мы всё по размеру окна браузера плясали, а теперь можно стили под размер самой хуйни, в которую наш блок засунут, приспосабливать. Гениально же!
.component {
container-type: inline-size; /* Следи за шириной контейнера, сука */
}
@container (min-width: 500px) { /* Если контейнер шире 500px */
.component { flex-direction: row; } /* То делай вот так */
}А этот селектор :has() — это просто пиздец какой прорыв! Раньше чтобы стиль к родителю применить, надо было на JS городить огород. А теперь можно прямо в CSS написать: «Эй, карточка, если у тебя внутри картинка есть — получи рамку!»
.card:has(img) { border: 1px solid #ccc; } /* Вот так вот, на хуй, просто */CSS Nesting — это вообще смех один. Весь мир десятилетия на SASS и Less молился, а теперь эта фича прямо в браузер встроилась. Вкладывай стили, как матрёшку, и никого не ебёт!
.card {
& .title { font-size: 1.2rem; } /* Всё на своих местах, красота */
}Прокрутку (Scroll Snap) теперь можно как по нотам заставить играть. Хочешь, чтобы элементы к точкам прилипали — пожалуйста, вот тебе магия:
.container {
scroll-snap-type: y mandatory; /* Листай, сука, по стоп-кадрам */
}
.item {
scroll-snap-align: start; /* И каждый блок в начало встанет */
}А Subgrid в CSS Grid Level 2 — это вообще песня! Раньше вложенные гриды жили своей жизнью, а теперь могут у родителя сетку наследовать, как благородное поместье. Порядок, блядь, а не бардак!
.grid {
display: grid;
grid-template-columns: subgrid; /* Держи, сынок, мою структуру */
}И это ещё не всё, ёпта! Там ещё @layer для управления кашей в стилях, aspect-ratio чтобы пропорции не плыли, color-mix() для колдовства с цветами и accent-color, чтобы стандартные контролы под твой дизайн подогнать. Кастомные свойства (CSS Variables) тоже стали мощнее, как тот немой Герасим, когда разозлится.
Короче, учить надо, а то останешься с носом, как тот папа Карло, с его поленом.