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". Тогда эту "звездочку" смогут понимать не только люди, но и браузеры, которые не будут давать сабмитить форму с незаполненными обязательными полями, или какие-нибудь сетевые сервисы заполнения форм, стандартизующие их вид, или что-нибудь еще такое прикольное.

Комментарии: 8

  1. [...] Как верно заметил Иван Сагалаев, предлагаемый мной способ не совсем хорош в плане семантики. Use with caution. [...]

  2. Flack

    Мы делаем так:

    label em {color:#e20074;}

  3. Андрей

    а какие соображения по поводу :first-letter?

  4. alshur

    забавно, сто лет использую атрибут именно с названием required у эл-тов формы
    потом js'ом проверяю заполненность обязательного поля
    (p. s. на валидацию забиваю)

  5. Давид Мзареулян

    Не обязательно скрывать small, можно его превращать в ту же самую звёздочку: http://xpoint.ru/forums/internet/html_css/css/thread/22716.xhtml

  6. Давид Мзареулян
    • хотя, это куда более криво, конечно
  7. Андрей

    "А вот для семантического понятия обязательности придется подождать Web Forms 2..."
    Толку то? Все равно придется на серверной стороне проверять наличие [хотя суть разговора не в этом], а вот оформление той же самой звездочки придется все равно делать через CSS. Вот правда если все же стандартизируют вид этих полей - тогда прикольно, но опять же "для обеспечения обратной совместимости" все все равно будут оформлять в CSS еще лет пять, так по инерции :)

  8. Денис Зайцев

    А вот для семантического понятия обязательности придется подождать Web Forms 2 с их атрибутом “required“.

    Ох уж эти новые ключевые словечки ;)
    На нашем сайте давно использовался свой код для проверки значений, введенных в поля формы - просто добавили тег pattern со значениями String, Email, Date и т.д.
    С выходом беты Opera 9 у нас приключился такой конфуз - опера ругалась на атрибут pattern в элементах формы, точнее она почему-то считала что там должна быть регулярка, а следовательно не пропускала любой текст кроме String (или Email).

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