Выделение таких элементов может оказаться полезным для тех посетителей сайта, которые попали на страницу по внешней ссылке вроде www.example.com/#foo. При таком подходе браузер прокрутит страницу к нужному элементу и этот элемент окажется выделенным. В наши дни так поступают редко, но этот приём способен улучшить впечатления пользователей от работы с сайтом.

→ Пример

Малоизвестные возможности content: «foo»;

▍Атрибуты данных

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

div:before {
 content: attr(data-text);
}

→ Пример

Этот приём может оказаться полезным, если, например, нужно перевести текст псевдо-класса (скажем, используя его для всплывающих подсказок). Сейчас с помощью attr() можно работать лишь с контентом. Хотя не исключено появление поддержки этой конструкцией других свойств. Более того, значения, получаемые из attr() — это строки, поэтому они предназначены, в первую очередь, для контента и не могут использоваться для свойств, задающих размеры (например — font-size), или для ссылок (например, content: url()). Кстати, поговорим об этом.

▍Content: url ()

Данную конструкцию можно использовать для многих видов данных (изображения, звуки, видео). Например:

div:before {
 content: url(image.jpg);
}

→ Пример

Однако если из DOM в CSS надо передавать произвольные данные, придётся обратиться к вышеописанным кастомным свойствам:

div:after {
 content: '';
 background-image: var(--background-image);
}

▍Инкрементальный счётчик

Конструкцию content: counter() можно использовать для инкрементной нумерации псевдо-элементов:

p {
 counter-increment: myIndex;
}
p:before {
 content:counter(myIndex);
}
foo
bar

→ Пример

▍Открывающие и закрывающие кавычки

Свойство content псевдо классов вроде :before и :after может быть использовано для добавления к элементам открывающих и закрывающих кавычек:

q:before {
 content: open-quote;
}
q:after {
 content: close-quote;
}

Если говорить о кавычках, то скомбинировав этот приём с ранее упомянутым выбором атрибутов данных, можно даже использовать CSS для задания специфического локализованного стиля кавычек, основанного на языке сайта, с применением одного лишь свойства quotes:

html[lang="fr"] q {
 Quotes: "«" "»";
}

Использование свойства font

Свойство font позволяет, в сокращённом формате, задавать параметры шрифтов:

h1 {
 font-weight: bold;
 font-style: italic;
 font-size: 1rem;
 //etc…
}
// комбинированный вариант
h1 {
 font: italic lighter 1rem/150% Verdana, Helvetica, sans-serif;
}
// синтаксис
// font: font-style font-variant font-weight font-size/line-height font-family;

Директива supports

Директиву @supports можно использовать для проверки того, поддерживает ли браузер возможности, интересующие разработчика. Скажем, если display:flex планируется использовать только в том случае, если есть уверенность в поддержке этой возможности браузером, можно применить следующую конструкцию:

@supports (display: flex) {
 div {
   display: flex;
 }
}

Двоеточия в именах классов

Использование двоеточий в именах классов может оказаться полезным для создания более понятных имён, которые, при чтении, легче делить на части. Так, например, некоторые CSS UI-фреймворки (вроде Tailwind) используют следующие соглашения по именованию:

Button

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

Для использования двоеточий в CSS их нужно экранировать:

.sm\:justify-center { }

Трёхэлементный селектор

Все, кто читают этот материал, должны знать о CSS-селекторе, состоящем из трёх элементов, который обычно называют «lobotomized owl selector». Вот как он выглядит:

* + * {
 margin-top: 2rem;
}

Он придётся кстати в ситуациях, когда имеется множество элементов одного вида, между которыми должен быть отступ, причём, после последнего элемента такого списка отступ не нужен:

li + li {
 margin-top: 1rem;
}
// вместо
li {
 margin-bottom: 1rem;
}
li:last-of-type {
  margin-bottom: 0;
}

Вертикальное выравнивание методом «douchebag vertical align»

Раз уж мы заговорили о необычных селекторах — вспомним и о методике вертикального выравнивания, называемой «douchebag vertical align»:

.element {
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}

Свойство font-feature-settings для шрифтов OpenType

Шрифты OpenType поддерживают настройку свойств. Эту особенность можно использовать для подгонки шрифта под нужды конкретного проекта благодаря свойству font-feature-settings.

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

font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;

Обрезка текста с добавлением окончания в виде многоточия,»…»

Тут всё предельно просто:

p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

→ Пример

Итоги

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

Уважаемые читатели! Знаете ли вы о каких-нибудь возможностях CSS, полезных, но не получивших широкой известности?

© Habrahabr.ru