Об условных комментариях (conditional comments), тэге body, его аттрибутах и Internet Explorer.

Попытка сделать код из примера Александра Куликова валидным принесла неожиданные результаты и подтолкнула к эксперименту. Ниже речь пойдет об условных комментариях, тэге body, его атрибутах и поведении в Internet Explorer, поэтому все примеры из этой статьи настоятельно рекомендую смотреть именно в этом браузере.

Условные комментарии позволяют обозначить, какие фрагменты HTML-кода будут обрабатываться в IE, а какие будут игнорироваться. Варианты использования, синтаксис и описание работы комментариев достаточно подробно описаны на сайте Microsoft. Добавить здесь особенно нечего, кроме того, что такой фрагмент кода HTML не пройдет валидацию HTML.

Если "закомментировать" условный комментарий таким образом: HTML , то HTML-код станет валидным. Однако, условный комментарий перестанет работать и потеряет смысл, но, как показал эксперимент, тэг body в этом случае ведет себя довольно интересно. С позволения Александра, я в качестве основы взял его HTML-код (далее все примеры основаны на нем) и закомментировал условный комментарий:



Получившийся HTML-код стал успешно проходить валидацию. При этом он сохранил работоспособность.

пример 1

Однако, как видно на скриншоте, в дереве DOM IE присутствует всего один узел BODY. При этом, именно тот, который предназначался для IE. А куда же делся второй, который при закомментированном условии тоже не должен остаться незамеченным?

О том, что такой условный комментарий не должен работать, а второй BODY не должен исчезнуть, говорит следующий пример. В нем я добавил еще одно закомментированное условие

TEXT! TEXT!! TEXT!!!

.

пример 2

На скриншоте видно, что HTML-комментарий все-таки делает неработоспособным условный комментарий. То есть и текст, и параграф, внутри которого он расположен, IE показывает. Если убрать HTML-комментарии

TEXT! TEXT!! TEXT!!!

, то параграф с текстом будут проигнорированы Internet Explorer. Это демонстрирует следующий пример.

Однако, в отношении BODY этот браузер ведет себя особенно. Добавлю "второму" BODY, которого не видно в IE, атрибут class, а заодно установлю значения этого атрибута для обоих вариантов таким образом:


class="ie">

Как видно в следующем примере, IE "видит" и обрабатывает атрибут первого BODY, при этом напрочь не замечает такого атрибута для второго.

пример 4

На скриншоте это видно. В подтверждение сказанному: фон блока теперь не зеленый, а значение атрибута class в дереве DOM соответствует первому BODY.

В следующем примере я уберу всю строку , оставлю лишь .

пример 5

Посмотрите скриншот. IE увидел "второй" (он же единственный) BODY и его атрибут class="ie". Это и верно, т.к. условные комментарии по прежнему внутри HTML-комментариев и работать не должны.

Таким образом, Internet Explorer "закрывает глаза" на BODY, который находится внутри "закомментированных" условных комментариев, если перед этим в HTML-коде написан BODY, которому условными комментариями предписано быть обработанным только в IE. ?, как показал эксперимент, это справедливо только для элемента BODY, с любыми другими элементами внутри него этот фокус не проходит и на HTML валидатор покажет много ошибок.

Хотел я на этом и закончить эксперимент, перечитал и понял, что он будет не полным, если не попробовать добавить другие атрибуты для BODY, например ID. Тут-то IE стал вытворять чудеса.

В следующем примере я добавил второму BODY ID:


id="bodyID">

пример 6

Посмотрите скриншот. IE использует атрибут class="ie" из первой строки, а id="bodyID" из второй. При этом он игнорирует класс этого второго BODY, посмотрите код примера, если бы он его использовал, блок был бы красным.

В последнем примере я добавил первому BODY ID и изменил значение у второго:



Надо ли говорить, какие атрибуты и с какими значениями теперь применил Internet Explorer к BODY? Кто не догадался — смотрите скриншот:

пример 7

?так, окончательный вывод будет таким: если спрятать условный комментарий, в котором размещен BODY, HTML-комментарием, то HTML-код успешно пройдет валидацию, а Internet Explorer возьмет у этого тега только атрибуты, которых нет у BODY, который с помощью условных комментариев предназначен для обработки IE.
Все примеры тестировал в IE6. В IE7 не проверял.

Спасибо:
Александру Куликову, приславшему пример, который сподвиг на этот эксперимент;
браузеру Internet Explorer, который не дает скучать при создании сайтов;
Internet Explorer Developer Toolbar, с помощью которого можно посмотреть, что же видит IE в HTML-документе.

PS: в самом последнем примере, после вывода, я вообще убрал комментарии:


В этом случае IE снова игнорирует значения атрибутов второго BODY.

PPS: в самом-самом последнем примере, я поменял строки местами:



В этот раз IE просто спятил...



Много комментариев (11) к “Об условных комментариях (conditional comments), тэге body, его аттрибутах и Internet Explorer.”

  1. zed_0xff :

    ошибка, в обеих строках присутствует class=”ie”:

    пример 6

    Посмотрите скриншот. IE использует атрибут class=”ie” из первой строки, а id=”bodyID” из второй.


  2. Баранов Андрей :

    zed_0xff, спасибо. Это последствия копипаста при написании текста. Однако, в самих примерах все верно, в примерах 6-9 для второго body class=”NOie”.


  3. Ivan Shumkov :

    Вполне логично – элемент body может быть только один. Броузер похоже просто своеобразно мерджит их.


  4. vashurin :

    Что бы заработало должно быть так:
    __
    __
    __

    __
    __
    __
    (”_” – подчеркивание поставил для того, что бы движок не порезал теги html ).


  5. vashurin :

    Попытка номер 2 :) (извенити за предыдущее)
    Что бы заработало должно быть так:


    –>



  6. Erlioniel :

    Очень интересно и совершенно непонятно ведет себя IE 6 с подобным кодом. Возникают некоторые не объяснимые глюки в нем, которые исправляются отборным матом и дублированием некоторых классов с body.ie. В основном это наследование у элементов и т.п.

    Так что аккуратнее =Р

    З.Ы. Так что делать-то с совместимостью с IE 7 по этому поводу?


  7. Gary :

    Возникла проблема.
    как сделать так, чтобы IE понимал один стиль,
    а любые другие !IE другой стиль?
    ведь именно применять в других броузерах и не получается.

    конкретно мне нужно чтобы подгружался разный
    styles.css


  8. tapazukk :

    2Gary:














    text text text




  9. Clara :

    Your post very interesting, on it is what is not present on other sites.
    ;)


  10. Люди, давайте скажем: - Нет детским порно фотографиям в интернете! :

    tapazukk тебе спасибо!


  11. Алексей :

    Непонятно, ну непонятно же говорю, а вообще спасибо.