CSS для разных IE в общей таблице стилей

Если вы используете условные комментарии для IE и вам не хотелось бы подключать несколько файлов, есть простой способ, позволяющий использовать одну таблицу стилей, в т.ч. для разных версий IE.

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

1
2
3
4
5
6
7
8
9
10
11
<!--[if IE 6]>
<div id="ie6">
<![endif]-->
    <div id="wrap">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
<!--[if IE 6]>
</div>
<![endif]-->

Теперь, чтобы например переопределить какое-либо свойство для IE6, нужно добавить в селектор #ie6.

1
2
#wrap {} /* Общее правило */ 
#ie6 #wrap {} /* Правило для IE6 */

Обсуждение:

  1. Romanoza

    Треш жесткий будет в макете тогда, проще в 1м месте

  2. pepelsbey

    У #ie6 высокая специфичность, поэтому нужно помнить о потенциальных проблемах во время написания хаков. А ведь нужно ещё и к IE7 и IE8 обращаться. Гораздо универсальнее будет писать так, внутри одного файла:

    * HTML E { … } — это для IE6
    *+HTML E { … } — это для IE7
    E { … } — остальные правила для IE8

    • Alex

      Согласен, для тех кто пользуется хаками данный способ менее удобен. Но есть и другие :)

  3. banzalik

    Если вы решили пойти по этому сомнительному пути, то уж лучше так

    <!--[if IE 8]><body class="isIE8"><![endif]-->
    <!--[if IE 7]><body class="isIE7"><![endif]-->
    <!--[if IE 6]><body class="isIE6"><![endif]-->
    <!--[if !IE]>--><body><!--<![endif]-->

    • Alex

      Я отнюдь не решил. Ну и да, ваш пример проще будет.

      • banzalik

        так, пожалуй, будет лучше
        <!--[if IE 8]><body class="isIE isIE8"><![endif]-->
        <!--[if IE 7]><body class="isIE isIE7"><![endif]-->
        <!--[if IE 6]><body class="isIE isIE6"><![endif]-->
        <!--[if !IE]>--><body><!--<![endif]-->

  4. Николай

    Забавно, конечно… ну а если IE7, тогда что? :-)

    • Alex

      То же самое, только для IE7. :)

  5. ramzes

    ага, а если не хотите раздувать файл стилей, можете все вынести в инлайн. славно. по-моему, как раз таким способом плодятся сущности без надобности

  6. Иван

    И всем нормальным браузерам придется качать лишние css-стили в основном файле…

  7. Glivera

    Однако вы истинно гоните
    вот вам решение
    <!—[if gt IE 7]><!—>
    <!—
    <!—[if lt IE 8]> <![endif]—>

    а в ie.css первой строчкой @import «main.css»;
    и никаких вам хаков для нормальных браузеров

  8. Glivera

    блин не прошло
    <!--[if gt IE 7]><!-->
    <!--
    <!--[if lt IE 8]> <![endif]-->

    • Alex

      Спасибо, хороший вариант для оптимизации. Но там опять же отдельный файл для IE, а пример выше я привёл именно как альтернативу этому.

  9. Glivera

    в моем примере файл по сути один во второй мы просто сбрасываем все фиксы для ие6-7 при этом они тоже загружаются одним запросом к серверу а не двумя

    ваш пример подходит только к верстке небольших сайтов, на больших проектах такое недопустимо

    • banzalik

      если у вас на большом проекте 3 стилевых правила для ие (ну так получилось, вы очень крутой верстаете и хаки вам не нужны) вы будете создавать 2 стилевых файла, для ие и для не ие?

      • Glivera

        я делаю один файл для нормальных браузеров, а в файл для ие вставляются только фиксы и не важно большой или маленький проект

        а самое главное в таком способе, это отсутствие хаков в главном стилевом файле, и в большинстве случаев для ие не нужно писать * html :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*