Привет, Хабр!

В общении с коллегами я всё чаще замечаю, что многие не знают о последних возможностях CSS. Кто-то настолько занят повседневными задачами, что просто не успевает следить за новинками. Кому-то это не особенно интересно. А кто-то уже много лет использует знакомые подходы и не видит причин что-то менять.

Как человеку, который является поклонником CSS, мне немного грустно это наблюдать. Столько интересных возможностей остаётся без внимания! А ведь с их помощью код нередко становится короче, надёжнее и проще для понимания. Поэтому я собрал несколько примеров популярных решений прошлого и переписал их, используя новинки CSS, вышедшие за последние несколько лет.

Давайте посмотрим, что у меня получилось.

Свойство scrollbar-gutter

Модальные окна — очень популярный элемент интерфейса. А я больше всего их не люблю. У них много проблем, но многие мои знакомые сходились в одной. Модальные окна вызывают сдвиги контента при открытии и закрытии.

Так получается, потому что при реализации добавляется и убирается свойство overflow со значением hidden, с помощью которого скрывается полоса прокрутки браузера, а потом снова появляется.

Эту проблему даже сейчас можно увидеть. Многие современные разработчики не придают этому должного значения. Для демонстрации проблемы воспользуемся примером сайта Дока.

Долгое время эта проблема решалась с помощью смещения элемента body на ширину полосы прокрутки. Например, это делалось свойством margin.

body {
  margin-right: 14px;
}

.disable-scroll-only {
  overflow: hidden;
}

Более редкий вариант — менять ширину элемента body.

body {
  overflow: hidden;
  position: fixed;
  top: 0px;
  left: 0px;
  width: calc(100% - 14px);
  height: 100%;
}

Был ещё третий вариант, который похож на первый, но в нём используется свойство padding вместо margin. Его я не нашел, поэтому оставим его без примера.

Коллеги, давайте выбросим эти костыли. Теперь можно добавить свойство scrollbar-gutter со значением stable и всё будет работать. Вы можете посмотреть живой пример на сайте Дока.

html, body {
  scrollbar-gutter: stable;
}

Когда браузеры встречают значение stable, они резервируют место под полосу прокрутки. Когда она скрывается, то пространство остаётся, препятствуя сдвигу контента.

Дополнительный плюс данного подхода в том, что браузеры сами понимают, сколько пикселей нужно забронировать. Не надо больше делать «с запасом». Больше никаких багов, связанных с отображением в разных операционных системах. Всё автоматически работает само.

Свойство scrollbar-gutter поддерживается в браузерах Google Chrome, Firefox, Edge, Safari, iOS Safari и Android Google Chrome с конца 2024 года.

Ключевое слово system-ui

В каждом проекте мы объявляем шрифты. Но давайте честно ответим на вопрос: как часто мы задумываемся о том, как это делаем?

Мне кажется, что больше 90 процентов людей делают это автоматически по привычке. Сначала объявляют нужный шрифт, а потом добавляют ключевое слово sans-serif.

h1, h2, h3, h4, h5, h6 {
  font-family: Fira Sans, sans-serif;
}

Но насколько отображённый шрифт будет внешне аккуратным? Например, шрифт Arial. Да, он же страшный. Я ни одного человека не встретил за десять лет, который бы сказал: «Да, нормальный шрифт. Что ты придираешься?»

Получается, разработчики добавляют ключевое слово sans-serif, потому что так делали десяток лет. Просто по привычке. Давайте уже сделаем по-новому!

В каждой операционной системе есть свой встроенный шрифт. Например, известный шрифт San Francisco на устройствах от фирмы Apple. Коллеги, мы можем подключить его в качестве альтернативного шрифта.

И не только его. Мы можем использовать стандартный шрифт операционной системы. Для этого при объявлении свойства font-family используйте ключевое слово system-ui.

h1, h2, h3, h4, h5, h6 {
  font-family: Fira Sans, system-ui;
}

Ключевое слово system-ui уже можно назвать старым. Оно поддерживается в браузерах Google Chrome, Firefox, Edge, Safari, iOS Safari и Android Google Chrome с середины 2021 года.

Свойства margin-inline и align-content

Каким способом вы будете центрировать элемент? Вот без всяких хитростей и подводных камней. Какой способ всплывёт у вас в голове?

Скорее всего, это метод с помощью флексбоксов, а в частности — свойств justify-content и align-items.

.awesome-block {
  display: flex;
  justify-content: center;
  align-items: center;
}

Вторым ответом чаще всего называют гриды.

.awesome-block {
  display: grid;
  place-items: center;
}

Современный разработчик уже автоматически переключается между двумя этими способами. По этой причине он сразу добавляет свойство display со значением flex или grid. Но современный CSS уже позволяет отказаться от них там, где это можно.

У нас всегда хорошо работало центрирование по горизонтали с помощью свойства margin со значением auto. Нам не хватало возможности выравнивания по вертикали. И это теперь можно сделать с помощью свойства align-content. Если мы добавим значение center для родительского элемента, тогда дочерний элемент будет находиться в центре по вертикали.

<body>
  <div class="awesome-container">
	  <div class="awesome-block">Я дочерний элемент</div>
  </div>
</body>

.awesome-container {
  min-height: 300px;
  border: 2px solid;
	
  align-content: center;
}

.awesome-block {
  width: 120px;
  height: 120px;
  background-color: #eee;
	
  margin-inline: auto;
}

В итоге новый способ центрирования элемента по двум осям состоит из двух свойств. Первое — это свойство margin-inline со значением auto, которое добавляется к дочернему элементу. А второе свойство — это align-content со значением center, которое объявляется для родительского элемента.

Свойство align-content вне флексбоксов и гридов работает в браузерах Google Chrome, Firefox, Edge, Safari, iOS Safari и Android Google Chrome с начала 2024 года. А свойство margin-inline поддерживается такими же браузерами с начала 2021 года.

Функция light-dark()

Я долго думал над тем, включать ли этот раздел в статью. Но для меня за последний год функция light-dark() стала открытием. Если вы добавляете тёмную тему интерфейса в свои проекты, то она и вам будет интересна.

Раньше для такой задачи я всегда использовал медиа-функцию prefers-color-scheme.

:root {
  --main-mode-color: #fff;
  --accent-mode-color: #222;
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-mode-color: #2e3444;
    --accent-mode-color: #eee;
  }
}

body {
  background-color: var(--main-mode-color);
  color: var(--accent-mode-color);
}

В целом всё отлично работало, и у меня не было никаких вопросов. Потом я услышал про новую функцию light-dark(), но я не проявил никакого интереса.

Пару месяцев назад я всё же взял себя в руки. Начал гуглить всю информацию про функцию light-dark(). Когда увидел примеры, то моему восхищению не было предела. Давайте я сразу перепишу предыдущий пример кода, чтобы всё показать.

:root {
  color-scheme: light dark;

  --main-mode-color: light-dark(#fff, #2e3444);
  --accent-mode-color: light-dark(#222, #eee);
}

body {
  background-color: var(--main-mode-color);
  color: var(--accent-mode-color);
}

Мы сократили первую реализацию в два раза. Код стал легче читаем. Красота!

Функция light-dark() принимает два аргумента и возвращает один из них в зависимости от того, какая тема интерфейса используется у пользователя. Первое значение вернётся при светлой теме, а второе — если установлена тёмная.

Чтобы всё работало корректно, обязательно нужно объявить свойство color-scheme со значением light dark .

Функция поддерживается в браузерах Google Chrome, Firefox, Edge, Safari, iOS Safari и Android Google Chrome с середины 2024 года.

Ключевые слова start и end для свойства text-align

Значения start и end уже плотно вошли в нашу рутину. Вы постоянно используете их, объявляя свойства позиционирования, такие как: justify-content, align-items justify-items и другие.

А знали ли вы, что эти же значения можно использовать для свойства text-align? Если нет, то ничего страшного. Сейчас всё покажу.

Давайте объявим свойство text-align.

<body>
  <div lang="ru" class="awesome-block">
    <p>Мне всегда нравилось следить за тем, как развивается CSS. Стараюсь следить за новыми возможностями, чтобы не пропускать что-то действительно важное. И недавно подумал: «А почему бы не рассказать о них читателям Хабра?» Так я и оказался здесь.</p>
  </div>
</body>

.awesome-block {
  text-align: start;  /* будет работать как text-align: left; */
}

.awesome-block {
  text-align: end;  /* будет работать как text-align: right; */
}

Значение start выравнивает текст по началу строки. Если у блока установлен язык с чтением слева направо, то выравнивание будет по левой стороне. Если же чтение происходит справа налево, то браузеры уже выровняют текст по правой стороне. Значение end работает так же, только выравнивание происходит по концу строки.

Значения start и end отлично заменяют значения left и right. Если вы добавите их прямо сейчас, то не заметите разницы. Но если вдруг захотите адаптировать интерфейс под разные языки, тогда будете сильно радоваться.

Эти значения очень старые. Я даже не буду писать про браузерную поддержку. Можете спокойно использовать.

Заключение

Давайте подведём итог. В этой статье мы рассмотрели:

• как реализовать открытие и закрытие модального окна без прыжков контента с помощью свойства scrollbar-gutter;

• использование шрифта операционной системы в качестве альтернативного шрифта с помощью ключевого слова system-ui;

• центрирование элемента без использования свойства display со значением flex или grid только свойствами margin-inline и align-content;

• функцию light-dark(), сокращающую стили для светлой и тёмной темы;

• выравнивание текста с помощью значений start и end.

Это всё, что я хотел показать вам. Надеюсь, вы нашли тут что-то для себя, что захочется взять и применить в своих проектах. Может, даже вдохновились на что-то новое!

А теперь самое главное — ваша часть. Напишите, пожалуйста, в комментариях, что я упустил или где вообще не прав. Я всё читаю и реально ценю вашу обратную связь.

P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих закрытых ТГ-каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.

Спасибо за чтение!

© 2026 ООО «МТ ФИНАНС»