Спецификация CSS2.1 суммирует сгенерированный контент как «[визуализированный] контент, который не приходит из дерева документа» — другими словами, текст и изображения, определенные в CSS , а не в разметке.
Возможно, наиболее распространенный тип сгенерированного контента — это текстовые или текстовые глифы, определенные с помощью свойства content CSS и добавленные на страницу с помощью псевдоэлементов :before или :after . Например, мне часто нравится добавлять стрелку, указывающую вправо, после ссылок «more», которая реализована в виде символа Юникод в сгенерированном контенте:
a.more:after { content:"2192"; margin-left:0.25em; }того, какa.more:after { content:"2192"; margin-left:0.25em; }
Или для таблиц стилей для печатных СМИ, желательно расширить ссылки на ссылки в полные URL :
@media print { a[href]:after { content:" (" attr(href) ")"; } }того, как@media print { a[href]:after { content:" (" attr(href) ")"; } }
Но даже при том, что мы называем это сгенерированным контентом , я думаю, что это вводит в заблуждение — потому что сгенерированный контент вообще не является контентом, это презентация .
Спецификация не особенно явно в этом вопросе. В примерах и описаниях он упоминается как «контент», но многие примеры, которые он дает, представляют собой крайний случай (как мы увидим позже). В конце концов, это часть CSS , не означает ли это презентацию?
Я пришел к выводу, что его не следует рассматривать как контент, рассматривая различные примеры использования сгенерированного контента и, что более важно, его интерпретацию браузерами и вспомогательными технологиями. Посмотрите, согласны ли вы.
Идеальный случай
Недавним и идеальным примером того, как сгенерированный контент может быть использован, являются CSS3 Toggle Switches Крейга Баклера. Созданный контент используется для добавления галочки или крестика к коммутатору, что обеспечивает дополнительную визуальную индикацию его состояния:
input.switch:empty ~ label:before { content:"2718"; text-indent:2.4em; color:#900; } input.switch:checked ~ label:before { content:"2714"; text-indent:0.5em; color:#6f6; }
Информация, которую это передает, является визуальной и дополнительной , так как основная семантика передается проверенным состоянием элемента управления формы. Генерируемый контент просто дополняет красный и зеленый цвета, так что люди с дефицитом красно-зеленого цвета смогут легче различать состояния.
Вы не будете полагаться на цвет, шрифты или границы для передачи важной семантики, потому что многие группы пользователей не воспринимают эту информацию. И так для сгенерированного контента.
Некоторые крайние случаи
Крайние случаи — это ситуации, когда сгенерированный контент используется для дополнения семантической информации, которая уже существует, но в противном случае была бы менее ясной. Спецификация описывает два таких примера в своем введении:
Авторы могут пожелать, чтобы пользовательский агент вставлял слово «Рисунок» перед заголовком рисунка или «Глава 7» перед заголовком седьмой главы.
Чтобы взять пример глав — предполагая, что все главы находятся на одной странице, тогда пользователь может подсчитать заголовки, чтобы узнать, какой номер главы они читают. Таким образом, информация, которую она передает, уже доступна, но стала более очевидной, добавив «главу 7» перед заголовком.
Я думаю, что критический фактор в подобных случаях — решить, насколько важна дополнительная информация. Действительно ли для пользователя важно, что они читают 7-ю главу? Будет ли потеряна важная информация, если дополнительный текст не будет показан?
Если информация важна, ее не следует определять с использованием сгенерированного контента. Но если текст носит чисто декоративный или презентационный характер, то сгенерированный контент является подходящим выбором.
Так что насчет нумерации списков? Во многих случаях нумерация является произвольной и представительной, даже с упорядоченным списком — т.е. порядок элементов может быть важен, но пронумерованы ли они 1.2.3. или ABC может не иметь значения вообще. В этом случае сгенерированный контент (или, в этом отношении, собственная нумерация списка) является подходящим выбором.
Но для некоторых видов документов, в частности для юридических документов, таких как контракты, нумерация глав и разделов является неотъемлемой частью значения. Условие контракта может ссылаться на другое, конкретно пронумерованное предложение, и в этом случае я бы сказал, что нумерация — это контент, а не презентация , и поэтому сгенерированный контент не должен использоваться. На самом деле, я бы сказал, что в таких документах даже не должна использоваться собственная нумерация списков — номера должны быть жестко закодированы в разметке.
Практические различия
Генерируемый контент отличается от обычного текста, и это можно увидеть в нескольких ключевых функциональных различиях.
Только самые последние программы чтения с экрана будут говорить сгенерированный контент , и поэтому старые устройства будут пропускать любой контент, определенный таким образом (как и старые браузеры, такие как IE7 ). Хотя в некоторых случаях вы не хотите, чтобы программы чтения с экрана произносили текст — например, со стрелкой «еще», о которой я упоминал в начале, читателям не полезно говорить что-то вроде «больше». стрелка вправо » . Джеймс Крейг предложил дополнительные свойства ARIA CSS , которые позволят авторам контролировать такие случаи; но лично я думаю, что было бы лучше, если бы программы чтения с экрана вообще не говорили о сгенерированном контенте.
Для всех браузеров, кроме Opera, сгенерированный контент не включается в выборки текста и данные буфера обмена . И во всех браузерах он не создает текстовые узлы в документе и не может быть целью события . Что касается DOM , сгенерированный контент не существует.
Но он существует на уровне представления — то есть в CSS DOM — и есть простой способ получить текст из сгенерированного контента, ссылаясь на свойство content вычисляемого стиля псевдоэлемента:
var element = document.getElementById('whatever'); var text = window.getComputedStyle(element, ':before').content;
Широкие выводы
Для меня эти практические различия подчеркивают ключевое концептуальное различие между сгенерированным контентом и обычным текстом — сгенерированный контент не является контентом текста, так же как фоновые изображения не являются изображениями контента.
Текст по-прежнему может передавать информацию без передачи семантики — точно так же, как цвета и другие варианты дизайна передают информацию, однако документ все еще имеет смысл, когда эта информация отсутствует. И это реальная точка зрения — сгенерированный контент может вообще не просматриваться и не восприниматься пользователем, поэтому, если это важно, он должен быть в разметке.