Новые функции CSS в 2022 году

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

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

Контейнерные Запросы

КАК МЫ ИХ ИСПОЛЬЗУЕМ?

Для контейнерного запроса нам нужно указать элемент в качестве нашего контейнера, используя containerсвойство (сокращение от container-typeand container-name). container-typeМожет быть width, height, inline-sizeили block-size. inline-sizeи block-sizeявляются логическими свойствами, которые могут давать разные результаты в зависимости от режима записи документа.

main, aside {
    container: inline-size;
}

Тогда мы можем использовать @containerправило at таким образом, чтобы оно было похоже на медиа-запрос. Обратите внимание на то, как правило может быть выражено в скобках (inline-size > 30em а не min-width: 30em). Это часть спецификации Media Queries Level 4. Для примера макета карты выше, когда контейнер шире 30rem, мы переключаемся на горизонтальную компоновку с помощью flexbox:

@container (inline-size > 30em) {
    .card {
        display: flex;
    }
}

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

МОГУ ЛИ Я ИХ ИСПОЛЬЗОВАТЬ?

Chrome утверждает, что поддерживает контейнерные запросы за флагом, но рабочая реализация, похоже, не соответствует текущей спецификации. Есть polyfill, но он не работает с последним синтаксисом. Таким образом, короткий ответ “нет”, я бы определенно призвал вас подождать некоторое время, прежде чем использовать их в производстве. Но за контейнерными запросами стоит большой импульс, поэтому я ожидаю более общей поддержки в ближайшее время.

ЧТО ЭТО?

Часто известный как “родительский селектор”, этот псевдокласс позволяет нам выбирать элемент в зависимости от его потомков. Как писал Брамус Ван Дамм в прошлом году, помимо этого, у него есть довольно интересные варианты использования. Например, мы могли бы по-разному стилизовать изображение в a <figure>в зависимости от того, сопровождается ли оно a или нет <figcaption>. Или мы могли бы нацеливать метки в форме, за которой следуют недопустимые входы. Возможности безграничны.

КАК МЫ ЕГО ИСПОЛЬЗУЕМ?

Чтобы стилизовать <section>элементы, содержащие<h2>:

section:has(h2) {
    background: lightgray;
}

Копировать

Для стиля an <img>, только если его родитель <section>также содержит<h2>:

section:has(h2) img {
    border: 5px solid lime;
}

Копировать

МОГУ ЛИ Я ЕГО ИСПОЛЬЗОВАТЬ?

Пока нет поддержки основного браузера, но вы можете играть с ним до глубины души в Safari Technology Preview. Проверьте эту демонстрацию в поддерживаемых браузерах.

ЧТО ЭТО?

At-правило для условных выражений в CSS, аналогичное логике if/else в других языках программирования. Например, это может сделать написание сложных медиа-запросов гораздо более логичным. @whenбыл выбран вместо @ifтого, чтобы избежать конфликта с Sass.

КАК МЫ ЕГО ИСПОЛЬЗУЕМ?

Мы можем запросить несколько условий мультимедиа или поддерживаемых функций, например, имеет ли окно просмотра пользователя определенную ширину, а их браузер поддерживает подсетку. При использовании @when/@elseмы отбрасываем @правило from the query:

@when media(min-width: 30em) and supports(display: subgrid) {
    /* Styles for viewports over 30em, where the browser also supports subgrid */
} @else {
    /* Styles for browsers that do not meet the condition */
}

Копировать

МОГУ ЛИ Я ЕГО ИСПОЛЬЗОВАТЬ?

Пока нет. Это очень ранние дни, и все еще обсуждается. Я бы не ожидал, что поддержка браузера будет широко распространена в этом году, но это определенно стоит посмотреть.

ЧТО ЭТО?

accent-colorСвойство позволяет быстро и легко развертывать цвета нашего бренда для определенных входов формы, используя стили пользовательского агента. Подумайте о флажках, переключателях, входах диапазона и индикаторах прогресса. Исторически сложилось так, что это своего рода боль в стиле, и все браузеры отображают их немного по-разному. Как разработчики, опция go-to чаще всего скрывает ввод по умолчанию и свертывает наши собственные, используя псевдоэлементы. accent-colorпозволяет нам сохранить ввод браузера по умолчанию, но применить цвет, соответствующий нашему бренду.

КАК МЫ ЕГО ИСПОЛЬЗУЕМ?

Использование простое, и свойство наследуется, поэтому вы можете установить его на корневом уровне, чтобы применять его везде:

:root {
    accent-color: lime;
}

Или на отдельных элементах:

form {
    accent-color: lime;
}

input[type="checkbox"] {
    accent-color: hotpink;
}

Копировать

МОГУ ЛИ Я ЕГО ИСПОЛЬЗОВАТЬ?

Да! accent-colorподдерживается в Chrome, Edge, Firefox и Safari Technology Preview. Браузеры, которые не поддерживают его, просто получат цвета по умолчанию, а входные данные останутся идеально пригодными для использования — отлично подходит для прогрессивного улучшения.

Новые Функции Цвета CSS

КАКИЕ ОНИ?

Возможно, вы уже знакомы с цветовыми форматами Hex, RGB и HSL. Уровни CSS Color Module 4 и 5 включают в себя целый ряд новых цветовых функций, которые позволяют нам указывать и манипулировать цветами в CSS, как никогда раньше. Они включают в себя:

• hwb(): Оттенок, белизна, чернота.
• lab(): Легкость, а также значения a и b, которые определяют оттенок.
• lch(): Легкость, цветность, оттенок.
• color-mix(): Смешайте два цвета вместе.
• color-contrast(): Из списка цветов выведите тот, который имеет наибольший контраст по сравнению с первым аргументом.
• color(): Укажите цвет в другом цветовом пространстве (напримерdisplay-p3).

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

КАК МЫ ЕГО ИСПОЛЬЗУЕМ?

hwb(), lab()и lch()может использоваться так же, как rgb()и hsl()функции and, к которым мы привыкли, с дополнительным альфа-параметром:

.my-element {
  background-color: lch(80% 100 50); // opaque color
}

.my-element {
  background-color: lch(80% 100 50 / 0.5); // color with 50% transparency
}

color-mix() выводит цвет в результате смешивания двух других. Нам нужно указать метод интерполяции цвета в качестве первого аргумента:

.my-element {
  background-color: color-mix(in lch, blue, lime);
}

Копировать

color-contrast() требуется базовый цвет, с которым можно сравнить другие. Он будет выводить цвет с наибольшим контрастом или, в случае, когда предоставляется дополнительное ключевое слово, первый цвет в списке, который соответствует соответствующему коэффициенту контрастности:

/* Output the color with the highest contrast */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue);
}

/* Output the first color that meets AA contrast ratio */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue to AA);
}

Копировать

Это отлично подходит для доступных цветовых схем. Например, мы можем позволить нашему CSS выбрать, является ли черный или белый текст наиболее подходящим (т. Е. Обеспечивает наибольший контраст) для кнопки с заданным цветом фона.

МОГУ ЛИ Я ИХ ИСПОЛЬЗОВАТЬ?

Safari лидирует в поддержке браузера прямо сейчас, с hwb(), lch(), lab(), и color()все поддерживается с версии 15. color-mix()и color-contrast()может быть включен с флагом. Firefox поддерживает hwb(), а также отметил поддержку color-mix()и color-contrast(). Удивительный выброс-Chrome, который сейчас не поддерживает ни один из них. Тем не менее, не так уж сложно обеспечить резервные копии в вашем коде: учитывая два правила цвета, браузер проигнорирует второе, если оно его не поддерживает.

.my-element {
    background-color: rgb(84.08% 0% 77.36%);
    background-color: lch(50% 100 331);
}

Копировать

Это означает, что когда поддержка придет, ваш код будет готов.

Каскадные Слои

КАКИЕ ОНИ?

Каскадные слои дают нам больше возможностей для управления “каскадной” частью CSS. В настоящее время существует несколько факторов, которые определяют, какие стили будут применяться в вашем коде CSS, включая специфику селектора и порядок появления. Каскадные слои позволяют нам эффективно группировать наш CSS в куски (или “слои”, если хотите). Код в слое ниже по порядку будет иметь приоритет над кодом в более высоком слое, даже если селектор в более высоком слое имеет более высокую специфичность. Если все это немного сложно обернуть, Мириам Сюзанна написала полное руководство по CSS-трюкам.

Мне нравится думать об этом как z-indexо каскаде. Если вы понимаете, как z-indexэто работает, вы, вероятно, довольно быстро поймете каскадные слои.

КАК ИХ ИСПОЛЬЗОВАТЬ?

Как объясняет Брамус в своем учебнике, вы можете создавать дискретные слои в соответствии с методологией ITCSS.

/* Create the layers, in the desired order */
@layer reset, base, theme;

/* Append the CSS to each of the layers */
@layer reset {
  /* Append to 'reset' layer */
}

@layer base {
  /* Append to 'base' layer */
  h1.title {
      font-size: 5rem;
  }
}

@layer theme {
  /* Append to 'theme' layer */
  h1 {
      font-size: 3rem;
  }
}

Копировать

Объявление CSS font-sizeдля h1in the themelayer выиграет над тем , что вbase, несмотря на то, что последний имеет более высокую специфичность.

МОГУ ЛИ Я ИХ ИСПОЛЬЗОВАТЬ?

Каскадные слои поддерживаются в последней версии Firefox и могут быть включены с флагом в Chrome и Edge (с полной поддержкой Chrome в версии 99). Похоже, что все основные браузеры работают с этой спецификацией, поэтому ожидайте более широкой поддержки в ближайшее время. Таким образом, вы можете абсолютно начать играть с каскадными слоями прямо сейчас, но может пройти некоторое время, прежде чем мы сможем уверенно использовать их в производстве. Трудно понять, как легко обеспечить резервные копии старых браузеров, не включая отдельную таблицу стилей, или, возможно, со временем появятся полифиллы. У Мириам Сюзанны есть некоторые мысли в этом объяснителе.

Подсетка

ЧТО ЭТО?

Когда о CSS Grid впервые заговорили много лет назад, многие разработчики думали, что это позволит нам выложить каждую часть нашего пользовательского интерфейса на одной сетке, как типичные макеты с 12 столбцами, которые мы получаем от дизайнеров. На практике это будет включать в себя полное выравнивание разметки, нарушение семантики — не рекомендуется! Часть спецификации CSS Grid Layout Module 2, subgrid позволяет элементу наследовать сетку своего родителя либо на оси строки, либо на оси столбца. Теоретически вы можете вложить сетки полностью вниз, выровняв каждый компонент по одной и той же сетке. На самом деле нам, вероятно, не нужно делать это так часто, как мы думали, поскольку мы (надеюсь) принимаем более гибкий, внутренний веб-дизайн, который отдает предпочтение контенту, UX и доступности над жестким соблюдением сетки. Но subgrid по-прежнему невероятно полезен для решения всевозможных задач пользовательского интерфейса.

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

КАК МЫ ЕГО ИСПОЛЬЗУЕМ?

Укажите сетку родительского элемента, используя обычные свойства Grid. Используйте ключевое subgridслово для свойства grid-template-columnsor grid-template-rowsвложенного элемента, который вы хотите наследовать родительскую сетку:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
}

.grid > figure {
    display: grid;
    grid-template-rows: subgrid;
}

.grid figcaption {
    grid-row: 2;
}

МОГУ ЛИ Я ЕГО ИСПОЛЬЗОВАТЬ?

Примечательно, что subgrid поддерживается в Firefox с 2019 года, но ни один другой браузер не последовал этому примеру почти три года спустя. Есть признаки того, что команда Chromium наконец-то приступает к его реализации, поэтому нам может повезти увидеть его в Chrome и Edge в этом году. (Следите за проблемой здесь.) Я меньше надеюсь на поддержку Safari, но с Джен Симмонс, возглавляющей усилия CSS в Apple, все возможно. Ничто не мешает вам использовать subgrid в производстве, но пока лучше рассматривать его как прогрессивное улучшение.

Прокрутка Временной Шкалы

ЧТО ЭТО?

Вы, вероятно, видели много классных веб-сайтов, которые реализуют причудливые анимации, связанные с прокруткой. Существует множество библиотек JS, которые помогут нам реализовать такие вещи — я большой поклонник плагина ScrollTrigger [Greensock]. Представьте, если бы мы могли сделать все это в CSS? С @scroll-timelinewe can!

КАК МЫ ЕГО ИСПОЛЬЗУЕМ?

Нам нужно несколько вещей:

• анимация ключевых кадров,
• the @scroll-timelineat-rule,
• animation-timelineсвойство элемента, который мы анимируем (или укажите временную шкалу в свойстве shorthandanimation).

Вот пример:

/* Set up keyframe animation */
@keyframes slide {
    to { transform: translateX(calc(100vw - 2rem)); }
}

/* Configure our scroll timeline. Here we're giving it the name `slide-timeline` */
@scroll-timeline slide-timeline {
  source: auto; /* the scrollable element that triggers the scroll-linked animation (the document by default) */
  orientation: vertical; /* the scroll orientation (vertical by default) */
  scroll-offsets: 0%, 100%; /* an array of progress intervals in which the timeline is active */
}

/* Specify the keyframe animation and the scroll timeline */
.animated-element {
  animation: 1s linear forwards slide slide-timeline;
}

В качестве альтернативы мы можем использовать смещения на основе элементов для scroll-offsetsсвойства, чтобы вызвать временную шкалу, когда конкретный элемент прокручивается в поле зрения:

@scroll-timeline slide-timeline {
    scroll-offsets: selector(#element) end 0, selector(#element) start 1;
}

Еще раз, Bramus покрыл нас всеобъемлющим введением и некоторыми отличными примерами использования.

МОГУ ЛИ Я ЕГО ИСПОЛЬЗОВАТЬ?

Если вам интересно поиграть с @scroll-timelineним, его можно включить с помощью флага в Chrome. Спецификация находится в проекте редактора, поэтому есть хороший шанс, что она может измениться до того, как она получит статус рекомендуемой.

Вероятно, будут случаи, когда потребуется обратиться к библиотеке JS для анимации на основе прокрутки (подумайте об управлении сложными сроками анимации). Но для относительно простых случаев это может сэкономить на большом количестве ненужного импорта.

Вложенность

ЧТО ЭТО?

Если вы знакомы с Sass, вы будете знать удобство возможности вложить селекторы — по сути, написать дочернее правило внутри родителя. Вложенность помогает нам упорядочить наш код, хотя чрезмерное использование иногда может быть помехой! Теперь похоже, что вложенность наконец-то приходит к родному CSS.

КАК МЫ ЕГО ИСПОЛЬЗУЕМ?

Синтаксически он похож на Sass, поэтому не должен чувствовать себя слишком большим скачком. Вложенное правило здесь нацелено на h2 внутри элемента с классомcard:

.card {
    color: red;

    & h2 {
        color: blue;
    }
}

Или мы можем использовать его для псевдоклассов и псевдоэлементов:

.link {
    color: red;

    &:hover,
    &:focus {
        color: blue;
    }
}

Эквивалент в сегодняшнем CSS будет:

.link {
    color: red;
}

.link:hover,
.link:focus {
    color: blue;
}

МОГУ ЛИ Я ЕГО ИСПОЛЬЗОВАТЬ?

Не изначально. Ни один браузер еще не поддерживает его, даже за флагом. Но если вы используете PostCSS, вы можете попробовать его с postcss-preset-envпомощью плагина.

Будущее CSS

Справедливо сказать, что сейчас мы находимся в эпоху бума CSS. Когда я пишу это, я замечаю, что многие из этих новых функций имеют некоторые общие черты. Да, они часто помогают нам писать лучший, более чистый и эффективный код. Некоторые используют функции инструментов предварительной обработки (например, Sass), делая эти инструменты менее необходимыми с течением времени. Но они также позволяют нам — даже поощряют нас — использовать присущую Сети гибкость и учитывать множество различных способов просмотра нашими пользователями. Сегодняшние пользователи могут использовать любое из миллионов доступных устройств. Они могут предпочесть более высокую контрастность, темную цветовую схему или уменьшенное движение. Они могут использовать screenreader, более старое устройство или смесь всего вышеперечисленного.

Вместо того, чтобы предписывать наши проекты и оплакивать недостижимое “пиксельное совершенство”, мы можем использовать CSS, чтобы давать подсказки и предложения, и пусть браузер решает, как лучше всего отображать нашу веб-страницу. Эти идеи были обобщены Джен Симмонс и Уной Кравец (среди прочих), которые придумали термины “Внутренний” веб-дизайн и “Новый адаптивный” веб-дизайн соответственно.

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