[ad_1]
Последние годы дразнили нас невероятными функциями CSS, такими как Flexbox и вариативные шрифты, но самое захватывающее время для веб-разработчика наступило именно сейчас, когда множество новых интересных функций приближаются к почти 100% поддержке в современных веб-браузерах.
Первоначально мы опубликовали эту статью в 2019 году, так как ожидали новых методов CSS, но теперь многие из этих свойств и спецификаций CSS действительно доступны, давайте еще раз взглянем на то, что доступно.
Если вам нужны дополнительные инструменты, ознакомьтесь с нашим обзором инструментов для веб-дизайна, а если вам нужна помощь в обслуживании вашего сайта, практический веб-хостинг сотворит для вас чудеса.
01. Желоба для Grid Layout и Flexbox
CSS Grid Layout представил сетка-столбец-разрыв а также сетка-ряд-разрыв свойства (в дополнение к сокращению зазор сетки свойство) как способ создания промежутков между элементами сетки. Поскольку многоколоночный макет уже имел разрыв столбца (что делает то же самое), эти свойства CSS теперь реструктурированы как разрыв столбца, междурядье а также зазор для единообразия, дополнительно поддерживая Flexbox в процессе.
Свойства Gap теперь поддерживаются в большинстве веб-браузеров и считаются безопасной альтернативой полям при использовании Grid Layout, Multi-column Layout или Flexbox.
selector {
display: flex; /* or display: grid; */
row-gap: 20px; column-gap: 10px; /* or gap: 20px 10px; */
}02. Логический размер
Свойства и значения CSS традиционно сопоставлялись с физическими свойствами экрана. Например, мы используем ширина а также высота и мы устанавливаем поля сверху, справа, снизу и слева от элемента. Эти физические свойства кажутся странными при работе с любым режимом письма, кроме горизонтального и сверху вниз. В качестве простого примера представьте себе коробку с шириной и высотой.
.box {
width: 250px;
height: 150px;
}Это поле имеет ширину 250 пикселей и высоту 150 пикселей. Даже если мы изменим режим письма на вертикальный, поле останется привязанным к этим физическим размерам.
Логический размер, однако, позволяет нам изменять размеры элементов или ссылаться на их поля, отступы и границы таким образом, что это имеет смысл, даже если режим письма меняется. Если мы вернемся к нашему предыдущему примеру, мы можем захотеть, чтобы наш блок всегда имел длину 250 пикселей во встроенном измерении независимо от ориентации.
Встроенный размер — это то, как предложение работает в этом режиме письма (по горизонтали в английском и по вертикали в любом вертикальном режиме письма). Затем мы хотим, чтобы он имел длину 150 пикселей в измерении блока, что соответствует способу отображения блоков, таких как абзацы, в этом конкретном режиме письма.
Чтобы достичь этого, логический размер является ответом:
.box {
block-size: 150px;
inline-size: 250px;
}Существуют и другие логические свойства и значения, относящиеся к полям, отступам и границам — они обычно поддерживаются веб-браузерами и считаются безопасными для использования.
03. Подсетка
Работа над спецификацией CSS Grid Layout Level 2 все еще продолжается, но стоит изучить ее сейчас. Grid Layout Level 2 полностью посвящен функции подсетки. Подсетки будут означать, что в дополнение к тому, что прямые дочерние элементы контейнера сетки становятся элементами сетки, мы сможем создать сетку в пределах элемент сетки и использовать дорожки столбцов и строк родительского контейнера сетки. Это означало бы, например, что мы могли бы создать сетку из нескольких столбцов и использовать ее для выравнивания элементов, вложенных в разметку.
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr 2fr;
}
.grid-item {
display: grid;
grid-column: 2 / 5;
grid-template-columns: subgrid;
}В приведенном выше примере CSS у нас есть родительский элемент с дисплей: сетка, который определяет сетку из четырех столбцов. Дочерний элемент с классом элемента сетки помещается в сетку от строки столбца 2 до строки столбца 5, охватывая три дорожки родительской сетки. Используя значение подсетка вместо трек-листа для сетка-шаблон-столбцы, мы говорим его сетке использовать дорожки от родителя. Таким образом, любой дочерний элемент элемента сетки будет использовать размеры дорожек столбцов, определенные в родительской сетке.
04. Акцентный цвет
Как известно многим фронтенд-разработчикам, стилизация определенных элементов формы (или их стилизация определенным образом) может быть сложной задачей. Стилизация ползунка или бегунка ввода диапазона особенно сложна, и в целом этот процесс может оказаться намного более подробным. Одним из способов улучшения этого является достаточно хорошо поддерживаемое добавление акцент-цветсвойство CSS, которое автоматически обеспечивает выбранный вами цвет для флажка, переключателя, диапазона и элементов/типов элементов прогресса одновременно.
Он определен в корне, как показано ниже:
:root {
accent-color: red;
}05. Вариативные шрифты
Если вы когда-либо использовали веб-шрифт, вы понимаете проблему необходимости включения дополнительных вариантов шрифта. Для большинства шрифтов вам понадобятся обычная, полужирная и курсивная версии шрифта — это четыре запроса для веб-браузера плюс разумный объем данных для загрузки пользователем. В то же время вариативный шрифт представляет собой один файл шрифта, содержащий все вышеперечисленные варианты и многие другие.
Чтобы использовать вариативные шрифты, нам потребуется шрифт, который их поддерживает, и браузер, реализующий настройки вариации шрифта свойство, которое позволяет нам управлять различными осями выбранного шрифта. Поддержка в современных браузерах отличная и улучшается. Чтобы понять, насколько управляемыми могут быть шрифты, посетите веб-сайт Axis Praxis. (откроется в новой вкладке) где вы можете играть с различными шрифтами и копировать/вставлять CSS, используемый для созданного вами варианта шрифта.
Чтобы найти и протестировать вариативные шрифты, посетите сайт v-fonts.com. Твиттер-аккаунт Variable Fonts (откроется в новой вкладке) стоит подписаться, чтобы узнать о новых выпусках шрифтов и других новостях.
Привязка прокрутки CSS позволяет нам создавать интерфейсы, которые привязываются к предопределенным точкам прокрутки. Это полезно для полностраничных интерфейсов, которые мы хотим вести так же, как мобильное приложение, перескакивая со страницы на страницу.
В приведенном ниже коде создается список элементов, в котором родительский элемент имеет фиксированную высоту, а переполнение настроено на прокрутку. Когда пользователь отпускает прокрутку, страница привязывается к ближайшей точке привязки.
К родительскому элементу мы добавляем свойство тип привязки прокруткикоторый имеет значение оси, по которой мы прокручиваем (Икс или же у), а затем ключевое слово обязательный или же близость. обязательный ключевое слово будет сила привязка к точкам привязки, поэтому мы должны опасаться возникновения ситуации, когда пользователь не может прокрутить часть содержимого из-за привязки прокрутки.
На точках привязки указываем прокрутка-щелчок-выравниваниекоторый может быть установлен в Начало, центр или же конец.
ul {
list-style: none;
border: 5px solid rgb(126,63,222);
border-radius: .5em;
height: 300px;
padding: 0;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
li {
background-color: rgba(126,63,222,.3);
padding: 40px 20px ;
border-bottom: 1px solid rgb(126,63,222);
min-height: 150px;
scroll-snap-align: start;
scroll-snap-stop: always; /* optionally prevents skipping */
}Способы взаимодействия людей с веб-сайтом или приложением меняются. Пользователь может использовать устройство с сенсорным экраном, клавиатуру и мышь или — с такими устройствами, как Microsoft Surface Book, работающими как традиционные ноутбуки с сенсорным экраном — и то, и другое одновременно. Таким образом, просмотр размера экрана — не лучший способ узнать, какой тип устройства у пользователя на самом деле. Медиа-запросы, уровень 4 (откроется в новой вкладке) представляет функции Interaction Media, которые позволяют нам узнать, какой тип указателя есть у пользователя, и проверить такие свойства, как способность наводить курсор.
@media (pointer:coarse) {
/* target touch screens */
}
@media (hover) {
/* target mice with the ability to hover */
}Эти медиа-запросы предоставляют еще один способ проверить возможности устройства, чтобы обеспечить удобство для всех посетителей веб-сайта. Обычно они поддерживаются во всех современных браузерах.
08. Функциональные запросы
CSS даже разработал для нас способ проверки поддержки браузерами новых функций CSS — с помощью Feature Queries. Feature Query ведет себя почти так же, как Media Query, за исключением того, что вместо того, чтобы запрашивать у браузера что-то об устройстве, используемом для просмотра сайта, Feature Query спрашивает браузер, поддерживает ли он определенную функцию CSS. Это упрощает использование новых функций безопасным и постоянно совершенствуемым способом.
@supports (display:grid) {
/* target browsers that support display:grid */
}Браузерная поддержка Feature Queries великолепна, однако они не поддерживаются в Internet Explorer 11 и более ранних версиях. Это меньшая проблема, чем вы думаете: пока вы тестируете поддержку, а затем пишете код для поддержки браузеров, вы можете перезаписать все, что вам нужно было сделать ранее в вашем CSS для этих старых браузеров.
Все новое, что появляется в CSS, вы можете протестировать с помощью Feature Queries. Я думаю, что это одна из лучших вещей, появившихся в CSS в последнее время, потому что они позволяют нам быстрее начать использовать новые функции, и, как вы видели в этой статье, есть с чего начать!
Хотите узнать о UX и UI? Не пропустите наш Курс по основам UX-дизайна.
Читать далее:
[ad_2]
