12.05.2009

Gmail: Двоеточие в id-шнике

Продолжение статьи «Особенности верстки Gmail».

Мой коллега Иван Широков заметил, что все id-шники в верстке Gmail начинаются с двоеточия.

Хочу поделиться с вами своими соображениями, зачем это может быть сделано.

Во-первых, чтобы нельзя было (даже по ошибке) навесить стили для такого id-шника, потому что #:my {color: red;} не работает. Своеобразная защита, которая как бы подчеркивает, что id-шник используется только в яваскрипте.

Во-вторых, и в главных, чтобы элемент не был доступен по идентификатору в глобальной области видимости (global namespace). Когда мы пишем <div id="my">test</div>, этот дивчик становится доступен через идентификатор my в глобальной области видимости. То есть alert(my.tagName) выдаст «DIV» (сюрприз, сюрприз!). А если писать с двоеточием <div id=":my">test</div>, то уже хренушки — нет такого идентификатора в глобальной области видимости. При этом элемент по-прежнему можно достать через document.getElementById(':my'). На самом деле это очень круто, так как уменьшается вероятность коллизии в глобальной области видимости.

Все это лишь мои догадки. А вы что думаете?

8 комментариев:

Leonya комментирует...

Идея симпатичная, но к сожалению это невалидный код.

Vii комментирует...

Leonya, думаю валидность тут вообще не к месту, это ведь скорее всего скрипты генерируют.

Анонимный комментирует...

Пох на валидность совершенно - сайты для людей писать надо, а не для валидаторов.

С точки зрения поддержки сайтов - с двоеточием лучше.

Анонимный комментирует...

Я думаю, что применять стиль по идентификатору можно и нужно; а браузерам не следует делать такие переменные в глобальной области видимости.

Кстати, в браузерах, которые так делают, элемент с id=":my" будет всё равно доступен как window[":my"]. Хотя, конечно, вероятность коллизии здесь минимальна.

На валидность же XHTML двоеточие в идентификаторе не влияет; вот в HTML это не разрешается.

Pavel Volodko комментирует...

Вообще-то, стили навесить можно вот так:

#\:my {color: red;}

Степан Резников комментирует...

Действительно, #\:my {color: red;} работает везде, кроме IE. Спасибо за комментарий.

ast комментирует...

Про валидность в первом комментарии очень смешно :-)

Главное безусловно это Валидность и также великий Валидатор разящий Неправильный код.

Leonya комментирует...

На самом деле, на больших проектах id лучше вообще не использовать. Потому что регулярно возникает ситуация, когда блок, который ну стопудово мог встречаться на странице только один раз, вдруг начинает размножаться и JS приходится переписывать. А CSS-классы "только для JS" можно снабжать префиксом "c-" (code) и помнить, что в CSS их использовать не надо.