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

Автор: http://suprabiz.com/

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

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

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

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

Пример кода

  1. p.test1 {
  2.   background: #FAA;
  3. }
  4. *:first-child+html p.test1 {
  5.   background: #95FF95;
  6. }

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

  • 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. p.test2 {
  2.   background: #FAA;
  3. }
  4. * html p.test2 {
  5.   background: #FF8;
  6. }
  7. *:first-child+html p.test2,
  8. * html p.test2 {
  9.   background: #95FF95;
  10. }

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

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

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

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



Опубликовал admin
18 Ноя, Воскресенье 2007г.



Программирование для чайников.