CSS свойство content

При помощи данного свойства можно дополнять содержание страницы генерируемыми фрагментами текста, не предусмотренными в первоначальной HTML разметке документа. Такая возможность предоставляется веб разработчикам начиная с CSS2. Эта спецификация допускает применение свойства content только в комбинации с псевдоэлементами :before и :after.

Таким образом, в результирующее дерево документа включаются псевдоэлементы, содержимое которых формируется «на лету», и плоды таких преобразований отображаются в окне браузера. В качестве значений для рассматриваемого свойства могут использоваться несколько ключевых слов, которые рассматриваются ниже. Зачастую в сочетании со свойством content дополнительно применяют CSS свойство display, позволяющее задать форму отображения псевдоэлемента, содержащего сгенерированные данные.

CSS свойство content


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

1. Строка. Это значение позволяет добавить в содержание документа фрагмент текста, предварительно заключенный в кавычки (двойные или одинарные).
2. Функция attr(). Если в качестве значения использована эта функция, то генерируемый контент содержит строку, являющуюся значением параметра, который передан функции attr() в качестве аргумента. Если такой атрибут соответствующего элемента отсутствует, то возвращается пустая строка.
3. open-quote или close-quote. Эти значения дают возможность установить необходимую кавычку (открывающую либо закрывающую), тип которой определяется CSS свойством quote.
4. no-open-quote или no-close-quote. Значения, использующиеся для отмены открывающей и/или закрывающей кавычек в генерируемом содержимом псевдоэлемента.
5. url. В качестве значения применяется адрес ресурса (абсолютный или относительный), внедряемого как новое содержимое в структуру документа. Если браузер не может отобразить указанный объект, то значение этого параметра игнорируется.
6. counter. Это значение позволяет выводить показания счетчика, определенного свойством counter-reset.
7. none. Отменяет ранее установленное значение для свойства content.
8. normal. Значение по умолчанию. В нормальных условиях отображения документа значение этого свойства установлено в none
9. inherit. Значение свойства content наследуется от аналогичного родительского свойства, если оно установлено.

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

Если вы используете в качестве значения URI адрес, то имейте в виду, что действующая спецификация CSS2 не позволяет изменять размерность встраиваемого объекта и сопровождать его дополнительными текстовыми пояснениями, определяемыми атрибутами «alt» и «longdesc», что не всегда удобно.

В случае со значением counter для вывода показаний счетчика можно воспользоваться одной из следующих функций:

— counter() эта функция может использоваться как с одним аргументом (counter(name)), определяющим имя счетчика, так и со вторым необязательным аргументом (counter(name, [list-style-type])), позволяющим определять стиль оформления элементов списка при помощи одного из предусмотренных для этого значений (decimal, upper-roman, upper-latin и т.д.). По умолчанию установлен стиль decimal;

— counters() может применяться с двумя аргументами (counters(name, string)), а так же как и в случае с функцией counter() может содержать третий аргумент list-style-type с теми же оговорками. Данная функция позволяет отображать значения нескольких предопределенных счетчиков, идентификаторы которых перечисляются через пробел в качестве первого аргумента. Второй аргумент (string) нужен для установки разделителя значений счетчиков в генерируемом содержимом, при этом разделитель заключается в кавычки.

Для того чтобы избежать ошибок при отображении значения определенного атрибута элемента (функция attr()) необходимо учитывать особенности языка разработки, синтаксис которого может требовать указания имен атрибутов с учетом регистра (к примеру, язык XML). И в случае необходимости, для атрибута можно указывать область имен, к которой он принадлежит (attr(name_space | attribute_name)), что позволяет избежать конфликта имен.

Если вы используете свойство content для вывода фрагмента текста (значение string), то в этом случае можно применять спецсимволы, но определяя их при этом только соответствующими значениями Юни кода (например, «A» – перевод строки). Не используйте для указания спецсимволов их мнемонику или числовой код, начинающийся с амперсанда (или неразрывный пробел), так как в этом случае получите обратный эффект от их использования – вместо спецсимволов будут отображаться введенные вами кодировки.

Если содержание, которое вы генерируете при помощи CSS свойства content, может некорректно обрабатываться отдельными медиа устройствами, то в этом случае данное свойство должно размещаться в пределах правил, ограничивающих действие указанных свойств стилевого форматирования для определенных видов медиа устройств (@media screen, print, aural, braille и т.д.). Такая конструкция определяет правила взаимодействия стилей CSS с указанным видом устройств.

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

One thought on “CSS свойство content”

  1. И зачем это? Если содержимое постоянно меняется, то поисковики индексировать не будут, а наоборот заблокируют

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

  bigmir)net TOP 100  - .  E-mail: sitesnulyaru@gmail.com