CSS хаки для IE
На этой странице описаны CSS хаки для IE, используя которые можно назначить HTML-элементу какие-то свойства, понимаемые только этим браузером, но игнорируемые другими.
CSS хаки для IE6
Браузер IE6 имеет больше всего багов и проблем с пониманием стандартов W3C, хотя для своего времени он был очень неплох.
Хак с применением правила CSS !important
IE6 игнорирует правило CSS !important, когда внутри селектора присутствует одно и то же свойство более одного раза. В этом случае он поступает просто и использует значение того свойства, которое находится в коде ниже других, независимо от того указан для него приоритет или нет. Соответственно, если сначала указать свойство с приоритетом, а ниже написать его же, но без приоритета, то все браузеры выберут первый вариант, а IE6 — второй. В итоге имеем валидный, соответствующий синтаксису CSS хак для IE6.
Хорошо, но как же поступить, если надо применить к элементу какое-то свойство, которое должно сработать только в IE6, а в других браузерах оно вообще не нужно? Все очень просто. Сначала, как обычно, пишете это свойство с !important, но указываете у него значение, которое оно имеет по умолчанию, а ниже пишете его же, но с необходимым вам значением. Вот и все. Кстати можно поступить и наоборот, задав для всех браузеров нужное значение свойства, а для IE6 установить по умолчанию. Все зависит от того, что вам надо.
Синтаксис:
Валидация: да.
Пример HTML и CSS: хак для IE6 и правило !important
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS хаки для IE</title>
<style type="text/css">
.par {
background: orange !important; /* для всех */
background: blue; /* для IE6 */
width: auto !important;
width: 200px;
}
</style>
</head>
<body>
<p class="par">
В IE6 цвет фона будет синим, а ширина параграфа 200px,
в остальных браузерах - фон оранжевым, ширина по умолчанию.
</p>
</body>
</html>Хак с применением селектора * html
Этот CSS хак для IE6 связан с применением универсального селектора, который ассоциируется в CSS сразу со всеми HTML-элементами на странице. Однако если его использовать в создании селектора потомков, где указать перед селектором html, то это будет противоречить всякой логике, хотя синтаксис CSS и не будет нарушен. Ведь получается, что таким объявлением мы говорим браузерам, что на странице присутствуют элементы, которым тег <HTML> является потомком. Естественно этого не может быть, так как данный тег — это корневой элемент HTML-страницы, и все браузеры это понимают и игнорируют такой селектор, но только не IE6.
Синтаксис:
Валидация: да.
Пример HTML и CSS: хак для IE6 и универсальный селектор
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS хаки для IE</title>
<style type="text/css">
.par {
color: green; /* для всех */
}
* html .par {
color: red; /* для IE6 */
}
</style>
</head>
<body>
<p class="par">В IE6 этот текст будет красным, в остальных браузерах - зеленым.</p>
</body>
</html>Хак с применением дочернего селектора
IE6 не понимает дочерние селекторы, что является отличным поводом для создания хака, если мы хотим, чтобы он «не видел» какие-то селекторы с определенными свойствами.
Синтаксис:
Валидация: да.
Пример HTML и CSS: хак для IE6 и дочерний селектор
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS хаки для IE</title>
<style type="text/css">
.par {
font-weight: bold; /* для всех */
}
html > body .par {
font-style: italic; /* для IE6 */
}
</style>
</head>
<body>
<p class="par">
В IE6 шрифт текста будет жирным, в остальных браузерах - не только жирным, но и курсивным.
</p>
</body>
</html>Хак с применением подчеркивания или дефиса
Этот CSS хак для IE6, использует особенность данного браузера распознавать свойства CSS, перед которыми ставится знак подчеркивания (_) или дефиса (-).
Синтаксис:
Валидация: нет.
Пример HTML и CSS: хак для IE6 и свойства с подчеркиванием или дефисом
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS хаки для IE</title>
<style type="text/css">
.par {
_text-align: center; /* поймет только IE6 */
-border: 2px red solid; /* и тоже распознает только IE6 */
}
</style>
</head>
<body>
<p class="par">
В IE6 будет рамка и текст по центру, в остальных браузерах все останется по умолчанию.
</p>
</body>
</html>CSS хаки для IE6 и IE7
Как и другие браузеры, семейство IE понимает некоторые хаки, сразу несколькими версиями. Здесь мы рассмотрим те, которые поддерживают шестой и седьмой Internet Explorer.
Хак с применением CSS expression
Вообще, это не совсем хак, так как CSS expression — это внедренная в браузер технология, которая позволяет использовать скрипты прямо внутри CSS. Эти скрипты указываются вместо значения у свойства и применяются для его динамического расчета. То есть то, что высчитает скрипт, в итоге и становится значением. Таким образом можно заткнуть многие дыры шестого и седьмого IE, но помните, что expression замедляет (иногда серьезно) работу браузера, поэтому лучше подключать его через условные комментарии. Да и вообще вместо хаков лучше использовать условные комментарии.
Синтаксис:
Валидация: нет.
Пример HTML и CSS: CSS expression в IE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS хаки для IE</title>
<style type="text/css">
body {
min-width: 1000px; /* для всех */
_width: expression(document.body.clientWidth > 1000? "auto": "1000px"); /* для IE6 */
}
</style>
</head>
<body>
<p>Содержимое страницы.</p>
</body>
</html>Как вы знаете, IE6 не понимает свойство CSS min-width, поэтому в данном примере скрипт внутри expression высчитывает необходимое значение и подставляет его в свойство width.
Хак с применением символов слеша и звездочки
Если перед CSS-свойством поставить слеш (/) или звездочку (*), то поймут его только IE6 и IE7, на чем и основан данный хак.
Синтаксис:
Валидация: нет.
Пример HTML и CSS: хак для IE6 и IE7 со слешем и звездочкой
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS хаки для IE</title>
<style type="text/css">
.par {
color: red; /* для всех, включая IE6 и IE7 */
/font-style: italic; /* только для IE6 и IE7 */
*background: blue; /* только для IE6 и IE7 */
}
</style>
</head>
<body>
<p class="par">
Во всех браузерах будет красный текст,
но в IE6 и IE7 он будет еще и курсивным, плюс добавится синий фон.
</p>
</body>
</html>Хак с применением символа !
Если через пробел после значения свойства CSS поставить восклицательный знак (!), то его не проигнорируют только браузеры IE6 и IE7. Эта особенность и послужила для создания хака.
Синтаксис:
Валидация: нет.
Пример HTML и CSS: хак для IE6 и IE7 со знаком !
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS хаки для IE</title>
<style type="text/css">
.par {
background: green; /* для всех, включая IE6 и IE7 */
color: white !; /* только для IE6 и IE7 */
}
</style>
</head>
<body>
<p class="par">
Во всех браузерах будет зеленый фон,
но в IE6 и IE7 к нему добавится белый текст.
</p>
</body>
</html>CSS хаки для IE7
Здесь поговорим о CSS хаках, которые понимает только IE7.
Хак с применением универсального и соседнего селекторов
Internet Explorer начал поддерживать соседние селекторы с версии 7.0, однако с этой поддержкой в Microsoft немного переборщили. Дело в том, что если для создания соседнего селектора использовать универсальный селектор и селектор тегов html, то он не должен работать, ведь у тега <HTML> не может быть соседей (<!DOCTYPE> не в счет). Однако в IE7 такое сочетание работает, что и было использовано для очередного хака.
Синтаксис:
Валидация: да.
Пример HTML и CSS: хак для IE7 с универсальным и соседним селекторами
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS хаки для IE</title>
<style type="text/css">
.par {
border: 3px green solid; /* для всех */
}
* + html .par {
border: 3px red solid; /* для IE7 */
}
</style>
</head>
<body>
<p class="par">
В IE7 рамка будет красной, в остальных браузерах - зеленой.
</p>
</body>
</html>Хак с применением универсального и соседнего селекторов + :first-child
Этот хак похож на предыдущий, только в селектор добавился псевдокласс CSS :first-child.
Синтаксис:
Валидация: да.
Пример HTML и CSS: хак для IE7 с псевдоклассом CSS :first-child и универсальным и сосоедним селекторами
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS хаки для IE</title>
<style type="text/css">
.par {
font-weight: bold; /* для всех */
}
*:first-child + html .par {
font-style: italic; /* для IE7 */
}
</style>
</head>
<body>
<p class="par">
Во всех браузерах шрифт будет жирный, но в IE7 еще и курсивный.
</p>
</body>
</html>CSS хаки для IE8
IE8 уже довольно хорошо поддерживает стандарты W3C, однако и в нем иногда приходится использовать хаки, чтобы устранить некоторые погрешности.
Хак с применением идентификаторов
Если в таблице стилей поставить рядом (без пробелов) два идентификатора, то согласно синтаксиса CSS это будет означать, что мы хотим применить стили к HTML-элементу, который содержит оба этих идентификатора одновременно. Но синтаксис HTML не предусматривает наличие у одного элемента сразу двух идентификаторов (в отличие от классов), поэтому по логике вещей такое указание браузерам надо игнорировать. И IE8 с этим согласен, то есть он воспринимает такое указание, как ошибку, а вот остальные браузеры — нет.
А теперь о самом хаке. Если в CSS указать нужный селектор, а через запятую от него слитно написать два идентификатора, то IE8 не воспримет подобные стили и пропустит все, что находится в скобках. Таким образом можно создавать CSS, который поймут все браузеры кроме восьмого Эксплорера.
Синтаксис:
Валидация: да.
Пример HTML и CSS: хак для IE8 с идентификаторами
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS хаки для IE</title>
<style type="text/css">
.par {
color: orange; /* для IE8 */
}
.par, #ie8#only {
color: blue; /* для остальных */
}
</style>
</head>
<body>
<p class="par">
В IE8 цвет текста будет оранжевым, а в остальных браузерах - синим.
</p>
</body>
</html>CSS хаки для IE8 и IE9
Хаки, которые одновременно понимают браузеры IE8 и IE9.
Хак с применением символов \0/
Если в конце значения свойства поставить знаки \0/, то все браузеры его пропустят, кроме IE8 и IE9.
Синтаксис:
Валидация: нет.
Пример HTML и CSS: хак для IE8 и IE9 с символами \0/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS хаки для IE</title>
<style type="text/css">
.par {
border: 2px orange solid; /* для всех */
}
.par {
border: 2px blue solid\0/; /* для IE8 и IE9 */
}
</style>
</head>
<body>
<p class="par">
В IE8 и IE9 рамка будет синей, а в остальных браузерах - оранжевой.
</p>
</body>
</html>