HTML-pedia
Уроки CSS
 

Навигация

Уроки CSS

CSS хаки для IE6, Opera, Firefox, Safari

Хаком называется набор приемов, направленных на то, чтобы для одного браузера задать стиль определенного элемента, который бы отличался от стиля для других браузеров. В первую очередь хаки предназначены для устранения существующих ошибок в браузере и создания так называемой кроссбраузерной верстки, когда один и тот же документ одинаково и без ошибок отображается в разных браузерах.

Использование !important

Работает: IE5 IE5.5 IE6

Не работает: IE7 IE8 Opera Safari Firefox

Описание

При добавлении параметра !important к значению стилевого параметра его важность повышается. Если переопределить значение того же параметра без !important, он будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.

Пример 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Хаки</title>
<style type="text/css">
#hack {
 background: #009a49 !important; /* Зеленый цвет */
 background: #9a0000; /* Красный цвет */
 padding: 10px; color: #fff;
}
</style>
</head>
<body>
<div id="hack">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div>
</body>
</html>

В данном примере в браузере Internet Exolorer 6 цвет фона блока будет красным, в остальных браузерах — зеленым.

Символ подчеркивания перед атрибутом

Работает: IE5 IE5.5 IE6

Не работает: IE7 IE8 Opera Safari Firefox

Описание

Если перед стилевым атрибутом добавить символ подчеркивания, то он будет пониматься только браузером Internet Explorer до 6 версии включительно.

Пример 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Хаки</title>
<style type="text/css">
#hack {
 background: #009a49; /* Зеленый цвет */
 _background: #9a0000; /* Красный цвет */
 color: #fff; padding: 10px;
}
</style>
</head>
<body>
<div id="hack">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div>
</body>
</html>

В данном примере в браузере Internet Exolorer 6 цвет фона блока будет красным, в остальных браузерах — зеленым.

Комбинация * html

Работает: IE5 IE5.5 IE6

Не работает: IE7 IE8 Opera Safari Firefox

Для обозначения любого элемента в CSS используется символ звездочки (*), который называется универсальным селектором. Его понимают все браузеры, но вот сочетание * HTML — только один Internet Explorer до 6 версии включительно. Добавляя эту комбинацию перед селектором, получим стиль, который работает только в одном браузере.

Пример 3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Хаки</title>
<style type="text/css">
* HTML DIV P {
 color: olive; /* Для браузера Internet Explorer */
}
DIV P {
 color: red; /* Для остальных браузеров */
}
</style>
</head>
<body>
<div><p>Lorem ipsum dolor sit amet...</p></div>
</body>
</html>

В данном примере в браузере Internet Explorer версии 6 и ниже текст отображается оливковым цветом, а в остальных браузерах — красным.

Универсальный селектор

Работает: IE5 IE5.5 IE6 IE7

Не работает:IE8 Opera Safari Firefox

Добавление символа звездочки (*) перед именем стилевого атрибута противоречит спецификации CSS, но понимается браузером Internet Explorer до версии 7 включительно. Соответственно, параметры со звездочкой впереди будут работать только в этом семействе браузеров.

Пример 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Хаки</title>
<style type="text/css">
#hack {
 background: #009a49; /* Зеленый цвет (для IE8 и всех остальных браузеров) */
 *background: #005b9a; /* Синий цвет (для браузера IE 7 и ниже) */
 color: #fff; padding: 10px;
}
</style>
</head>
<body>
<div id="hack">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div>
</body>
</html>

В данном примере синий цвет фона у блока будет установлен только для браузера Internet Explorer. В остальных цвет фона будет зеленым.

Условные комментарии

Работает: IE5 IE5.5 IE6 IE7IE8

Не работает:Opera Safari Firefox

Любой текст в коде HTML можно закомментировать и при этом он никак не будет отображаться на веб-странице. Для этого его следует поместить между элементами <!-- и -->. Браузер Internet Explorer кроме того поддерживает специальный синтаксис, в задачу которого входит интерпретировать код, если перед нами Internet Explorer. Остальные браузеры при этом видят обычный комментарий и не отображают его.

<!--[if IE]>
Код для браузера Internet Explorer
<![endif]-->

Внутри квадратных скобок допустимо использовать следующие ключевые слова:

IE — любая версия браузера Internet Explorer;
IE 5 — Internet Explorer 5;
IE 5.5 — Internet Explorer 5.5;
IE 6 — Internet Explorer 6;
IE 7 — Internet Explorer 7;
IE 8 — Internet Explorer 8;
lt — номер версии браузера меньше указанной;
gt — номер версии больше указанной;
lte — номер версии меньше или равен указанной;
gte — номер версии браузера больше или равен указанной.

Поскольку указанные элементы можно писать только внутри контейнера <BODY>, то следует добавить тег <STYLE>, как показано в примере 5.

Пример 5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Хаки</title>
<style type="text/css">
DIV {
 color: silver; /* Для всех браузеров, кроме IE */
}
</style>
</head>
<body>
<!--[if gt IE 5.5]>
<style type="text/css">
DIV {
 color: red; /* Для браузера Internet Explorer версии 5.5 и старше */
}
</style>
<![endif]-->
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</body>
</html>

@media all and (min-width)

Работает: Opera Safari

Не работает:IEFirefox

Правило @media используется для определения стиля, предназначенного только для определенных устройств. Конструкцию @media all понимают все браузеры, но Opera и Safari также поддерживают @media all and (min-width) — правило, появившееся в CSS3. Соответственно, помещая желаемые стилевые атрибуты внутрь этого правила, получим стиль, работающий только в браузерах Opera и Safari.

Пример 6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Хаки</title>
<style type="text/css">
DIV {
 background: #005b9a; /* Для браузеров IE и Firefox */
}
@media all and (min-width) {
 DIV {
  background: #fc0; /* Для Opera и Safari */
 }
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet...</div>
</body>
</html>

В данном примере в браузере Opera и Safari цвет блока отображается оранжевым, в то время как Internet Explorer и Firefox покажут его синим.

Псевдокласс root

Работает: Firefox Safari

Не работает:IEOpera

Псевдокласс root применяется к элементам верхнего уровня (называемых корневыми) и поддерживается CSS3. Конструкция HTML:root или *:root понимается браузерами Firefox и Safari, поэтому, используя контекстные селекторы в стилях (*:root селектор), получим стиль, работающий только в указанных браузерах.

Пример 7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Хаки</title>
<style type="text/css">
HTML:root DIV {
 background: #fc0; /* Для Firefox и Safari */
 padding: 10px;
}
DIV {
 background: #005b9a; /* Для IE и Opera */
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet...</div>
</body>
</html>

Данный код проходит валидацию как CSS 3, но не CSS 2.1.

Псевдокласс first-child

Работает: Opera

Не работает:IEFirefoxSafari

Псевдокласс first-child применяется к первому дочернему элементу. Хотя этот параметр понимают многие браузеры, но конструкция HTML: first-child работает только в Опере.

Пример 8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Хаки</title>
<style type="text/css">
HTML:first-child DIV {
 background: #fc0; /* Для браузера Opera */
 padding: 10px;
}
DIV {
 background: #005b9a; /* Для IE, Firefox и Safari */
}
</style>
</head>
<body>
 <div>Lorem ipsum dolor sit amet...</div>
</body>
</html>

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



Источник: Справочник по CSS. Версия 3.0 Автор: Влад Мержевич
 

© 2009 «html-pedia»

При использовании материалов «HTML-pedia» ссылка на сайт html-pedia обязательна.

Хостинг от uCoz