Каскадные таблицы стилей (CSS) впервые были выпущены в 1996 году и остаются важной, развивающейся частью стека веб-разработки. Как и другие живые языки, CSS постоянно вводит новые функции в соответствии с реальными практиками. Такая быстрая эволюция может привести к тому, что даже преданные делу разработчики могут пропустить новые функции. Вот обзор самых полезных новых и предстоящих функций CSS в этом году.
Каскадные слои
Каскадные слои — это разработка того, как работают специфичность и наследование CSS. Это немного абстрактно для понимания, но также имеет фундаментальное значение для CSS. А слой — это своего рода логическое пространство, которое встраивается в алгоритм, используемый движком CSS для определения того, какие стили применяются к элементам на основе каскадирования, специфичности и наследования.
Основным вариантом использования слоев является упрощение объединения нескольких источников стилей в один проект. Несколько исходных библиотек CSS можно комбинировать как именованные темы, которые не конфликтуют внутри, что упрощает совместную работу разных команд над большими и разнообразными кодовыми базами CSS.
Основным дополнением синтаксиса является @layer правило и связанные с ним программные эквиваленты. В наборе стилей, объявленных с помощью @layer, все стили каскадируются вместе. Порядок импортируемых слоев будет определять, как разрешаются конфликты на потребляющей странице.
Спецификация каскадных слоев гласит:
Авторы могут создавать слои для представления элементов по умолчанию, сторонних библиотек, тем, компонентов, переопределений и других аспектов стиля, а также могут явно переупорядочивать каскад слоев без изменения селекторов или специфики в каждом слое. или полагаться на исходный порядок для разрешения конфликтов между уровнями.
Например, вы можете определить два стиля слоя, @main и @library. При их импорте порядок импорта слоев будет определять, какой стиль имеет приоритет. Каскадные слои позволяют разрешать конкурирующие стили на уровне слоев, вместо того чтобы переходить к основному слою и разрешать конфликты на уровне стилей.
Инертный атрибут
Большинство браузеров (включая Chrome, Edge и Safari) теперь поддерживают inert. На момент написания этой статьи его планируется добавить в Firefox 112.
inert attribute — это глобальный атрибут, который можно использовать для любого элемента, чтобы указать, что он не интерактивен. Это нечто вроде более общего disabled атрибут. Фактически, inert имеет тот же эффект при применении (или наследовании) кнопками, подобными элементам управления. inert Атрибут также делает элементы невидимыми для вспомогательных технологий, таких как программы чтения с экрана.
Ну и что inert дает нам способ отрицательно определить неактивные части пользовательского интерфейса, тогда как раньше нам приходилось положительно определять активные части.
Псевдокласс :has
:has псевдокласс — интересное дополнение к селекторному аспекту CSS. На момент написания этой статьи все основные браузеры, кроме Firefox, поддерживают его, причем Firefox позволяет вам включить его, установив layout.css.has-selector.enabled к истине.
Как говорится в документах MDN, :has — это «способ выбора родительского элемента или предыдущего родственного элемента по отношению к ссылочному элементу с использованием списка относительных селекторов в качестве аргумента».
По сути, :has позволяет выбирать элементы, которые содержат другие элементы. Например, если вы хотите выбрать все <div>у которых есть <span> в них можно было использовать :has селектор, как показано в листинге 1.
Листинг 1. Использование псевдокласса :has (пример 1)
div:has(span)
Это уже довольно полезно, как способ выбора элементов вверх по цепочке селекторов, но это еще не все. Например, вы можете выбрать все <div>s с абзацем сразу после него, как показано в листинге 2.
Листинг 2. Использование псевдокласса :has (пример 2)
div:has(+ p)
Компоновка сетки и подсетка
С самого начала разработчики жаловались на определенные чудовищные недостатки в CSS. Некоторые обычные задачи, такие как центрирование чего-либо, требуют слишком сложных обходных путей и ловушек. Еще одна большая проблема заключалась в получении разумного макета сетки, по крайней мере, до тех пор, пока модуль CSS Grid Layout не вмешался в брешь.
Grid теперь полностью поддерживается и стандартизирован во всех браузерах.
Макет сетки обозначается значком display: grid объявление и является своего рода двоюродным братом Flexbox, поскольку он позволяет вам определять прямоугольные макеты, а также управлять сеткой в двух измерениях. Исследования показывают, что большинство разработчиков, разбирающихся в CSS, знают о Grid Layout, и многие его используют.
subgrid value — это новая и очень полезная функция модуля Grid Layout. subgrid позволяет определить дочернюю сетку, которая наследует макет своего родителя. Это отличается от вложения отображения сетки в другое. В этом случае дочерняя сетка определяет свои собственные размеры и зазоры. С subgridмакет родителя применяется, но вложенная сетка может по-прежнему переопределять аспекты макета, если это необходимо.
На момент написания этой статьи подсетка реализована в Firefox 71 или выше и Safari 16 и выше. Он включен в дорожную карту для Google Chrome и Microsoft Edge. subgrid value будет очень полезной функцией макета в будущем.
Вариант акцентного цвета
Некоторые элементы отображения традиционно сложно стилизовать, несмотря на то, что они широко используются. Флажки и переключатели, например, часто заменяются пользовательским виджетом, который имитирует поведение этих элементов, но скрывает реализацию браузера. Новый CSS accent-color позволяет настроить таргетинг на эти элементы.
Например, вы можете применить пурпурный цвет ко всем переключателям на странице, как показано в листинге 3 (см. также этот живой пример).
Листинг 3. Управление цветами переключателей в CSS
<style>
input[type="radio"] {
accent-color: magenta;
}
</style>
<form action="/foo.bar">
<p>Select your favorite outdoor adventure type</p>
<input type="radio" id="mountain" name="type" value="mountain">
<label for="mountain">Mountain</label><br>
<input type="radio" id="ocean" name="type" value="ocean">
<label for="ocean">Ocean</label><br>
<input type="radio" id="desert" name="type" value="desert">
<label for="desert">Desert</label>
</form>
Привязка прокрутки
CSS предлагает удобный набор свойств для управления действием прокрутки в веб-браузере. Некоторые части этой функциональности существуют уже пару лет, в то время как другие все еще внедряются в более поздние версии браузеров.
Что интересно, по состоянию на 2022 год более трети пользователей CSS все еще не знали о привязке к прокрутке.
scroll-snap-* Команда properties дает вам довольно много способов тонкой настройки того, как положение прокрутки работает в контейнере. Разработчики получают большую точность, а конечные пользователи получают более плавный и контролируемый пользовательский интерфейс. В листинге 4 приведен небольшой пример управления привязкой прокрутки к div (также см. этот живой пример).
Листинг 4. Пример простой привязки прокрутки
<style>
.scroll-container,
.scroll-area {
max-width: 850px;
height: 300px;
font-size: 60px;
}
.scroll-container {
overflow: auto;
scroll-snap-type: y mandatory;
height: 500px;
}
.scroll-area {
scroll-snap-align: start;
}
.scroll-container,
.scroll-area {
margin: 0 auto;
}
.scroll-area {
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.scroll-area:nth-of-type(1) { background: IndianRed; }
.scroll-area:nth-of-type(2) { background: Moccasin; }
.scroll-area:nth-of-type(3) { background: thistle; }
.scroll-area:nth-of-type(4) { background: seagreen; }
</style>
<div class="scroll-container">
<div class="scroll-area">1</div>
<div class="scroll-area">2</div>
<div class="scroll-area">3</div>
<div class="scroll-area">4</div>
</div>
Независимо от того, где вы отпустите движение прокрутки, у позиция прокрутки в листинге 4 автоматически перемещается к дочернему элементу. Это связано с тем, что контейнер прокрутки имеет scroll-snap-type свойство установлено на y mandatoryа дочерние элементы имеют scroll-snap-align: start декларация.
Вы также можете изменить это поведение. Например, вы можете установить scroll-snap-type собственность на y proximity. Это происходит, как и следовало ожидать, и фиксируется только тогда, когда прокрутка приближается к элементу.
В качестве примечания: связанное свойство overscroll-behavior позволяет определить, как ведут себя контейнеры с вложенной прокруткой.
Логические свойства CSS (встроенные и блочные)
Если вы когда-либо хотели установить границу контейнера слева и справа или снизу и сверху, вы испытывали раздражение от необходимости записывать границу слева и границу справа или границу сверху и границу снизу. свойства дословно. Проблема в том, что невозможно использовать свойство ярлыка, не затрагивая также границы, которыми вы не хотите манипулировать. Это неудобство также относится к таким элементам, как отступы и поля.
Модуль логических свойств CSS позволяет использовать inline и block ключевые слова для абстрактного обозначения вещей. Когда вы хотите поговорить о левом и правом, используйте inline; когда вы хотите сослаться на верх и низ, используйте block. Например, чтобы установить границу слева и справа от divвы можете использовать код из листинга 5 (см. также живой пример здесь).
Листинг 5. Заполнение слева и справа с помощью логического встраивания
div {
border-inline: 10px dashed seagreen;
}
Это полезные ярлыки для границ, но вы также можете найти inline и block логические ключевые слова во множестве других свойств.
Большинство разработчиков используют эти ярлыки для решения вопросов, связанных с направлением текста и режимом письма. В этих случаях, используя свойство, подобное padding-inline-end позволяет настроить отступы в конце независимо от того, какое направление текста активно. По сути, абстракция inline и block позволяет писать обобщенные стили, применимые к различным настройкам. Более подробное обсуждение см. в разделе Логические свойства и значения CSS.
Запросы контейнера
Запросы контейнеров теперь стабилизированы в CSS и реализованы во всех основных браузерах. Они оказывают большое влияние на то, как мы думаем об адаптивном дизайне. Основная идея заключается в том, что вы можете установить точку останова не только на основе области просмотра и мультимедиа, но и на основе размера родительского контейнера.
Синтаксис не определен полностью, но, скорее всего, он будет примерно таким, как в листинге 6.
Листинг 6. @container
@container (max-width: 650px){ … }
Таким образом, вы можете точно настроить макет на основе размера различных контейнеров, которые проявляются во всех вложенных слоях пользовательского интерфейса.
@когда и @иначе
Пока мы думаем о новом @container query, знаете ли вы, что поддержка условных запросов @when и @else также не за горами? Он еще не поддерживается ни одним из основных браузеров, но появится в недалеком будущем.
@when и @else запросы включают условный логический поток в стиле if/then при работе с медиа-запросами и запросами поддержки. Они упростят вам жизнь во многих сложных ситуациях и макетах CSS.
Три новые цветовые палитры
С незапамятных времен специалисты по CSS использовали RGB, HEX и именованные цвета, чтобы украсить и оживить дисплеи своих устройств. Совсем недавно было введено объявление цвета в стиле HSL. Теперь спецификация CSS вводит новые способы обозначения цветов; а именно, hwb, lchи lab.
HWB означает оттенок, белизна и чернота. Это аккуратное дополнение, отличающееся удобочитаемостью — вы выбираете цвет, а затем добавляете белый и черный. Он поддерживается в последних версиях Chrome, Firefox и Safari. (Справочник по функциям Microsoft Edge странно умалчивает об этой теме.) См. hwb() — обозначение цвета для людей? чтобы узнать больше о HWB. Подобно RGB и HWL, он поддерживает альфа-канал для обеспечения прозрачности.
ЛЧ, сокращение от яркость, цветность и оттенок, отличается увеличением диапазона доступных цветов. Цвета LCH в CSS: что, зачем и как? хороший обзор с поучительным обсуждением теории цвета в CSS.
LAB, созданный на основе цветовой теории CIE LAB, является наиболее сложной теорией новых цветовых пространств. Дескриптор цвета LAB претендует на то, чтобы охватить весь диапазон воспринимаемых человеком цветов, что является серьезным заявлением. Вы можете узнать больше о LAB для CSS из документации Mozilla CSS.
И LAB, и LCH поддерживаются всеми основными браузерами, кроме Firefox, для которого требуется layout.css.more_color_4.enabled переключатель должен быть установлен в значение true.
