Новые функции CSS для изучения в 2021 году

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

За последние годы CSS вышел далеко за рамки цветов фона, границ, стиля текста и полей. Современный CSS способен выполнять целый ряд функций, для которых в прошлом вам требовался JavaScript или обходные пути.

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

Функция соотношения сторон aspect ratio

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

Некоторые примеры того, где обычно используется соотношение сторон:

  • Создание контейнеров-заглушек для содержимого, которое будет загружено
  • Создание последовательных компонентов одинакового размера
  • Создание адаптивных iframes

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

Синтаксис очень прост:

.widescreen {
  aspect-ratio: 16 / 9;
}

Важно отметить, что элементы не будут учитывать соотношение сторон, если для элемента определены высота и ширина.

Вы можете использовать функцию aspect ratio напрямую либо через директиву @supports.

.standard {
  aspect-ratio: 4 / 3;
}

@supports not (aspect-ratio: 4 / 3) {
  .standard {
    width: 16rem;
    height: 9rem;
  }
}

Поддержка браузерами:

С января 2021 года свойство доступно в Chrome и Edge без необходимости включения экспериментального режима. Он также доступен в Firefox.

Свойство Content-visibility

Свойство видимости содержимого Content-visibility - это новое свойство CSS, которое может ускорить рендеринг страниц. Оно позволяет браузеру пропускать загрузку элемента до тех пор, пока она не понадобится (когда элемент появится в поле зрения). Если большая часть вашего контента находится за пределами видимой части экрана, использование этого свойства может значительно сократить начальное время загрузки страницы.

При использовании свойства content-visibility необходимо определить, какой контент должен быть загружен сразу, а какой потенциально может быть отложен. Свойство имеет опцию auto, которая позволяет браузеру решить, может ли он пропустить визуализацию элемента.

Есть некоторые важные моменты при использовании этого свойства, такие как:

  • Высота страницы: браузер сделает элемент content-visibility: auto или content-visibility: hidden невидимым, сделав его высоту нулевой до тех пор, пока он не будет отрисован. Это изменяет высоту страницы и прокрутку. Вы можете использовать свойство contain-intrinsic-size, чтобы задать явную высоту для элемента, чтобы компенсировать это.
  • Влияние на доступность: Если вы используете content-visibility в разделе с заголовками и ориентирами, программы чтения с экрана не смогут получить к ним доступ при загрузке страницы. Соответственно, это ухудшит доступность вашего контента.

Поддержка браузерами:

Поддерживается Edge и Chrome.

Логические свойства

Логические свойства определяют направленно-относительные эквиваленты их соответствующих физических свойств. Они предлагают способ описания макета веб-страниц универсальной терминологией, которая будет понятной для разных языков. Например, можно использовать margin-block-start вместо margin-left для текста слева направо.

Логические свойства существуют уже давно, но поддержка браузерами была довольно ограниченной. Теперь поддержка намного лучше, но некоторые версии свойств все еще считаются экспериментальными. До тех пор, пока эти свойства не получат более широкую поддержку, сложно использовать их полноценно. 

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

Логические свойства для margin, border и padding поддерживаются всеми основными браузерами. Некоторые версии этих свойств доступны в качестве экспериментальных.

CSS Subgrid

Подсетка CSS Subgrid значительно упрощает выполнение ряда сложных шаблонов компоновки. Это глазурь и вишенка на торте CSS. Если вы уже знакомы с CSS grid, вам не потребуется много усилий, чтобы изучить CSS subgrid.

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

Примером может служить макет карточки с различными разделами. Размер этих разделов может варьироваться в зависимости от содержимого. При использовании обычной вложенной сетки вы не можете поддерживать вертикальное выравнивание одних и тех же разделов между разными карточками.

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.card {
    display: grid;
}

Если определить карточку как подсетку, то можно идеально выровнять секции по вертикали.

.card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: auto / span 3;
}

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

Пока данную функцию поддерживает только Firefox.

Функция color

Функция color позволяет определить цвет в конкретном цветовом пространстве, а не в координатах sRGB, которые используют большинство других цветовых функций. Это позволит веб-разработчикам указать более широкий диапазон цветов в будущем. Реальные физические устройства пока не могут отображать все возможные оттенки цветов, которые может различать человеческий глаз. Диапазон цветов, который может производить определенное устройство, называется спектром. Спектры различных цветовых пространств можно сравнить по объему производимых цветов, выраженном в единицах LAB (cubic LAB units).

В таблице ниже представлено сравнение предопределенных в CSS цветовых пространств.

Цветовое пространство Объем (миллионов LAB единиц)
sRGB 0.820
display-p3 1.233
a98-rgb 1.310
prophoto-rgb 2.896
rec2020 2.042
lab 6.578

Как видно из таблицы, display-p3 имеет примерно на 35% больше оттенков, чем sRGB. Многие современные дисплеи могут отображать 100% цветового пространства display-p3.

Вы можете использовать функцию color напрямую либо через директиву @supports.

 

/* Display-p3 color, если поддерживается. */
@supports (color: color(display-p3 1 1 1)) {
    :root {
        --bright-green: color(display-p3 0 1 0);
    }
}

header {
    color: var(--bright-green);
}

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

Пока что функцию поддерживает только браузер Safari.

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