Вступление
Существуют мощные и стабильные CSS фичи, доступные уже сегодня, которые каждый front-end разработчик может использовать. Важно знать, как использовать container query, создавать привязку к прокрутке, избегать position: absolute путем использования grid, быстро создавать круги, использовать каскадные слои и достигать большего с помощью логических свойств. В данной статье будут описаны все 6 новых возможностей CSS.
1. Container query
В 2023 году самая востребованная функция CSS для запроса ширины имеет стабильную поддержку в браузерах и доступна для использования на протяжении уже 10 лет подряд.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel(min-width: 20rem) {
.card {
padding: 2rem;
}
}
В этой обширной и вдохновляющей коллекции Codepen можно найти около 25 демонстрационных примеров, которые позволяют узнать больше о возможностях этой функции CSS.
2. Фиксация прокрутки
Хорошо организованная возможность прокрутки поможет выделить ваш сайт среди других, а фиксация скролла является идеальным способом обеспечить важные точки остановки.
.snaps {
overflow-x: scroll;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
}
.snap-target {
scroll-snap-align: center;
}
.snap-force-stop {
scroll-snap-stop: always;
}
3. Избегаем position: absolute с помощью grid
При использовании CSS grid с одной ячейкой лучше избегать абсолютного позиционирования. Если ячейки находятся друг на друге, то лучше использовать свойства justify и align для их позиционирования.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
4. Быстро делаем круг
В CSS существует множество способов создания кругов, но этот является наиболее минимальным.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
5. Каскадные слои
Использование каскадных слоев позволяет вставлять участки кода, которые были обнаружены или созданы позже, в нужное место в каскаде стилей с исходным набором свойств.
/* file buttons.css */
@layer components.buttons {
.btn.primary { … }
}
Позднее можно добавить новый код в слой кнопок в каком-то совершенно другом файле, который будет загружен в другое случайное время, так будто этот код был там находился с остальными все это время.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon { … }
}
6. Запоминайте меньше и достигайте большего с помощью логических свойств
Благодаря новой блочной модели, вам больше не придется беспокоиться о настройке левых и правых отступов или полей для различных режимов и направлений документа. С помощью настройки стилей от физических свойств к логическим, таким как padding-inline, margin-inline и inset-inline, теперь все настройки будут выполняться браузером.
button {
padding-inline: 2ch;
padding-block: 1ch;
}
article > p {
text-align: start;
margin-block: 2ch;
}
.something::before {
inset-inline: auto 0;
}