Вот что я не знал о «content»

Вот что я не знал о «content»

От автора: несколько недель назад Стефан опубликовал на своем веб-сайте пост под названием Свойство CSS «content» принимает альтернативный текст, что поразило меня. Он показал, что свойство content принимает 2 значения, а не только 1, фактическое содержимое и альтернативный текст.

Простой пример:

Я не знал этого, и мне было интересно, есть ли еще вещи, которых я не знал о свойстве content.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Как я использую атрибут content

До того, как я начал свое исследование, я использовал это свойство в первую очередь для 3 вещей.

Добавление элемента в другой элемент с использованием псевдо-элементов

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

Посмотрите Пример 1 на CodePen.

Для отображения на экране псевдо-элементам необходим атрибут content.

Выявление URL-адресов в таблицах стилей для печати

Печатные ссылки бесполезны, если вы не знаете, куда они ведут. Я использую комбинацию content и функции attr() в таблицах стилей печати для отображения URL-адресов рядом со связанным текстом.

Пользовательские счетчики

Время от времени мне нужно создавать пользовательские счетчики в списках. Комбинация content и свойств счетчиков обычно справляется с этим очень хорошо.

Пример 2 на CodePen.

Посмотрите на то, что я не знал о list-style-type, чтобы узнать о других возможностях для стилизации элементов списка. Теперь посмотрим, что еще content может сделать для нас. Вот что я недавно узнал.

content принимает изображения и градиенты

Я знал, что content принимает функции counter и attr, но мне никогда не приходило в голову, что оно может также принимать другие функции. Всякий раз, когда мне нужно изображение в псевдо-элементе, я бы использовал background-image, хотя и content подходит для этого.

Пример 3 на CodePen.

Если это работает с изображениями, то должно работать и с градиентами, верно? Но нет. Похоже, что Chrome — единственный браузер, который отображает псевдо-элементы с градиентными значениями content.

Пример 4 на CodePen.

Вы можете определить альтернативный текст для значений content (… в Chrome)

Какой смысл использовать content, когда background-image поддерживается лучше? Причина, по которой Стефан написал свой пост, состоит в том, что content поддерживает альтернативный текст.

Пример 5 на CodePen.

К сожалению, это работает только в Chrome (протестировано на macOS 10.15.4, Chrome 81 с VoiceOver). Firefox и Safari даже не отображают псевдо-элемент, потому что значение недопустимо. К сожалению.

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

Вы можете комбинировать текст и изображения

Я также не знал, что вы можете использовать в качестве значения функцию url(), я также не знал, что вы можете комбинировать ее с текстом.

Пример 6 на CodePen.

Вы можете заменить только content обычного элемента на image

Свойство content предназначено для использования с псевдо-элементами. Вы не можете использовать его для замены строки в элементе другой строкой. Это не сработает:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Но вы можете использовать его для замены строки изображением. Строка все еще находится в DOM, но программы чтения с экрана объявляют имя файла. (Вы можете сделать это, но я бы не советовал.)

Пример 7 на CodePen.

С кавычками и без кавычек

Хорошо, теперь действительно крутая вещь. Допустим, у нас есть цитата, вложенная в другую цитату.

Вы видите в приведенном выше примере, что blockquote не имеет кавычек, q имеет двойные кавычки.

Если мы с помощью псевдо-элемента и свойства content добавим открывающие и закрывающие кавычки к blockquote, то blockquote будет отображаться с двойными кавычками, а q автоматически с одинарными.

Отлично! Чтобы завершить все это, мы можем даже получить комбинацию blockquote без кавычек и q с одинарными кавычками.

Ключевые слова no-open-quote и no-close-quote не вставляют ничего, но увеличивают глубину цитирования на один.

Вложенные цитаты на разных языках

Просто потому, что мне было любопытно, вот некоторые варианты второго примера на других языках. Французский:

Русский:

Немецкий:

Испанский:

Извините, если я облажался с каким-либо из переводов.

Есть counter() и есть counters()

Я действительно не уверен, знал ли я о том, что есть не только функция counter(), но и функция counters(). Разница в том, что counters() включает вложенные пользовательские счетчики.

Пример 8 на CodePen.

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

Автор: Manuel Matuzovic

Источник: https://www.matuzo.at

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий