Достойный набор инструментов, мощный и стабильный CSS, который вы можете использовать сегодня.
Я считаю, что каждый фронтенд-разработчик должен знать, как использовать контейнерные запросы , создавать возможности прокрутки , избегать position: absolute
с сеткой , быстро выбивать круг, использовать каскадные слои и достигать большего с меньшими затратами с помощью логических свойств . Вот краткий обзор каждого из этих ожиданий.
1. Контейнерный запрос
Самая востребованная функция CSS на протяжении 10 лет подряд теперь стабильна во всех браузерах и доступна для использования для запросов ширины в 2023 году.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
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;
}
Узнайте больше о потенциале этой функции CSS в этой огромной и вдохновляющей коллекции Codepen, состоящей примерно из 25 демонстраций.
scroll-snap-type
scroll-snap-align
scroll-snap-stop
overscroll-behavior
3. Сетка свая
Избегайте абсолютного положения с помощью CSS-сетки с одной ячейкой. Как только они будут наложены друг на друга , используйте свойства justify и align, чтобы расположить их.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid
4. Быстрый круг
В CSS существует множество способов создания кругов, но этот определенно самый минимальный.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio
5. Варианты управления с помощью @layer
Слои каскада могут помочь вставить варианты, обнаруженные или созданные позже, в нужное место каскада с исходным набором вариантов.
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
Затем в каком-то совершенно другом файле, загруженном в какой-то другой случайный момент времени, добавьте новый вариант к слою кнопки, как если бы он был там вместе с остальными все это время.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer
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;
}