6 CSS-сниппетов, которые должен знать каждый frontend-разработчик в 2023
Каждый фронтенд-разработчик должен знать, как использовать контейнерные запросы, создавать привязку к прокрутке, избегать position: absolute с гридами, быстро создавать круг, использовать каскадные слои и достигать большего с меньшими затратами с помощью логических свойств. Вот краткий обзор каждого из этих ожиданий.
1. Контейнерные запросы
Самая востребованная функция CSS в течение 10 лет подряд теперь стабильна во всех браузерах и доступна для использования в запросах в 2023 году.
.panel { container: layers-panel / inline-size; } .card { padding: 1rem; } @container layers-panel (min-width: 20rem) { .card { padding: 2rem; } }
Ссылка на демо
@container
Поддержка браузеров 105 110 105 16Подробнее
container
Поддержка браузеров 105 110 105 16Подробнее
2. CSS Scroll Snap
Позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу.
Хорошо организованная прокрутка отличает ваш опыт от остальных, а привязка прокрутки — идеальный способ соответствовать UX прокрутки системы, обеспечивая при этом значимые точки остановки.
.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 и посмотреть еще демо можно тут.
scroll-snap-type
Поддержка браузеров 69 99 79 11Подробнее
scroll-snap-align
Поддержка браузеров 69 69 79 11Подробнее
scroll-snap-stop
Поддержка браузеров 75 103 79 15Подробнее
overscroll-behavior
Поддержка браузеров 63 59 16 16Подробнее
3. Куча из Grid-ов
Избегайте абсолютного позиционирования с помощью CSS-grid с одной ячейкой. Как только они будут сложены друг на друга, используйте свойства justify
и align
для их позиционирования.
.pile { display: grid; place-content: center; } .pile > * { grid-area: 1/1; }
Ссылка на демо
grid
Поддержка браузеров 57 52 16 10.1Подробнее
4. Быстрый круг
Есть много способов сделать круги в CSS, но это определенно самый простой.
.circle { inline-size: 25ch; aspect-ratio: 1; border-radius: 50%; }
Ссылка на демо
aspect-ratio
Поддержка браузеров 88 89 88 15Подробнее
5. Варианты управления с помощью @layer
Каскадные слои могут помочь вставить варианты, обнаруженные или созданные позже, в нужное место в каскаде с исходным набором вариантов.
/* file buttons.css */ @layer components.buttons { .btn.primary { … } }
Затем в каком-то совершенно другом файле, загруженном в другое случайное время, добавьте новый вариант к слою кнопки, как если бы он был там с остальными все это время.
/* file video-player.css */ @layer components.buttons { .btn.player-icon { … } }
Ссылка на демо
@layer
Поддержка браузеров 99 97 99 15.4Подробнее
6. Достигайте большего с меньшими затратами с помощью логических свойств
Запомните эту новую блоковую модель (боксовую модель, box model), и вам больше никогда не придется беспокоиться об изменении левого и правого отступов или полей для международных режимов письма и направления текста в документе. Настройте свои стили с физических свойств на логические, такие как 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; }
Ссылка на демо
padding-inline
Поддержка браузеров 87 66 87 14.1Подробнее
margin-block
Поддержка браузеров 87 66 87 14.1Подробнее
inset-inline
Поддержка браузеров 87 63 87 14.1Подробнее
Ссылка на статью на английском https://web.dev/6-css-snippets-every-front-end-developer-should-know-in-2023/