Чем не является generated content

Generated content в CSS — интересная штука. Буквально в предыдущей статье я приводил пример таблицы, которая не выглядит как таблица, с его использованием. Но как и многими вещи в CSS, ею очень легко злоупотребить.

Я об этом подумал, когда мне вчера попалась на глаза статья Леонида Хачатурова про использование generated content'а для создания звездочек обязательности в формах. Он предлагает вот в таком кусочке:

<label class="mandatory">Название поля: <span>*</span></label><input>

... вынести <span>*</span> из HTML'а и генерировать его в CSS.

При этом только надо четко осознавать, что информация об обязательности поля полностью теряется из содержимого страницы. Ведь CSS по своей сути не является дополнением к HTML'у. Это полностью отдельный и опциональный инструмент, сществующий для того, чтобы HTML выглядел красиво. Но при этом, он не добавляет HTML'у никакого нового смысла, и весь HTML должен предоставлять всю информацию, которую хочет передать автор, без всякой стилизации. (Хотя автор совершенно сознательно может не хотеть предоставлять звездочки).

Таким образом, generated content в CSS не является на самом деле полноправным контентом с точки зрения страницы. Поэтому для пометки обязательности элемента легко можно было бы использовать, скажем, фоновую картинку.

Вообще, я бы предложил, используя нынешний HTML, такой вариант:

<label class="mandatory">
  Название поля: 
  <small>(обязательно)</small>
</label>
<input>

и CSS:

.mandatory small {
  display:none;
}

.mandatory {
  background:url(pretty-star.png) right center no-repeat;
}

Я использовал <small>, потому что он не обладает никаким официальным смыслом с точки зрения HTML, как и <span> (то есть семантически нейтрален), зато даже в отсутствии стилей большинством браузеров показывается мелким шрифтом, что для людей обычно означает "примечание". Удобно.

А вот для семантического понятия обязательности придется подождать Web Forms 2 с их атрибутом "required". Тогда эту "звездочку" смогут понимать не только люди, но и браузеры, которые не будут давать сабмитить форму с незаполненными обязательными полями, или какие-нибудь сетевые сервисы заполнения форм, стандартизующие их вид, или что-нибудь еще такое прикольное.