Использование условных комментариев вместо хака "* html", пишем всю таблицу стилей в одном файле

Разработчики IE7 исправили глюк на котором основан хак "* html" поэтому его можно использовать только для отделения стилей для ie версии 6 и младше. Но для вёрстки очень часто бывает нужен метод отделения стилей для ie всех версий.

В сети достаточно описаны способы загрузить дополнительный .css файл для ie используя условные комментарии. Мне этот метод кажется не очень удобным из-за того, что стили, которые относятся к одному объекту, получаются разнесены на несколько файлов и редактировать их не удобно.

Вместо этого я предлагаю открывающийся тэг body заменить на

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

А для отделения стилей относящихся только к ie испольовать класс ".ie"
Например:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
 <title>test</title>
 <style type="text/css">
   div.box {
   /* стили для всех броузеров */
     width: 200px;
     border: 1px solid black;
   }
   body.ie div.box {
   /* стили для ie */
     background-color: green;
     color: white;
   }
 </style>
 </head>
 
 <!--[if IE]><body class="ie"><![endif]-->
 <![if !IE]><body><![endif]>

   <div class="box">
      Этот блок будет зелёным только в IE.
   </div>

 </body>
 </html>

Вы можете посмотреть описанный пример в действии.

Александр Куликов, Студия 908.

 

Этот пример с описанием его работы прислан автором для размещения на XHTML.ru. Подробнее...



Много комментариев (36) к “Использование условных комментариев вместо хака "* html", пишем всю таблицу стилей в одном файле”

  1. slaff :

    Мне кажется это не очень удобно будет. Например, такие моменты когда нужно подправит margins и paddings для IE, я подключаю отдельный CSS-стиль для IE в + !important.

    head

    style
    body { padding: 10px !important;
    /style>

    /head

    Скобки я намеренно тут опустил (чтобы движок не обрезал теги). Мне кажется так намного удобнее.


  2. KBA-KBA :

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


  3. AKS :

    А IE 7 поддерживает дочерние селекторы или селекторы аттрибутов? Если нет, то по-прежнему можно легко обойтись одной таблицей стилей…


  4. Flack :

    Проше разбить css-файлы.
    Велосипед тут изобретать не к чему.


  5. Vitaly Harisov :

    Я разбиваю на два файла (основной и для MSIE) из-за cursor: hand, на который ругается FF 1.5 на консоли.


  6. shushkoff :

    у cursor нет значения “hand”, есть значение “pointer”.


  7. Vitaly Harisov :

    > у cursor нет значения “hand”, есть значение “pointer”.

    Спасибо, я знаю. Ещё я знаю, что есть MSIE5, который не знает, что у cursor нет значения pointer и думает, что у него есть значение hand.


  8. Yahen :

    Уважаемые господа, вот читаю я такие статьи и не понимаю, это что такой особый стиль крутизны писать подобные конструкции? Или все эти примеры расчитаны на использование на narod.ru где есть только голый html? Есть куча простых и эффективных способов сделать для каждого броузера свой css файл и даже свою верстку не используя эти странные конструкции вроде условных комментариев или всяких там хаков?
    Или я чего-то не понимаю в этой жизни?


  9. sergeit :

    > Есть куча простых и эффективных способов сделать для каждого броузера свой
    > css файл и даже свою верстку не используя эти странные конструкции вроде
    > условных комментариев или всяких там хаков?
    верстка для различных браузеров не есть good. вы видимо Джефри Зельдмана не читали. отделная вёрстка для каждого из браузеров – это огромный шаг назад. исользование хаков лучше чем сопровождение двух(трёх, четырёх и т.д.) версий сайта.


  10. shaelf :

    >> Есть куча простых и эффективных способов сделать для каждого броузера свой css файл и даже свою верстку
    Предположим есть статичный сайт и на нём где-то около 200 страничек… Вы предлагаете их увеличить минимум до 800?


  11. Yahen :

    >верстка для различных браузеров не есть good. вы видимо Джефри Зельдмана не читали. отделная вёрстка для каждого из браузеров – это огромный шаг назад. исользование хаков лучше чем сопровождение двух(трёх, четырёх и т.д.) версий сайта.

    Хм. А я всегда считал, что наоборот. Потому как “сделать страничку чтоб во всез броузерах одинаково выглядела”, не более чем понты. Стеделать два дизайна шаблонов всегда гораздо быстрее чем один, но работающий везде. И поддержка тоже значительно упрощается.

    >Предположим есть статичный сайт и на нём где-то около 200 страничек… Вы предлагаете их увеличить минимум до 800?

    Интересно было бы посмотреть на статический сайт в 200 страничек ;) И на, того, кто его сверстал еще больше. Ну да ладно. Пусть даже и так, а почему уведичивать его нужно до 800? Это что 600 вариантов дизайна что-ли делать. Вообще то достаточно увеличить на 1 файл. Ну в особо тяжелых случаях на 3-4 файла.


  12. куритель :

    >Хм. А я всегда считал, что наоборот. Потому как “сделать страничку чтоб во всез броузерах одинаково выглядела”, не более чем понты. Стеделать два дизайна шаблонов всегда гораздо быстрее чем один, но работающий везде. И поддержка тоже значительно упрощается.

    Гм. Есть мнение.
    Два дизайна шаблонов (жалкий минимум кстати) может привести к появлению двух разных языков для двух разных браузеров. Нахрена? Уже черт знает когда нетшкаф имел разные с эксплорером теги, что дальше? Хорошо было? Вместо одной строчки из 4 пар слов имеем строчку на 8. Поддержка чего упрощается? Каким местом? Ага, а теперь еще и два разных шаблона, потом два разных сервера чтоли? Расстрелять!


  13. Yahen :

    Хм. мой опыт мне подсказывает, что в 99% случаев все изменения в шаблонах для разных броузеров сводятся просто к написанию нескольких стилевых файлов. Что в конечном случае гораздо проще, чем пытаться втиснуть в один файл, путем использовапния всяких хаков, всего, что может понадобиться для разных броузеров. Тем более, если в странице есть javascript, то почти всегд а приходится либо писать по две версии скрипта, либо вставлять кучу проверок на броузеры. Так что хаками и условными комментариями проблема не снимается, а наоборот усугубляется.
    Это как csssengarden. Якобы разделенный дизайн и контент, хотя на самом деле это не так. Но все почему-то себя упорно обманывают.


  14. Vitaly Harisov :

    Мне почему-то не приходится писать по две версии скрипта и проверок на браузеры делать тоже не приходится. Максимум проверка на Quirks Mode.


  15. Евгений Иванов :

    насчёт курсора

    вот так писать нужно, последовательно

    {…cursor:pointer;cursor:hand;…}


  16. svnk :

    Yahen, уважаемый, а Вам, судя по всему, верстать не часто приходилось!
    Разве браузера у нас только два? Давайте созададим по одному варианту верстки для каждого браузера.
    Один для FF, другой для IE 4, +1 для IE 5 (и один надо не забыть для IE 5.5) ну и по штучке для IE 6 и 7 (все-таки по разному стили парсят). Потом надо не забыть, что дизайнеры тоже люди, и некоторые из них мазахисты (или нет? В любом случае – не нам решать!), и сидят под Safari. А еще есть Konqueror и много другой “хери”, бегающей на Гекковских движках, которая может быть единственным инструментом у кого-то под рукой.


  17. vashurin :

    Пример, приведенный в статье не пройдет валидацию, т.е. пользуясь FireFox’ом ошибки не отобразятся, а вот прогоня валидатором, вылезет сообщение об ошибке на и , хотя автору за идею “5+” :).


  18. HTML верстка сайтов :

    Совсем недавно потребовалась поддержка IE7, пришлось использовать следующие хитрости:

    IE 6 и ниже
    * html {}
    IE 7 только
    *:first-child+html {}
    IE 7 и современные браузеры
    html>body {}
    Только современные браузеры (не IE 7)
    html>/**/body {}


  19. Анна :

    Разработчики IE, как всегда, не исправили все до конца. Обратите внимание на атрибуты lang. Селекторы с их использованием 7-ой IE не понимает.

    div {
    background: #006600;
    color: #FFF;
    }

    :lang(ru) div {
    background: #CC0000;
    }

    Это мой див. Если вы в ie (включая 7), то он зеленый. Если нет, то красный.


  20. Анна :

    P.C.к вышенаписанному: Надо добавить в тэг html xmlns=”http://www.w3.org/1999/xhtml” lang=”ru” xml:lang=”ru”
    (XHTML 1.0 Strict)


  21. Hermann :

    Мдя… Я вот одну вещь узнал.
    При указании инструкции <?xml version="1.0" ?> и доктайпом не менее xhtml 1.1 то обычный список ul, ol со вложенными li, ведет себя совершенно гуманее, чем без этой инструкции при некоторых обстоятельствах в стилях CSS.
    Так вот у меня есть некоторое утверждение: БЛОК есть площадь. А построение как известно в основном из него и состоит. ПЛОЩАДЬ не может отображаться в разных браузерах по-разному.
    Соответственно, вывод лишь один: Неправильное отображение, есть причина неправильных инструкций. В основной массе это есть недописанные стили. Например, кто то думает что <P> есть блок. Но это не так, до тех пор, пока об этом явно не укажут: display:block;
    Все на самом деле очень просто!


  22. Александр :

    А подскажите пожайлуста, как мне, например сдвинуть блок вправо !!!только!!! для ie7??


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

    <!–[if IE 7]> <style> css для смещения блока вправо </style> <![endif]–>


  24. Александр :

    2 Баранов Андрей, к сожалению, такая конструкция у меня не работает, она приводит к дополнительному сдвигу бока также и в IE6, а это недопустимо.


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

    Александр, может быть это поможет: http://www.positioniseverything.net/articles/sidepages/cond_1.html


  26. Vbnzq :

    Не пашет у меня прижате footer к низу во всех браузерах…

    .foot {
    display:block;
    height:70px;
    background:#fff;
    padding:1px;
    position: absolute;
    width:100%;
    bottom: 0;
    }
    он прижимается к низу окна, но если содержимого больше, чем окно (т.е. его надо прокручивать), в опере footer остается на том же уровне (относительно текста), а в експлорере смещается вместе с содержимым. Как заставить оперу работать так же?


  27. Leon :

    Как многие заметили действительно проще разбить один css-файл на два, как в принципе большинство и делает.


  28. Temasik :

    Самый лучший вариант, это разные CSS стили для броузеров. Если структура сайта правильная в смысле она вообще есть, то можно и без CSS все найти и увидеть :) А если дело касается дизайна сайта, то необходимо просто написать несколько разных стилей для поддержки того или иного браузера (если конечно мы не ориентируемся на браузеры, которые в принципе не очень “дружат” с CSS). Сам Зельдман, т.е. его агенство happy cog использует кострукции тиап:
    <!–[if gte IE 6]>–>
    <!–[if gte IE 7]>–>


  29. Temasik :

    Пропала конструкция :)

    <!--[if gte IE 6]>-->
    <!--[if gte IE 7]>-->


  30. Temasik :

    <!–[if gte IE 6]>
    <link href=”/css/ie6.css” rel=”stylesheet” media=”screen, projection” type=”text/css” />
    <![endif]–>
    <!–[if gte IE 7]>
    <link href=”/css/ie7.css” rel=”stylesheet” media=”screen, projection” type=”text/css” />
    <![endif]–>
    Надеюсь сейчас получится :)


  31. exbe :

    именно вариант Temasik наиболее жизнерадостный.


  32. Тимур :

    Вот к теме подробная статья об условных комментариях: http://www.tigir.com/comments.htm


  33. Light :

    Ай супер! Обсуждение статьи получилось поинтереснее самой статьи!


  34. Александр :

    и это, как выяснилось на практике, не всегда рабочая конструкция. Лучше писать а в ie.css для 6 и ниже * html, а без * html для 7 и типа выше… :).

    По поводу прижимания футера у низу смотреть тут – [url=http://accent-don.ru/xhtml/2007/10/18/xhtml_1.html]Min – max – width для IE6 и


  35. Alinaki :

    Ну вот…. седня впервые в жизни применил эту штуку для разделения CSS :) Теперь у меня sliding doors табы и ссылки центруются везде… фух. Спасибо за безскриптовое решение! :)


  36. iPunch :

    >Интересно было бы посмотреть на статический сайт в 200 страничек ;) И на, того, кто его сверстал еще больше.

    Пожалуйста: Сайт
    Кто верстал оригинал — не знаю (в некоторых разделах еще сохранился код), я верстаю нынешний вариант.



22 queries 0.235 seconds.