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

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

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

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

<!--[if IE]><body class="ie"><![endif]-->
<!-- <![if !IE]> --><body><!-- <![endif]> -->

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

пример 1

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

О том, что такой условный комментарий не должен работать, а второй BODY не должен исчезнуть, говорит следующий пример. В нем я добавил еще одно закомментированное условие <!-- <![if !IE]> --><p>TEXT! TEXT!! TEXT!!!</p><!-- <![endif]> -->.

пример 2

На скриншоте видно, что HTML-комментарий все-таки делает неработоспособным условный комментарий. То есть и текст, и параграф, внутри которого он расположен, IE показывает. Если убрать HTML-комментарии <![if !IE]><p>TEXT! TEXT!! TEXT!!!</p><![endif]>, то параграф с текстом будут проигнорированы Internet Explorer. Это демонстрирует следующий пример.

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

<!--[if IE]><body class="NOie"><![endif]-->
<!-- <![if !IE]> --><body class="ie"><!-- <![endif]> -->

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

пример 4

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

В следующем примере я уберу всю строку <!--[if IE]><body class="NOie"><![endif]-->, оставлю лишь <!-- <![if !IE]> --><body class="ie"><!-- <![endif]> -->.

пример 5

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

Таким образом, Internet Explorer "закрывает глаза" на BODY, который находится внутри "закомментированных" условных комментариев, если перед этим в HTML-коде написан BODY, которому условными комментариями предписано быть обработанным только в IE. И, как показал эксперимент, это справедливо только для элемента BODY, с любыми другими элементами внутри него этот фокус не проходит и на <![if expression]> HTML <![endif]> валидатор покажет много ошибок.

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

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

<!--[if IE]><body class="ie"><![endif]-->
<!-- <![if !IE]> --><body class="NOie" id="bodyID"><!-- <![endif]> -->

пример 6

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

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

<!--[if IE]><body class="ie" id="bodyID_1"><![endif]-->
<!-- <![if !IE]> --><body class="NOie" id="bodyID_2"><!-- <![endif]> -->

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

пример 7

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

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

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

<!--[if IE]><body class="ie" id="bodyID_1"><![endif]-->
<body class="NOie" id="bodyID_2">

пример 8

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

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

<body class="NOie" id="bodyID_2">
<!--[if IE]><body class="ie" id="bodyID_1"><![endif]-->

В этот раз 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 :) (извенити за предыдущее)
    Что бы заработало должно быть так:
    <!–[if IE] >
    <body class=”ie”>
    <![endif]–>

    <!–[if !IE]> –>
    <body>
    <!–<![endif]–>


  6. Erlioniel :

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

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

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


  7. Gary :

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

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


  8. tapazukk :

    2Gary:
    <body>
    <!–[if gte IE 7]>
    <body id="ie7andup">
    <![endif]–>
    <!–[if IE 6]>
    <body id="ie6only">
    <![endif]–>
    <!–[if IE 5.5000]>
    <body id="ie5-5only">
    <![endif]–>
    <!–[if lt IE 5.5000]>
    <body id="ie5-01only">
    <![endif]–>
    text text text
    <!–[if IE]>
    </body>
    <![endif]–>
    </body>

    <style type="text/css">
    body {border : 2px solid black;}
    /*IE 7 и далее*/
    #ie7andup { background : blue; }
    /*** For IE 6 ***/
    #ie6only { background : green;}
    /* IE 5.5*/
    #ie5-5only { background : purple; }
    /*IE 5.01*/
    #ie5-01only {background : red;}
    </style>


  9. Clara :

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


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

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


  11. Алексей :

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



22 queries 0.192 seconds.