9 Менее известных свойств CSS

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

1. gap

Свойство gap - это удобный способ указать расстояние между элементами grid или flexbox без необходимости в дополнительных свойствах margin или padding. Оно упрощает создание макетов на основе grid или flexbox, предоставляя краткое описание для задания промежутков между элементами grid или flexbox как в строках, так и в столбцах.

Чтобы понять свойство gap, давайте рассмотрим его использование в контексте grid и flexbox отдельно.

Gap и Grid макеты

В макетах grid свойство gap задает расстояние между элементами сетки как по горизонтали, так и по вертикали. Оно позволяет управлять расстоянием между строками и столбцами в одном объявлении.

Синтаксис установки gap в макетах grid выглядит следующим образом:

.container {
  display: grid;
  gap: <row-gap> <column-gap>;
}

Значения <row-gap> и <column-gap> представляют собой расстояние между строками и столбцами соответственно. Для определения интервала можно использовать любое допустимое значение длины CSS или ключевое слово, например normal. Если указано только одно значение, оно применяется как к строкам, так и к столбцам.

Рассмотрим пример, который устанавливает grid-контейнер с 20-пиксельным промежутком между строками и 10-пиксельным промежутком между столбцами:

.container {
  display: grid;
  gap: 20px 10px;
}

С помощью этого CSS элементы grid внутри контейнера будут иметь заданные промежутки между строками и столбцами, создавая визуально привлекательный макет.

Пробелы в макетах Flexbox

В макетах flexbox свойство gap устанавливает расстояние между элементами flex вдоль главной оси, которая обычно является горизонтальной. Это упрощает процесс создания гибких и равномерно расположенных макетов.

Синтаксис для установки зазора в макетах flexbox выглядит следующим образом:

.container {
  display: flex;
  gap: <gap-size>;
}

Значение <gap-size> представляет собой расстояние между элементами flex. Для определения промежутка можно использовать любое допустимое значение длины CSS или ключевое слово, например normal.

Вот пример, который устанавливает flex-контейнер с gap в 10 пикселей между элементами flex:

.container {
  display: flex;
  gap: 10px;
}

С помощью этого CSS элементы flex внутри контейнера будут располагаться с gap в 10 пикселей вдоль главной оси, создавая визуально приятный и равномерно распределенный макет.

2. font-display

Одним из часто упускаемых из виду аспектов веб-разработки является загрузка и рендеринг пользовательских шрифтов. Свойство font-display позволяет управлять отображением загружаемого шрифта до его полной загрузки или в случае сбоя загрузки.

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap;
}

Используя font-display в объявлении @font-face, вы можете управлять отображением шрифтов с помощью простой строки CSS. Это устраняет необходимость в сложных обходных решениях JavaScript. Свойство предлагает пять значений на выбор:

• auto: значение по умолчанию, и оно ведет себя так, как будто свойство не используется. Браузер скрывает текст, используя пользовательские шрифты, до завершения загрузки, а затем отображает текст.
• block: при этом значении браузер сокращает время, в течение которого он скрывает текст в ожидании загрузки пользовательского шрифта, что позволяет быстрее отображать резервный шрифт. Однако браузер будет бесконечно ждать пользовательского шрифта и заменит его, как только он станет доступен.
• swap: наиболее часто используемое значение. При загрузке пользовательского шрифта сразу отображается резервный текст. Как только пользовательский шрифт готов, он заменяет резервный шрифт. Такое поведение соответствует решениям на основе JavaScript, которые использовались в прошлом.
• fallback: при этом значении в течение короткого периода ожидания пользовательского шрифта текст будет оставаться невидимым. Если пользовательский шрифт не будет готов в течение определенного времени (около 100 мс), используется резервный шрифт. Однако, если пройдет слишком много времени, резервный шрифт будет использоваться до конца срока службы страницы.
• optional: как и в случае с fallback, это значение также содержит короткий промежуток невидимого текста, за которым следует резервный шрифт, если пользовательский шрифт еще не готов. Разница в том, что при выборе optional браузер может сам решать, загружать и использовать шрифт или нет. Это может быть полезно для использования с несущественными шрифтами или при обслуживании пользователей с медленным подключением.

3. backdrop-filter

Свойство background-filter позволяет применять графические эффекты к области позади элемента, обычно называемой фоном. Оно открывает новые возможности для создания визуально привлекательных дизайнов путем добавления размытия, корректировки цвета и других эффектов фильтра к фону элемента.

Синтаксис свойства background-filter выглядит следующим образом:

.element {
  backdrop-filter: <filter-effects>;
}

Значение <filter-effects> определяет конкретные графические эффекты, которые будут применены к фону. Вы можете использовать различные функции фильтров, такие как blur(), brightness(), saturate() и другие, для создания различных визуальных эффектов.

Вот пример применения эффекта размытия к фону элемента:

.element {
  backdrop-filter: blur(10px);
}

С помощью этого CSS фон за элементом будет размыт на 10 пикселей, создавая визуально привлекательный эффект.

4. scroll-snap

Свойство scroll-snap предназначено для улучшения качества прокрутки, позволяя контенту перемещаться в определенное положение после прокрутки. Оно обеспечивает плавный и точный режим прокрутки, особенно в ситуациях, когда требуется прокрутка ряда элементов или разделов.

Свойство scroll-snap имеет различные вспомогательные свойства, которые управляют различными аспектами поведения прокрутки. Здесь мы рассмотрим наиболее часто используемые из них: scroll-snap-type и scroll-snap-align.

scroll-snap-type

Свойство scroll-snap-type задает поведение привязки для контейнера с прокруткой. Оно определяет, должен ли контейнер привязываться к определенным позициям во время прокрутки и в каком направлении.

Синтаксис свойства scroll-snap-type выглядит следующим образом:

.container {
  scroll-snap-type: <behavior> <axes>;
}

Значение <behavior> определяет поведение привязки и может быть установлено в один из следующих вариантов:

• none: режим привязки не применяется.
• mandatory: Контейнер привязывается к ближайшей точке привязки, гарантируя, что при прокрутке всегда будет зафиксировано положение привязки.
• proximity: контейнер привязывается к ближайшей точке привязки, если движение прокрутки останавливается в пределах определенного порога.

Значение <axes> определяет оси прокрутки, к которым следует применять режим привязки, и может быть настроено на один из следующих параметров:

• none: режим привязки не применяется ни к одной оси.
• both: режим привязки применяется как к горизонтальной, так и к вертикальной осям.
• block: к оси блока применяется режим привязки (вертикальная прокрутка).
• inline: режим привязки применяется к встроенной оси (горизонтальная прокрутка).

Вот пример, который настраивает привязку контейнера к определенным позициям как по горизонтали, так и по вертикали:

.container {
  scroll-snap-type: mandatory both;
}

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

scroll-snap-align

Свойство scroll-snap-align управляет выравниванием позиций привязки в контейнере прокрутки. Оно определяет, как контейнер прокрутки выравнивается по точкам привязки при остановке прокрутки.

Синтаксис свойства scroll-snap-align выглядит следующим образом:

.element {
  scroll-snap-align: <alignment>;
}

Значение <alignment> определяет режим выравнивания и может быть установлено в один из следующих вариантов:

• none: к позициям с привязкой выравнивание не применяется.
• start: контейнер прокрутки выравнивает позиции привязки по началу контейнера.
• end: контейнер для прокрутки выравнивает позиции привязки по краю контейнера.
• center: контейнер для прокрутки выравнивает позиции привязки по центру контейнера.

Вот пример, который выравнивает привязанные позиции по началу контейнера прокрутки:

.container {
  scroll-snap-align: start;
}

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

Свойство scroll-snap предоставляет мощный способ улучшить качество прокрутки и создать интуитивно понятную навигацию по разделам или элементам.

5. contain

Свойство contain - это ценный инструмент для оптимизации веб-страниц, особенно со сложными макетами или многочисленными виджетами. Оно позволяет ограничить область применения стилей, макета и перерасчета цвета определенными частями DOM, повышая производительность и сводя к минимуму ненужную работу по рендерингу.

С помощью contain вы можете указать, что элемент и его содержимое должны быть как можно более независимыми от остальной части дерева документов. Изменяя область пересчета браузера, вы можете сократить количество вычислений и повысить производительность. Это свойство особенно полезно при работе с веб-компонентами и компонентами React, где локализация может помочь изолировать влияние изменений. Оно имеет несколько значений:

• none: значение по умолчанию, при котором эффекты сдерживания не применяются.
• size: Включение ограничения размера означает, что размер элемента может быть изменен без необходимости проверки его потомков, что оптимизирует расчеты компоновки.
• layout: включив ограничение компоновки, вы указываете, что ничто за пределами элемента не может повлиять на его внутреннюю компоновку, и наоборот.
• style: значение включает ограничение стиля, предотвращая воздействие на него свойств, которые могут влиять на элементы, находящиеся за пределами контейнера. Это улучшает изоляцию стилей.
• paint: включение paint ограничения контента гарантирует, что дочерние элементы контейнера не будут отображаться за его пределами. Это особенно полезно для элементов, находящихся за пределами экрана, или невидимых элементов, таких как мобильные меню.
• strict: Это значение объединяет все формы ограничения, за исключением none (contain: size layout style paint), обеспечивая всестороннее ограничение.
• content: Аналогично значению strict, но без size, это значение объединяет все другие значения ограничения, кроме размера.

Вот пример использования свойства contain:

.container {
  contain: strict;
}

Важно отметить, что поддержка contain в браузерах по-прежнему ограничена, и реализация каждого браузера может иметь частичную поддержку.

6. conic-gradient

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

Синтаксис функции conic-gradient выглядит следующим образом:

.element {
  background-image: conic-gradient(<angle>, <color-stop-1>, <color-stop-2>, ...);
}

Значение <angle> представляет собой начальный угол градиента, измеряемый в градусах или радианах. Оно определяет направление, из которого исходят цвета. Значения <color-stop> определяют цвета и их расположение вдоль градиента.

Вот пример, который создает конический градиент, начинающийся сверху и вращающийся по часовой стрелке:

.element {
  background-image: conic-gradient(0deg, red, blue, green);
}

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

Вы также можете использовать цветовые переходы, чтобы определить конкретные позиции для каждого цвета в градиенте. Вот пример, который создает конический градиент с цветовыми переходами:

.element {
  background-image: conic-gradient(red 0%, blue 50%, green 100%);
}

В этом случае градиент начинается с красного при 0%, переходит в синий при 50% и заканчивается зеленым при 100%.

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

7. clip-path

Свойство clip-path позволяет создавать уникальные фигуры и применять обрезку к элементам. Хотя оно обычно используется с изображениями, его можно творчески использовать с другими элементами, такими как абзацы, для отображения только части содержимого. С помощью clip-path у вас есть возможность скрывать определенные области элемента и создавать визуально эффектные дизайны.

Синтаксис свойства clip-path выглядит следующим образом:

.element {
  clip-path: <clip-source> | <basic-shape> | <geometry-box> | none;
}

Эти значения имеют следующие значения:

• clip-source: URL-адрес, ссылающийся на внутренний или внешний элемент SVG <clipPath>.
• basic-shape: базовая функция shape, определенная в спецификации CSS Shapes.
• geometry-box: Используется в сочетании с <basic-shape>, обеспечивая опорный блок для базовой формы.
• none: отсечение не применяется.

Если вы ищете интерактивный инструмент для экспериментов с clip-path, ознакомьтесь с clippy, который позволяет вам играть с различными формами и генерировать соответствующий CSS-код.

8. writing-mode

Свойство writing-mode позволяет вам управлять расположением строк текста — по горизонтали или вертикали — и направлением, в котором перемещаются блоки. Хотя это свойство и не является совершенно новым, оно все еще незнакомо многим разработчикам. Его стоит изучить, поскольку он обеспечивает гибкость в оформлении текста, особенно при работе с языками, требующими вертикального или бокового написания.

Свойство writing-mode поддерживает следующие значения:

• horizontal-tb: содержимое перемещается по горизонтали слева направо и по вертикали сверху вниз. Следующая горизонтальная строка расположена ниже предыдущей.
• vertical-rl: содержимое перемещается по вертикали сверху вниз и по горизонтали справа налево. Следующая вертикальная строка расположена слева от предыдущей строки.
• vertical-lr: содержимое перемещается по вертикали сверху вниз и по горизонтали слева направо. Следующая вертикальная строка расположена справа от предыдущей строки.
• sideways-rl: содержимое перемещается вертикально сверху вниз, и все глифы, даже те, которые написаны вертикальным шрифтом, расположены боком вправо.
• sideways-lr: содержимое перемещается вертикально сверху вниз, и все глифы, даже те, которые написаны вертикальным шрифтом, расположены слева направо.

Последние два значения в настоящее время поддерживаются только Firefox.

Важно отметить, что влияние writing-mode может быть не сразу заметно в таких языках, как английский, но оно становится более значительным при работе с языками, требующими вертикальной или боковой ориентации. Чтобы получить полное представление об этом свойстве, рекомендуется поэкспериментировать с различными языками и макетами текста.

Вот пример, иллюстрирующий, как работает свойство writing-mode:

.container {
  writing-mode: vertical-rl;
}

Применяя writing-mode: vertical-rl к элементу контейнера, содержимое внутри этого элемента будет перемещаться вертикально сверху вниз, а глифы будут расположены сбоку вправо. Это свойство может быть полезно для создания уникальных и визуально привлекательных дизайнов, особенно в тех случаях, когда требуется вертикальный или боковой текст.

9. aspect-ratio

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

Настройка соотношения сторон элемента может быть особенно полезна при работе с адаптивным дизайном или когда вы хотите сохранить определенные визуальные пропорции. Например, вы можете захотеть создать контейнер для изображений, в котором всегда поддерживается соотношение сторон 16:9, что гарантирует правильное отображение изображений независимо от их исходных размеров.

Синтаксис свойства aspect-ratio прост:

.element {
  aspect-ratio: <width> / <height>;
}

Значения <width> и <height> представляют желаемое соотношение сторон элемента. Вы можете использовать любое допустимое значение длины CSS как для ширины, так и для высоты. Соотношение сторон может быть выражено в десятичной, дробной или процентной форме.

Рассмотрим пример, в котором для контейнера устанавливается соотношение сторон 16:9:

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

Применяя этот CSS, контейнер всегда будет поддерживать соотношение сторон 16:9, независимо от его содержимого или размера окна просмотра. Это особенно полезно при работе с адаптивным дизайном, когда элементы должны адаптироваться к различным размерам экрана, сохраняя при этом соотношение сторон.

Заключение

Включение этих малоизвестных свойств CSS в ваши проекты не только расширит ваши знания, но и предоставит вам дополнительные инструменты для создания замечательных дизайнов и оптимизации производительности.

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