Как стать автором
Обновить

Спецификация HTML5 допускает практически любое значение атрибута id — пользуйтесь с умом

Разработка веб-сайтов
Перевод
Автор оригинала: Roger Johansson
Как я упоминал какое-то время назад в статье «Создание правильных id», HTML 4.01 достаточно ограничен с точки зрения допустимых значений атрибута id:
Атрибуты ID и NAME должны начинаться с буквы ([A-Za-z]), за которыми могут следовать любое количество букв, цифер ([0-9]), дефисов ("-"), подчеркиваний ("_"), двоеточий (":") и точек (".").

HTML5 допускает использование почти любого значения атрибута id:
Спецификация HTML5 3.2.3.1 о атрибуте id:
Значение должно быть уникально относительно всех остальных значений ID в рамках дерева элементов, содержащего данный и должно содержать как минимум один символ. Значение не должно содержать пробелов.
Как минимум один символ, без пробелов.

Это позволяет использовать в качестве значений атрибута id специальные символы. А еще это дает нам массу возможностей поставить себя в идиотское положение, так как мы можем использовать значения, которые вызовут проблемы как с CSS таки и с JavaScript, если вы не будете осторожны.

Рассмотрим следующий HTML код:
<div id="#id"></div>
<div id="div>p+p:first-child"></div>


Конфликты с селекторами CSS


Что бы обратиться к вышеуказанным элементам с помощью CSS использовать нормальный синтаксис не получится:
##id {}
#div>p+p:first-child {}


Так как id содержит символ, для которого есть предопределенное значение в CSS, вам понадобится немного поколдовать над CSS селекторами, что бы заставить их работать как надо. Один из способов — использовать селектор по значению атрибута, вместо #:
[id="#id"] {}
[id="div>p+p:first-child"] {}


Еще один способ — экранировать вызывающие конфликт символы:
#\#id {}
#div\>p\+p\:first-child {}


Проблемы с JavaScript


Если вы используете JavaScript библиотеку, вроде jQuery, для работы над нашими элементами, то это вызовет затруднения:
$("#div>p+p:first-child").css("fontSize", "2em");


Как и с CSS, вам придется экранировать специальные символы:
$("#div\\>p\\+p\\:first-child").css("fontSize", "2em");


Осмысленное именование элементов


HTML5 дает нам большую свободу в выборе значений атрибута id элементов. Это может быть иногда полезно. Но, по-моему, использовать символы, которые вызывают конфликт с CSS и JavaScript, значит просто напрашиваться на неприятности. Тоже самое с использованием клевых символов, вместо нормального читабельного текста. Пользуйтесь, если достоинства будут превалировать над рисками. Но не стоит использовать новые возможности именования только потому, что можете.
Теги:html5версткаатрибутыспецификация
Хабы: Разработка веб-сайтов
Всего голосов 58: ↑50 и ↓8+42
Просмотры7.8K

Похожие публикации

Лучшие публикации за сутки