От автора: несколько недель назад Стефан опубликовал на своем веб-сайте пост под названием Свойство CSS «content» принимает альтернативный текст, что поразило меня. Он показал, что свойство content принимает 2 значения, а не только 1, фактическое содержимое и альтернативный текст.
Простой пример:
|
1 2 3 4 |
.new-item::before { /* "Highlighted item" и элемент содержимого */ content: "icon" / "Highlighted item"; } |
Я не знал этого, и мне было интересно, есть ли еще вещи, которых я не знал о свойстве content.
Как я использую атрибут content
До того, как я начал свое исследование, я использовал это свойство в первую очередь для 3 вещей.
Добавление элемента в другой элемент с использованием псевдо-элементов
Если я хочу создать в CSS простую фигуру, которая не является прямоугольником или кругом, я использую :after и ::before, чтобы дать себе больше возможностей для стилизации.
|
1 |
<div></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
div { width: 70px; height: 50px; margin-top: 15px; border: 5px solid #123456; border-radius: 5px; position: relative; } div::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; width: 20px; height: 20px; margin: auto; border: solid #123456; border-width: 5px 5px 0 0; border-radius: 5px; transform: rotate(-45deg); background: #fff; } |
Посмотрите Пример 1 на CodePen.
Для отображения на экране псевдо-элементам необходим атрибут content.
Выявление URL-адресов в таблицах стилей для печати
Печатные ссылки бесполезны, если вы не знаете, куда они ведут. Я использую комбинацию content и функции attr() в таблицах стилей печати для отображения URL-адресов рядом со связанным текстом.
|
1 2 3 4 5 6 |
@media print { a[href^="//"]:after, a[href^="//"]:after { content: " (" attr(href) ")"; } } |
Пользовательские счетчики
Время от времени мне нужно создавать пользовательские счетчики в списках. Комбинация content и свойств счетчиков обычно справляется с этим очень хорошо.
|
1 2 3 4 5 |
<ol> <li>Element 001</li> <li>Element 002</li> <li>Element 003</li> </ol> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
ol { list-style-type: none; counter-reset: mylist; } li { counter-increment: mylist; } li::before { content: "icon " counter(mylist) ": " } |
Посмотрите на то, что я не знал о list-style-type, чтобы узнать о других возможностях для стилизации элементов списка. Теперь посмотрим, что еще content может сделать для нас. Вот что я недавно узнал.
content принимает изображения и градиенты
Я знал, что content принимает функции counter и attr, но мне никогда не приходило в голову, что оно может также принимать другие функции. Всякий раз, когда мне нужно изображение в псевдо-элементе, я бы использовал background-image, хотя и content подходит для этого.
|
1 2 3 |
div::before { content: url('pin.png'); } |
Если это работает с изображениями, то должно работать и с градиентами, верно? Но нет. Похоже, что Chrome — единственный браузер, который отображает псевдо-элементы с градиентными значениями content.
|
1 2 3 4 5 6 7 |
div::before { content: linear-gradient(blue, red); height: 50px; width: 50px; display: block; border: 1px solid red; } |
Вы можете определить альтернативный текст для значений content (… в Chrome)
Какой смысл использовать content, когда background-image поддерживается лучше? Причина, по которой Стефан написал свой пост, состоит в том, что content поддерживает альтернативный текст.
|
1 2 3 |
div::before { content: url('pin.png') / "You are here." } |
К сожалению, это работает только в Chrome (протестировано на macOS 10.15.4, Chrome 81 с VoiceOver). Firefox и Safari даже не отображают псевдо-элемент, потому что значение недопустимо. К сожалению.
Даже если бы это работало в большинстве браузеров, я бы не рекомендовал добавлять текстовый контент в файл CSS. Другие, работающие над проектом, вероятно, не ожидают, что текст исходит из файла CSS, на сайтах с несколькими языками могут возникнуть проблемы, автоматический перевод может не сработать, а содержимое будет доступно только в случае успешной загрузки CSS.
Вы можете комбинировать текст и изображения
Я также не знал, что вы можете использовать в качестве значения функцию url(), я также не знал, что вы можете комбинировать ее с текстом.
|
1 2 3 |
div::before { content: url('pin.png') "You are here." } |
Вы можете заменить только content обычного элемента на image
Свойство content предназначено для использования с псевдо-элементами. Вы не можете использовать его для замены строки в элементе другой строкой. Это не сработает:
|
1 2 3 |
div { content: "You are here"; } |
Но вы можете использовать его для замены строки изображением. Строка все еще находится в DOM, но программы чтения с экрана объявляют имя файла. (Вы можете сделать это, но я бы не советовал.)
|
1 |
<div>You are here!</div> |
|
1 2 3 |
div { content: url('pin.png'); } |
С кавычками и без кавычек
Хорошо, теперь действительно крутая вещь. Допустим, у нас есть цитата, вложенная в другую цитату.
|
1 2 3 4 5 6 |
<blockquote> My mama always said, <q> Life was like a box of chocolates. You never know what you’re gonna get </q>. </blockquote> |
Вы видите в приведенном выше примере, что blockquote не имеет кавычек, q имеет двойные кавычки.
Если мы с помощью псевдо-элемента и свойства content добавим открывающие и закрывающие кавычки к blockquote, то blockquote будет отображаться с двойными кавычками, а q автоматически с одинарными.
|
1 2 3 4 5 6 7 |
blockquote::before { content: open-quote } blockquote::after { content: close-quote } |
Отлично! Чтобы завершить все это, мы можем даже получить комбинацию blockquote без кавычек и q с одинарными кавычками.
|
1 2 3 4 5 6 7 |
blockquote::before { content: no-open-quote; } blockquote::after { content: no-close-quote; } |
Ключевые слова no-open-quote и no-close-quote не вставляют ничего, но увеличивают глубину цитирования на один.
Вложенные цитаты на разных языках
Просто потому, что мне было любопытно, вот некоторые варианты второго примера на других языках. Французский:
|
1 2 3 4 5 6 |
<blockquote lang="fr"> Maman disait toujours, <q> la vie, c'est comme une boîte de chocolats: on ne sait jamais sur quoi on va tomber </q>. </blockquote> |
Русский:
|
1 2 3 4 5 6 |
<blockquote lang="ru"> Моя мама всегда говорила, <q> Жизнь как коробка шоколадных конфет: никогда не знаешь, какая начинка тебе попадётся </q>. </blockquote> |
Немецкий:
|
1 2 3 4 5 6 |
<blockquote lang="de"> Mama hat immer gesagt, <q> Das Leben ist wie eine Schachtel Pralinen. Man weiß nie, was man kriegt </q>. </blockquote> |
Испанский:
|
1 2 3 4 5 6 |
<blockquote lang="es"> Mi mamá siempre decía, <q> La vida es como una caja de bombones, nunca sabes lo que vas a conseguir </q>. </blockquote> |
Извините, если я облажался с каким-либо из переводов.
Есть counter() и есть counters()
Я действительно не уверен, знал ли я о том, что есть не только функция counter(), но и функция counters(). Разница в том, что counters() включает вложенные пользовательские счетчики.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ol> <li> Element 001 <ol> <li>Element 001</li> <li>Element 002</li> <li>Element 003</li> </ol> </li> <li>Element 002</li> <li>Element 003</li> </ol> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
ol { list-style-type: none; counter-reset: mylist; } li { counter-increment: mylist; } li::before { content: "icon " counters(mylist, ".") ": " } |
Вау, это было многословно. Я не ожидал так много напишу и так многому научусь. Я надеюсь, что вы узнали столько же, сколько и я. Спасибо за чтение и спасибо Стефану за вдохновение для этого поста.
Автор: Manuel Matuzovic
Источник: //www.matuzo.at
Редакция: Команда webformyself.
