ID и class
26 Feb. 2007Отвечал в ЖЖ на вопрос “Чем в двух словах в СSS class отличается от id”. Вспомнил, что уже писал подобный ответ и решил, что нужно сохранить формулировку. Может кто добавит чего-нибудь или опровергнет…
ID – это важная часть Семантической сети. В сочетании с URL, элемент, имеющий ID, получает уникальный идентификатор не только в пределах веб-страницы, но и в пределах Сети вообще. Например, элемент вида <img src=”foo.gif” id=”bar”> становится обладателем идентификтора вида http://example.com/index.html#bar. Ни один другой элемент в Сети не сможет иметь такого же адреса.
Такой идентификатор называется URI (Uniform Resource Identifier). Несколько упрощая можно сказать что URL + ID = URI. (При этом сам URL – тоже разновидность URI. Это URI страницы в целом.)
В результате, веб-агент (браузер) оказывается способен обращаться к элементу, обладающему URI, ссылаться на него и, в будущем, экспортировать такой элемент с одной страницы в другую, независимо от расположения страниц на серверах.
На этом фоне class выглядит обыкновенным html-атрибутом. Но в последнее время этот атрибут получил очень важное значение в рамках такой технологии как микроформаты. Об этом можно почитать на русском – http://www.habrahabr.ru/blog/microformats/
…впрочем, это все выходит за рамки CSS, в пределах которого ID и class почти не отличаются, за одним исключением — у ID выше специфичность.
26 Feb. 2007 at 19:02
Ещё одно важное исключение — id должен быть уникальным в пределах документа.
26 Feb. 2007 at 19:02
Это требование все-таки относится к HTML-документу. А с точки зрения CSS-инструкций — без разницы уникален ID или нет.
26 Feb. 2007 at 19:02
Разница есть, применение идентификатора более чем к одному элементу некорректно по стандарту, и браузер имеет право применить стили лишь, скажем, к первому из таких элементов.
26 Feb. 2007 at 20:02
Конечно же все так. Но в самом CSS-коде мы не оперируем ни ID ни class-ами, а только лишь их отражениями — CSS-селекторами. ID и ID-селектор — разные вещи, у них разные свойства, у них разные требования. Один — часть HTML-, а другой — часть CSS-технологии. Они вместе, но они не одно и то же.
26 Feb. 2007 at 20:02
Хм, никогда не задумывался об этом. Только что проверил, ради интереса, поведение броузеров при нескольких одинаковых ID. Стили применяюстя ко всем элементам, а не к первому. Т.е. алогритм обработки DOM(грубо говоря) и CSS у броузеров разный.
26 Feb. 2007 at 20:02
Браузер — плохой помошник в деле проверки стандартов. Нужно смотреть спецификации. А они требуют чтобы ID был уникальным. Причины этого требования кроются в семантике, а не в CSS и не в том как это реализовано в современных браузерах.
26 Feb. 2007 at 20:02
Повышенная, по сравнению с другими селекторами, специфичность ID-селектора, основана на предположении, что в HTML-документе, который мы оформляем, находится лишь один элемент с соответсвующим ID. Поэтому такой селектор весит больше, чем селекторы на основе class-ов, элементов, псевдо-классов. Разная специфичность селекторов — следствие разной семантики ID и class-ов, которой они обладают в HTML-коде.
06 May. 2007 at 01:05
Cпасибо. Век живи-век учись. Очень приятно удивило URL + ID = URI (эх-х, тямнота)
02 Feb. 2009 at 17:02
Идентификаторы – части ДОМ-дерева документа. Чем больше идентификаторов – тем больше дерево. Классы на дерево не влияют. Значит, уменьшение количества идентификаторов, замена их на классы там, где возможно, делает страницу более оптимальной. Тесты: http://webo.in/tests/css-efficiency-3/
02 Feb. 2009 at 20:02
IR: отличный довод, спасибо. Оптимизация нынче популярна.