Подсетка
С самого начала разработчики жаловались на определенные чудовищные недостатки в CSS. Некоторые обычные задачи, такие как центрирование чего-либо в CSS , требуют слишком сложных обходных путей и ловушек. Еще одна большая проблема заключалась в том, чтобы получить разумную компоновку сетки.
Макет сетки обозначается display: grid объявлением и является своего рода двоюродным братом Flexbox, поскольку он позволяет вам определять прямоугольные макеты, а также управлять сеткой в двух измерениях. Исследования показывают, что большинство разработчиков, разбирающихся в CSS, знают о Grid Layout, и многие из нас его используют.
Subgrid — это новая и очень полезная функция модуля Grid Layout. Функция subgrid позволяет вам определить дочернюю сетку, которая наследует макет своего родителя. Это отличается от вложения отображения сетки в другое; в этом случае дочерняя сетка определяет свои собственные размеры и промежутки. С subgridпомощью макет родителя применяется к вложенной сетке, но при необходимости вложенная сетка может переопределять аспекты макета.
На момент написания статьи subgridреализовано только в Firefox 71 или выше, но в планах для Safari WebKit, Google Chrome и Microsoft Edge. В будущем подсетка станет очень полезной функцией макета.
Акцент-цвет
Некоторые элементы отображения традиционно сложно стилизовать, несмотря на то, что они широко используются. Флажки и переключатели, например, часто заменяются пользовательским виджетом, который имитирует поведение этих элементов, но скрывает реализацию браузера. Новая опция CSS accent-color позволяет настроить таргетинг на эти элементы.
Например, вы можете применить пурпурный цвет ко всем переключателям на странице, как показано в листинге 1 (см. также этот живой пример).
Листинг 1. Управление цветами переключателей в 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 предлагает удобный набор свойств для управления моментальной прокруткой в веб-браузере. Некоторые части этой функциональности существуют уже пару лет, в то время как другие все еще внедряются в более поздние версии браузеров .
Что интересно, более трети пользователей CSS до сих пор не знают о привязке к прокрутке .
Команда scroll-snap-* properties дает вам довольно много способов тонкой настройки того, как положение прокрутки работает в контейнере. Разработчики получают большую точность, а конечные пользователи получают более плавный и контролируемый пользовательский интерфейс.
В листинге 2 приведен небольшой пример управления привязкой прокрутки к a div (см. также этот живой пример).
Листинг 2. Пример простой привязки прокрутки
<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>
Независимо от того, где вы отпустите движение yпрокрутки, позиция прокрутки в листинге 3 автоматически перемещается к дочернему элементу. Это связано с тем, что контейнер прокрутки имеет scroll-snap-type свойство, установленное на y mandatory, а дочерние элементы имеют scroll-snap-align: start объявление.
Вы также можете изменить это поведение. Например, вы можете установить для scroll-snap-type свойства значение y proximity. Это происходит, как и следовало ожидать, и фиксируется только тогда, когда прокрутка приближается к элементу.
В качестве примечания: связанное свойство overscroll-behavior позволяет определить, как ведут себя контейнеры с вложенной прокруткой.
Логические свойства CSS
Если вы когда-либо хотели установить границу контейнера слева и справа или снизу и сверху, вы сталкивались с необходимостью дословно записывать свойства border-left и border-right, или border-top, . border-bottom. Проблема в том, что невозможно использовать свойство ярлыка, не затрагивая при этом границы, которыми вы не хотите манипулировать. Это неудобство также относится к таким элементам, как отступы и поля.
Модуль CSS Logical Properties позволяет вам использовать ключевые слова inline и block для абстрактного обращения к вещам. Если вы хотите поговорить о левом и правом, используйте inline; когда вы хотите сослаться на верх и низ, используйте block. Например, чтобы установить границу слева и справа от div, вы можете использовать код в листинге 3 (см. также живой пример здесь).
Листинг 3. Заполнение слева и справа с помощью логического инлайна
div {
border-inline: 10px dashed seagreen;
}
Это полезные сокращения для границ, но вы также можете найти логические ключевые слова inline и во множестве других свойств .block
Большинство разработчиков используют эти ярлыки для решения вопросов, связанных с направлением текста и режимом письма. В этих случаях использование такого свойства, как padding-inline-end позволяет настроить отступы в конце независимо от того, какое направление текста активно. По сути, абстракция встроенного и блочного позволяет писать обобщенные стили, применимые к различным настройкам. Более подробное обсуждение см. в разделе Логические свойства и значения CSS.
Запросы контейнера
Запросы контейнеров не полностью стабилизированы в CSS, но скоро они появятся. Они окажут большое влияние на то, как мы думаем об адаптивном дизайне. Основная идея заключается в том, что вы сможете установить точку останова не только на основе окна просмотра и мультимедиа, но и на размере родительского контейнера.
Синтаксис не определен полностью, но, скорее всего, он будет примерно таким, как в листинге 4.
Листинг 4. @container
@container (max-width: 650px){ … }
Подумайте, насколько мощной будет тонкая настройка макета на основе размера различных контейнеров, которые проявляются во всех вложенных слоях пользовательского интерфейса. Это довольно масштабное изменение, которое, вероятно, вызовет волну нововведений в интерфейсе.
@когда и @иначе
Пока мы думаем о новом @containerзапросе, знаете ли вы, что поддержка условных запросов @when и @else также не за горами? Он еще не поддерживается ни одним из основных браузеров, но эта функция появится в недалеком будущем.
Запросы @when и @else включают условный логический поток в стиле if/then при работе с медиа-запросами и запросами поддержки. Они упростят вам жизнь во многих сложных ситуациях и макетах CSS.
Три новые цветовые палитры
С незапамятных времен специалисты по CSS использовали RGB, HEX и именованные цвета, чтобы украсить и оживить дисплеи своих устройств. Совсем недавно было введено объявление цвета в стиле HSL. Теперь спецификация CSS вводит новые способы обозначения цветов; а именно , hwb, labи lch.
HWB означает оттенок, белизну и черноту. Это аккуратное дополнение, отличающееся удобочитаемостью — вы выбираете цвет, а затем добавляете белый и черный. Он поддерживается в последних версиях Chrome, Firefox и Safari. (Справочник по функциям Microsoft Edge странно умалчивает об этой теме.) См. hwb() — обозначение цвета для людей? чтобы узнать больше о HWB. Подобно RGB и HWL, он поддерживает альфа-канал для обеспечения прозрачности.
LCH, сокращение от светлоты, цветности и оттенка, отличается увеличением диапазона доступных цветов. Цвета LCH в CSS: что, зачем и как? хороший обзор с открывающим глаза обсуждением теории цвета в CSS. В настоящее время только Safari поддерживает LCH.
LAB, созданный на основе теории цвета CIE LAB, является наиболее сложной теорией новых цветовых пространств. Дескриптор labцвета претендует на то, чтобы охватить весь диапазон воспринимаемых человеком цветов, что является серьезным заявлением. Как и LCH, в настоящее время поддерживается только Safari. Подробнее о LAB for CSS можно узнать из документации Mozilla CSS.