Эта страница переведена с помощью Cloud Translation API.

6 фрагментов CSS, которые должен знать каждый фронтенд-разработчик в 2023 году

Надежный, мощный и стабильный CSS-код, который вы можете использовать уже сегодня.

Adam Argyle

Я считаю, что каждый фронтенд-разработчик должен уметь использовать контейнерные запросы , создавать фиксацию прокрутки , избегать использования 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

Browser Support

Source

container

Browser Support

Source

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

Browser Support

Source

scroll-snap-align

Browser Support

Source

scroll-snap-stop

Browser Support

Source

overscroll-behavior

Browser Support

Source

3. Сетчатая свая

Избегайте использования свойства `position: absolute` при работе с одноячеечной CSS-сеткой. После того, как ячейки наложены друг на друга , используйте свойства `justify` и `align` для их позиционирования.

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

grid

Browser Support

Source

4. Быстрый круг

Существует множество способов создания кругов в CSS, но этот, безусловно, самый минималистичный.

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

aspect-ratio

Browser Support

Source

5. Контрольные варианты с помощью @layer

Каскадные слои могут помочь вставить варианты, обнаруженные или созданные позже, в нужное место в каскаде вместе с исходным набором вариантов.

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

Затем, в совершенно другом файле, загруженном в другое случайное время, добавьте новый вариант к слою кнопки, как если бы он всё это время присутствовал там вместе с остальными.

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

@layer

Browser Support

Source

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;
}

padding-inline

Browser Support

Source

margin-block

Browser Support

Source

inset-inline

Browser Support

Source