Персональный CSS хак для Internet Explorer 7

Очень не люблю при верстке использовать для IE так называемые условные комментарии (Conditional Comments) — нет желания писать отдельный файл стилей (предпочитаю «все в одном»), да и лишние строки в хтмл-коде — не есть красиво.

С относительно недавнего времени к трем браузерам, в которых я просматриваю результат верстки, как было ранее (Opera, FireFox, IE 6.0), добавился еще один — Internet Explorer 7 (теперь их 4 — какой ужас!). А, соответственно, случаются ситуации, когда определенный стиль нужно применить только для 7-й версии ИЕ.

Попался мне на глаза CSS хак для Internet Explorer 7, который я раньше не встречал: *:first-child+html.

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

Пример кода

[cc lang=»css»]
p.test1 {
background: #FAA;
}
*:first-child+html p.test1 {
background: #95FF95;
}
[/cc]

Список браузеров, поддерживающих хак:

  • Internet Explorer 7

Список браузеров, которые не поддерживают хак:

  • IE 4-6/Win
  • FireFox
  • NS 6.0-7.2
  • NS 4.x
  • Opera 5+
  • Safari
  • Konqueror 3
  • iCab 3
  • IE 5.x/Mac

IE 5.5 и IE 6 будет игнорировать любое правило, которое использует этот хак, даже если описывается цепочка селекторов, разделенных запятыми. Чтобы убедиться в этом, посмотрим на еще один тест.

Пример кода

[cc lang=»css»]
p.test2 {
background: #FAA;
}
* html p.test2 {
background: #FF8;
}
*:first-child+html p.test2,
* html p.test2 {
background: #95FF95;
}
[/cc]

Если фоновый цвет данного абзаца зеленый, значит хак работает. Если фон желтый, значит браузер поддерживает хак «* html» и игнорирует второе правило (для IE 7).

До сегодняшнего для указания персональных стилей для IE 7 я использовал следующую конструкцию (хак):

[cc lang=»css»]
* body p.test {
background: #95FF95;
}
[/cc]

А каким образом Вы задаете CSS-стили для браузера Internet Explorer 7?

* * *

Интернет-магазин «Atletiko» предлагает сертифицированные силовые тренажеры для дома и фитнес-залов, велотренажеры, беговые дорожки и другие спортивные товары по разумным ценам. Осуществляется доставка в любую точку России.

Комментарии (13)
  1. 1
    @

    Дмитрий, зря вы не любите условные комментарии ;)
    Управлять разными версиями Internet Explorer, с их помощью, одно удовольствие и html-код нисколько не страдает от этого.
    Сам пользуюсь и всем желаю того же.

    * html , *:first-child+html — красиво, но не более того, а запутаться легче легкого ;)

  2. 2

    Сергей, как говорится, каждому свое :).

    Я, конечно, согласен, что с точки зрения валидности CSS-кода будет правильнее выносить правила для IE в отдельные файлы, прицепляя их условными комментариями. Но, несмотря на это, мне гораздо проще и удобнее писать «тут же».

    Ведь получается, что в случае с СС нужно параллельно писать в 2 и/или больше файлов стилей, или же сначала писать все в одном, а затем осликовские стили выносить. А это лишние действия и затраты времени. В общем, я придерживаюсь минимализма.

    И что вы такого запутанного увидели в конструкции, подобной *:first-child+html? :)

  3. 3
    RMaksim
    @

    можно и “тут же”

    [cc lang=»html»]



    [/cc]

    и соотв в стилях
    для всех ИЕ .isIE .selector { }
    для всех ИЕ<7 .isIE6 .selector { }

    т.к. для 6-ки всегда че-нить надо попутно к 7-ке, (и наоборот) то отдельно не писался isIE7, но если кому надо…

  4. 4
    @

    RMaksim
    Красиво, кроме использования условных комментариев, можно написать на php функцию которая будет определять браузер через $_SERVER[‘HTTP_USER_AGENT’] и вписывать соответствующий класс.

  5. 5
    GreLI

    Можно проще: * html selector. Например:

    * html p.test2 { background: #95FF95 }
  6. 6

    GreLI, нет, этот вариант IE6 тоже понимает, поэтому для IE7 он не подходит.

  7. 7
    Michael

    Замечательный хак, спасибо :)

  8. 8

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

  9. 9
    nvgudz

    А на сегодня +1 браузер Maxthon 2.5.1. Хотя, это не удивительно, ведь движок у них один. Но «фирмы» разные, и отличия маленькие есть в отображении элементов, да и их мало. Но пришлось столкнуться с такой проблемой — как «разъединить» эти два браузера? Может, кто-то знает?

  10. 10
    kotomorda

    *html selector — IE6 и IE7
    *+html selector — IE7

  11. 11
    tvidoz

    .class {
    margin: auto9
    }

    Вот для IE9
    Добавьте, информативнее всё таки :)

  12. 13
    Михаил
    @

    У меня и этот хак срабатывает в IE8

Ваш комментарий