Главная CSS-верстка

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

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

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

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

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

Пример кода

p.test1 {
	background: #FAA;
}
*:first-child+html p.test1 {
	background: #95FF95;
}

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

  • 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 будет игнорировать любое правило, которое использует этот хак, даже если описывается цепочка селекторов, разделенных запятыми. Чтобы убедиться в этом, посмотрим на еще один тест.

Пример кода

p.test2 {
	background: #FAA;
}
* html p.test2 {
	background: #FF8;
}
*:first-child+html p.test2,
* html p.test2 {
	background: #95FF95;
}

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

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

* body p.test {
	background: #95FF95;
}

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

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

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

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

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

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

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

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

  3. можно и «тут же»

    [cc lang="html"]



    [/cc]

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

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

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

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

    * html p.test2 { background: #95FF95 }
  6. GreLI, нет, этот вариант IE6 тоже понимает, поэтому для IE7 он не подходит.

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

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

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

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

  11. .class {
    margin: auto9
    }

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

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

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