Подключение специальных css для ie, включая ie 7

Понимаю, что все, кто этим постоянно занимается, давно в курсе, но, думаю, тем, кто, как я, сталкивается с сайтостроением раз в пятилетку и сходу наталкивается на всякие надолбы, будет интересно. Собственно, всё, о чём я здесь сейчас напишу, было выяснено мной позавчера, в процессе настройки шаблона внешнего вида вот этого самого блога.

Фишка следующая: в шаблоне имеется два файла css, один нормальный, другой — для пизданутого говнобраузера Internet Explorer. Нормальный задан обычным способом, т.е. вот так:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

А для ie грузится специальный файл. И вот конструкция, с помощью которой он грузится, меня заинтересовала.

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="all" href="ie-style.css" />
<![endif]-->

Я полез искать и выяснил, что называется это «условные комментарии» и используется специально, чтобы задавать для ie или даже для отдельных версий ie особые стили (впрочем, условные комментарии работают не только для загрузки css, но вообще для любого html-кода). Подробно их синтаксис и рекомендуемые случаи использования описаны вот тут:

http://msdn.microsoft.com/en-us/library/ms537512.aspx

Интересно однако следующее: нормальные браузеры нафиг игнорируют эти самые условные комментарии и грузят ie-style.css вместе с нормальным css. Каким же образом в ie-style.css задаются стили, чтобы они переопределялись для ie и не мешали нормальному рендерингу страницы в нормальных браузерах? Оказывается, безумные вебмастера нашли для этого способ — так называемый css-хак *html. То есть, стили в ie-style.css задаются вот так:

* html .pizdaclass {бла-бла-бла}

Нормальные браузеры эту конструкцию игнорируют, а ie читает и считает вполне себе нормальным определением стиля.

Но вот засада — в ie7, который уже весьма и весьма распространился, эта хуйня не работает. Я это выяснил, открыв блог на ноуте с вистой в этом самом ie7. Сперва я подумал, что что-то не так указал в условных комментариях и седьмой осёл их не понял. Я исправил [if IE] на [if lte IE 7] — никакого толку, всё равно всё отображалось криво и косо. Тогда я полез в гугл и выяснил, что майкрософтовцы пофиксили в семерке баг, позволяющий ie считывать стили со «звёздочкой». «Молодцы какие! — подумал я. — Отчего-то баги, мешающие нормальному отображению контента они не пофиксили, а помогающие вебмастерам выкручиваться — пожалуйста! Что же, блин, делать?»

Всерьёз ковырять шаблон было откровенно ломы и я продолжил гуглить в поисках простого решения. И нашел его. Как оно выглядит — вы офигеете, я офигел. Чтобы стиль считывался только ie7, надо задавать его вот так:

*:first-child+html .pizdaclass {блаблабла}

Мне, вот, к слову, интересно, КАК можно было открыть такую конструкцию? Это ведь не просто звездочка, методом тыка не наткнешься. Или это документированный баг?

upd. Умные люди рассказали, что условного комментария вполне достаточно. То есть, его едят все броузеры, так что, если стили для каждой версии ie вынесены в отдельный файл, css-хаки не нужны. Но, поскольку у меня стили для ранних ие и для ие7 лежат в одном файле, для меня эти «хак-префиксы» всё-таки актуальны.

upd2. Текстовый редактор вордпресса заменяет два дефиса на длинное тире. Контейнер code не спасает. Не могу найти, где это отключается.

1 Comment

  1. Сейчас этот способ уже не канает. Нужно либо через медиазапросы решать проблему или через скрипты

Добавить комментарий