Персональный 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?
Смотрите также
Персональные CSS-хаки для Internet Explorer, Opera, FireFox, Safari, Google Chrome
Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний “телодвижений”. ...
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Эмуляция псевдо-селектора :nth-child() в IE7 и IE8
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т.е. одна строка, к примеру, с белым фоном, вторая ...
CSS-трюк: IE, таблица и "резиновые" изображения
Антон Молодой подкинул мне идею для этого поста. Он столкнулся с проблемой, с которой с моей косвенной помощью сам же и справился. Я с этим багом (да, речь пойдет об ...
Комментарии (13)
Дмитрий, зря вы не любите условные комментарии ;)
Управлять разными версиями Internet Explorer, с их помощью, одно удовольствие и html-код нисколько не страдает от этого.
Сам пользуюсь и всем желаю того же.
* html , *:first-child+html – красиво, но не более того, а запутаться легче легкого ;)
Сергей, как говорится, каждому свое :).
Я, конечно, согласен, что с точки зрения валидности CSS-кода будет правильнее выносить правила для IE в отдельные файлы, прицепляя их условными комментариями. Но, несмотря на это, мне гораздо проще и удобнее писать “тут же”.
Ведь получается, что в случае с СС нужно параллельно писать в 2 и/или больше файлов стилей, или же сначала писать все в одном, а затем осликовские стили выносить. А это лишние действия и затраты времени. В общем, я придерживаюсь минимализма.
И что вы такого запутанного увидели в конструкции, подобной *:first-child+html? :)
можно и “тут же”
[cc lang=”html”]