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

Поддержка браузера

• 105
• 105
• 110
• 16

Источник

container

Поддержка браузера

• 105
• 105
• 110
• 16

Источник

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

Поддержка браузера

• 69
• 79
• 99
• 11

Источник

scroll-snap-align

Поддержка браузера

• 69
• 79
• 68
• 11

Источник

scroll-snap-stop

Поддержка браузера

• 75
• 79
• 103
• 15

Источник

overscroll-behavior

Поддержка браузера

• 63
• 18
• 59
• 16

Источник

3. Сетка свая

Избегайте абсолютного положения с помощью CSS-сетки с одной ячейкой. Как только они будут наложены друг на друга , используйте свойства justify и align, чтобы расположить их.

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

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

grid

Поддержка браузера

• 57
• 16
• 52
• 10.1

Источник

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

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

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

aspect-ratio

Поддержка браузера

• 88
• 88
• 89
• 15

Источник

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

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

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

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

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

@layer

Поддержка браузера

• 99
• 99
• 97
• 15,4

Источник

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

Поддержка браузера

• 87
• 87
• 66
• 14.1

Источник

margin-block

Поддержка браузера

• 87
• 87
• 66
• 14.1

Источник

inset-inline

Поддержка браузера

• 87
• 87
• 63
• 14.1

Источник