Евгений Резниченко - Спецификация CSS2

Лекция 12. Генерируемое содержимое, автоматическая нумерация и списки

В некоторых случаях бывает необходимо, чтобы пользовательские агенты (ПА) отображали содержимое не из дерева документа. Известный пример - нумерованный список: автор не хочет, чтобы нумерация выводилась явным образом, он или она хотят, чтобы ПА генерировал нумерацию автоматически. Также автор может пожелать, чтобы ПА вставлял слово "Figure" перед заглавием или фигурой или "Chapter 7" в начале 7 главы. В особенности для аудио и брайль-носителей, ПА должны иметь возможность вставить эти строки.

В CSS2 содержимое может генерироваться с помощью различных механизмов:

[x]. Свойство 'content' в сочетании с псевдоэлементами :before и :after.

[x]. Звуковые свойства 'cue-before' и 'cue-after' (см. главу звуковые таблицы стилей). Если свойство 'content' комбинируется со звуковыми свойствами, то они выводятся в следующем порядке: :before, 'cue-before', ('pause-before'), содержимое элемента, ('pause-after'), 'cue-after' и :after.

[x]. Элементы со значением 'list-item' для свойства 'display'.

Ниже описаны механизмы, ассоциированные со свойством 'content'.

Авторы специфицируют стиль и размещение генерируемого содержимого с помощью псевдоэлементов :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':

[x].

Если субъект селектора является элементом уровня блока, допустимыми значениями будут 'none', 'inline', 'block' и 'marker'.

Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'block'.

[x].

Если субъект селектора является инлайн-элементом, допустимыми значениями будут 'none' и 'inline'.

Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'inline'.

Примечание. Другие значения могут быть допущены в будущих уровнях CSS.

'content'

Значение: [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

Начальное: пустая строка

Применяется: к псевдоэлементам :before и :after

Наследуется: нет

Процентное: N/A

Носитель: все

Это свойство используется с псевдоэлементами :before и :after для генерации содержимого документа.

Значения имеют следующий смысл:

<string>

Содержимое текста (см. раздел строки).

<uri>

Значением является URI, обозначающий внешний ресурс. Если ПА не может поддержать данный ресурс (в связи с типами носителя), он может игнорировать данный ресурс.

Примечание.CSS2 не предлагает механизмов для изменения размеров внедрённого объекта или для предоставления его текстуального описания, подобных атрибутам "alt" или "longdesc" для изображений HTML. Это может быть изменено в будущих уровнях CSS.

<counter>

Счётчики/Counters могут быть специфицированы двумя различными функциями: 'counter()' или 'counters()'. Первая имеет две формы: 'counter(name)' или 'counter(name, style)'. Генерируемый текст является значением именованного счётчика от этой точки в структуре форматирования; он форматируется в указанном стиле (по умолчанию - 'decimal'). Вторая функция имеет также две формы: 'counters(name, string)' или 'counters(name, string, style)'. Генерируемый текст является значениями всех счётчиков с данным именем от этой точки в структуре форматирования, разделёнными специфицированной строкой. Счётчики выводятся в указанном стиле(по умолчанию - 'decimal'). См. раздел автоматические счётчики и нумерация.

open-quote и close-quote

Эти значения замещаются подходящей строкой свойства 'quotes'.

no-open-quote и no-close-quote

Ничего не вставляют (пустая строка), но увеличивают (уменьшают) уровень вложения кавычек.

attr(X)

Эта функция возвращает строковое значение X для субъекта селектора. Строка не разбирается процессором CSS. Если субъект селектора не имеет атрибута X, возвращается пустая строка. Чувствительность к регистру имён атрибутов зависит от языка документа.

Примечание. В CSS2 невозможно обращаться к значениям атрибутов других элементов селектора.

Свойство 'display' регулирует, куда помещается содержимое, в блок, инлайн- или маркированный бокс.

Авторы должны поместить объявление 'content' в правила @media, если содержимое является медиа-чувствительным. Например, буквенный текст может использоваться для любой группы носителей, но изображения применяются только к медиа-группам visual + bitmap, а звуковые файлы применяются только к звуковым медиа-группам.

Следующее правило вызывает проигрывание звукового файла в конце отрезка с кавычками (см. дополнительные механизмы в разделе "звуковые таблицы стилей"):

@media aural { BLOCKQUOTE:after { content: url("beautiful-music.wav") } }

Следующее правило вставляет текст атрибута "alt" HTML перед изображением. Если изображение не выводится, пользователь увидит текст "alt".

IMG:before { content: attr(alt)}

Авторы могут включать новые строки в генерируемое содержимое путём ввода escape-последовательности "A" в одной из строк после свойства 'content'. Это вставляет форсированный обрыв строки, подобно элементу BR в HTML. См. дополнительную информацию об escape-последовательности "A" в разделах "Строки" и "Символы и регистр" .

H1:before { display: block; text-align: center; content: "chapterA hoofdstukA chapitre" }

Генерируемое содержимое не изменяет дерево документа. Обычно оно не передаётся обратно процессору языка документа (например, для повторного разбора).

Примечание. В будущих уровнях CSS свойство 'content' сможет принимать дополнительные значения, позволяя варьировать стиль участков генерируемого содержимого, но в CSS2 всё содержимое псевдоэлементов :before или :after имеет один стиль.

Могут быть следующие ситуации:

1Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'inline': псевдоэлементы учитываются, если размер бокса элемента вычислен (для 'compact') и выведен внутри того же бокса блока, что и элемент.

2Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'inline': применяются правила предыдущего пункта.

3Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'block': псевдоэлемент форматируется как блок поверх элемента и не участвует в вычислении размера элемента (для 'compact').

4Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'block': и элемент, и его псевдоэлемент :after форматируются как боксы блока. Элемент не форматируется как инлайн-бокс в своём собственном псевдоэлементе :after.