Генерируемое содержимое, автоматическая нумерация и списки
В некоторых случаях бывает необходимо, чтобы пользовательские агенты (ПА) отображали содержимое не из дерева документа. Известный пример - нумерованный список: автор не хочет, чтобы нумерация выводилась явным образом, он или она хотят, чтобы ПА генерировал нумерацию автоматически. Также автор может пожелать, чтобы ПА вставлял слово "Figure" перед заглавием или фигурой или "Chapter 7" в начале 7 главы. В особенности для аудио и брайль-носителей, ПА должны иметь возможность вставить эти строки.
В CSS2 содержимое может генерироваться с помощью различных механизмов:
- Свойство 'content' в сочетании с псевдоэлементами :before и :after.
- Звуковые свойства 'cue-before' и 'cue-after' (см. главу "Звуковые таблицы стилей" ). Если свойство 'content' комбинируется со звуковыми свойствами, то они выводятся в следующем порядке: :before, 'cue-before', ('pause-before'), содержимое элемента, ('pause-after'), 'cue-after' и :after.
- Элементы со значением 'list-item' для свойства 'display'.
Ниже описаны механизмы, ассоциированные со свойством 'content'.
Псевдоэлементы :before и :after
Авторы специфицируют стиль и размещение генерируемого содержимого с помощью псевдоэлементов :before и :after. Как видно из их имён, псевдоэлементы :before и :after специфицируют размещение содержимого до и после содержимого дерева документа элемента. Свойство 'content' в соединении с этими псевдоэлементами специфицирует, что же будет вставлено.
Следующее правило вставляет строку "Note: " перед содержимым каждого элемента P, чей атрибут "class" имеет значение "note":
P.note:before { content: "Note: " }
Форматирующие объекты (напр., боксы), генерируемые элементом, включают генерируемое содержимое. Так, например, изменение вышеприведённой таблицы стилей:
P.note:before { content: "Note: " } P.note { border: solid green }
вызовет появление сплошной зелёной рамки вокруг параграфа, включая начальную строку.
Псевдоэлементы :before и :after наследуют любые наследуемые свойства из тех элементов дерева документа, к которым они присоединены.
Следующие правила вставляют открывающий знак кавычек перед каждым элементом Q. Цвет знака кавычки - красный, но шрифт будет тот же, что и шрифт остальной части элемента Q:
Q:before { content: open-quote; color: red }
В объявлениях псевдоэлементов :before или :after ненаследуемые свойства получают свои начальные значения.
Так, например, поскольку начальное значение свойства 'display' - 'inline', кавычка в предыдущем примере вставляется как инлайн-бокс (т.е. на той же самой строке, что и содержимое начального текста элемента). В следующем примере свойство 'display' явно устанавливается в 'block', так что вставленный текст становится блоком:
BODY:after { content: "The End"; display: block; margin-top: 2em; text-align: center; }
Обратите внимание, что пользователи аудио-ПА услышат слова "The End" после вывода оставшейся части содержимого BODY.
ПА обязаны игнорировать следующие свойства при наличии псевдоэлементов :before и :after: 'position', 'float', свойства списков и таблиц.
Псевдоэлементы :before и :after допускают значения свойства 'display':
-
Если субъект селектора является элементом уровня блока, допустимыми значениями будут 'none', 'inline', 'block' и 'marker'.
Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'block'.
-
Если субъект селектора является инлайн-элементом, допустимыми значениями будут 'none' и 'inline'.
Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'inline'.