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/