Персональный CSS хак для Internet Explorer 7
Очень не люблю при верстке использовать для IE так называемые условные комментарии (Conditional Comments) - нет желания писать отдельный файл стилей (предпочитаю “все в одном”), да и лишние строки в хтмл-коде - не есть красиво.
С относительно недавнего времени к трем браузерам, в которых я просматриваю результат верстки, как было ранее (Opera, FireFox, IE 6.0), добавился еще один - Internet Explorer 7 (теперь их 4 - какой ужас!). А, соответственно, случаются ситуации, когда определенный стиль нужно применить только для 7-й версии ИЕ.
Попался мне на глаза CSS хак для Internet Explorer 7, который я раньше не встречал: *:first-child+html.
Если фоновый цвет данного абзаца зеленый, значит хак поддерживается браузером.
Пример кода
1 2 3 4 5 6 | 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 будет игнорировать любое правило, которое использует этот хак, даже если описывается цепочка селекторов, разделенных запятыми. Чтобы убедиться в этом, посмотрим на еще один тест.
Пример кода
1 2 3 4 5 6 7 8 9 10 | p.test2 { background: #FAA; } * html p.test2 { background: #FF8; } *:first-child+html p.test2, * html p.test2 { background: #95FF95; } |
Если фоновый цвет данного абзаца зеленый, значит хак работает. Если фон желтый, значит браузер поддерживает хак “* html” и игнорирует второе правило (для IE 7).
До сегодняшнего для указания персональных стилей для IE 7 я использовал следующую конструкцию (хак):
1 2 3 | * body p.test { background: #95FF95; } |
А каким образом Вы задаете CSS-стили для браузера Internet Explorer 7?
* * *
Интернет-магазин “Atletiko” предлагает сертифицированные силовые тренажеры для дома и фитнес-залов, велотренажеры, беговые дорожки и другие спортивные товары по разумным ценам. Осуществляется доставка в любую точку России.
Дмитрий, зря вы не любите условные комментарии ;)
Управлять разными версиями Internet Explorer, с их помощью, одно удовольствие и html-код нисколько не страдает от этого.
Сам пользуюсь и всем желаю того же.
* html , *:first-child+html - красиво, но не более того, а запутаться легче легкого ;)
Сергей, как говорится, каждому свое :).
Я, конечно, согласен, что с точки зрения валидности CSS-кода будет правильнее выносить правила для IE в отдельные файлы, прицепляя их условными комментариями. Но, несмотря на это, мне гораздо проще и удобнее писать “тут же”.
Ведь получается, что в случае с СС нужно параллельно писать в 2 и/или больше файлов стилей, или же сначала писать все в одном, а затем осликовские стили выносить. А это лишние действия и затраты времени. В общем, я придерживаюсь минимализма.
И что вы такого запутанного увидели в конструкции, подобной *:first-child+html? :)
можно и “тут же”
2
3
<!--[if lt IE 7]><body class="isIE isIE6"><![endif]-->
<!--[if !IE]>--><body><!--<![endif]-->
и соотв в стилях
для всех ИЕ .isIE .selector { }
для всех ИЕ<7 .isIE6 .selector { }
т.к. для 6-ки всегда че-нить надо попутно к 7-ке, (и наоборот) то отдельно не писался isIE7, но если кому надо…
RMaksim
Красиво, кроме использования условных комментариев, можно написать на php функцию которая будет определять браузер через $_SERVER[’HTTP_USER_AGENT’] и вписывать соответствующий класс.
Можно проще: * html selector. Например:
GreLI, нет, этот вариант IE6 тоже понимает, поэтому для IE7 он не подходит.
Замечательный хак, спасибо :)
Условные комментарии похи еще и тем, что грузят несколько CSS-файлов, когда на счет может быть каждая миллисекунда при ускорении загрузки сайта. В общем, спасибо автору за совет
А на сегодня +1 браузер Maxthon 2.5.1. Хотя, это не удивительно, ведь движок у них один. Но “фирмы” разные, и отличия маленькие есть в отображении элементов, да и их мало. Но пришлось столкнуться с такой проблемой - как “разъединить” эти два браузера? Может, кто-то знает?
*html selector - IE6 и IE7
*+html selector - IE7
.class {
margin: auto\9
}
Вот для IE9
Добавьте, информативнее всё таки :)
Они срабатывает и в IE8, поэтому не подходит.
У меня и этот хак срабатывает в IE8