главная / CSS / CSS хаки для IE, Chrome, Safari, Mozila

CSS хаки для IE, Chrome, Safari, Mozila

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

 1. <!--[if condition]> HTML <![endif]-->

Суть условных комментариев состоит в том, чтобы вместо слова condition подставить одно изо допустимых условий, приведу значения условий:

IE	Если это Internet Exlorer
lt IE version	Версия Internet Exlorer меньше значения version
lte IE version	Версия Internet Exlorer меньше или равная значению version
IE version	Версия Internet Exlorer равная значению version
gte IE version	Версия Internet Exlorer больше или равная значению version
gt IE version	Версия Internet Exlorer больше чем значение version, допустимые значения - 5, 5.5, 6 или 7

К примеру, Вы можете написать:

 1. <!--[if lte IE 7]> 
 2. <style>
 3. div {
 4. background:red;
 5. }
 6. </style>
 7. <![endif]-->

что будет означать - установить цвет фона всем элементам div как красный для браузеров Internet Explorer версий 7 и ниже. Или наоборот:

 1. <!--[if gte IE 7]> 
 2. <style>
 3. div {
 4. background:red;
 5. }
 6. </style>
 7. <![endif]-->

Дополнительный пример условных комментариев для Internet Eplorer:

 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2. <html lang="en">
 3. 	<head>
 4. 	<title>Test</title>
 5. 	<link href="all_browsers.css" rel="stylesheet" type="text/css">
 6. 	<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
 7. 	<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
 8. 	<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
 9. 	<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
10. 	</head>
11. 	<body>
12. 	<p>Test</p>
13. 	</body>
14. </html>

Существуют так называемые отрицательные условные комментарии, синтаксис которых следующий:

 1. <!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

Селекторы как CSS хаки

С условными комментариями закончим, перейдём к селекторам, следующий селектор поддерживается только браузером IE 6

 1. * html {}

Следующий селектор пригоден только для седьмой версии IE и ниже

 1. *:first-child+html {} * html {}

Следующий селектор пригоден только для седьмой версии IE

 1. *:first-child+html {}
 2.

Следующий селектор пригоден только для седьмой версии IE и всех современных браузеров, но не IE 6 - 5

 1. html>body {}

Для браузера Opera 9 и белее старых версий данного браузера

 1. html:first-child {}

Правила как CSS хаки

Правила CSS например !important так же могут служить CSS хаками в некоторых случаях, например, для того чтобы все браузеры отобразили цвет фона зелёным, кроме IE 6 версии (для этого браузера фон будет красным), нужно написать следующий стиль:

 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2. <html lang="en">
 3. 	<head>
 4. 	<title>Test</title>
 5. 	<style type="text/css">
 6. 	p
 7. 	{
 8. 	background: green !important; /* для всех мраузеров кроме IE версии 6 и ниже */
 9. background: red; /* IE 6 и ниже */
10. 	}
11. 	</style>
12. 	</head>
13. 	<body class="page-body">
14. 	<p>Test</p>
15. 	</body>
16. </html>
17.

IE 7 версии и ниже так же игнорирует селектор @import, и последующее за ним целое css правило:

 1. @import "stylesheet.css" all;
 2.

Будьте внимательны, так как последующие версии браузеров поддерживают данное правило!

Не рекомендуемые CSS хаки

Нижеуказанные хаки нежелательны, но работают, например следующий код работает в браузерах IE 6 версии и ниже:

 1. _property: value или -property: value
 2.

Код указанный выше будет разобран браузером IE версии 6 и ниже, но не остальными браузерами, поскольку в данной версии браузера, правило стандарта CSS - "селекторы не должны начинаться с дефиса или символа подчеркивания" не поддерживается. Не рекомендован данный селектор, потому что селекторы с префиксом и дефисом могут быть зарезервированы CSS в дальнейшим для создания новых правил или свойств. Следующим, не рекомендованным хаком, является пример с использованием символа звездочки предшествующей названию свойства, то есть синтаксис следующий:

 1. *property: value

Будьте внимательны, так как работа данного хака в последующих версиях браузеров IE не гарантируется!

Данное правило поддерживают только браузеры IE версии 7 и ниже.

Следующий код работает только в IE7

 1. >body

Следующий код работает только в IE версии 7 и ниже

 1. !important!

Следующий код не работает только в IE версии 6 и ниже, в остальных браузерах код должен работать:

 1. body>div

Аналогично предыдущему правилу:

 1. html[xmlns] div

IE 6 поддерживает, но все остальные браузеры - нет:

 1. * html div

Хаки для Webkit и Safari

Правило содержащееся между фигурными скобками будет работать только в Chrome и Safari 4

 1. @media screen and (-webkit-min-device-pixel-ratio:0) {
 2. .myClass { background-color: #FF0000; }
 3. #myId {color: #0000FF;}
 4. p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);}
 5. }

Правило содержащееся между фигурными скобками будет работать только в Chrome и Safari 3.1

 1. body:nth-of-type(1) p{
 2.  color: #333333;
 3. }

Источник: slyweb.ru

текущее:

CSS уловки, которые улучшат оптимизацию для поисковых систем

Закругление углов и прозрачность с помощью CSS

Основные показатели Google Adsense

НОВОСТИ

05.12.2013 - Уход за флэш-накопителем

05.12.2013 - Компьютер самопроизвольно выключается

05.12.2013 - Почему не запускается компьютер?

27.11.2013 - Canon Legria HF R406 - Описание видеокамеры

27.11.2013 - TravelMate P645 новый лэптоп бизнес-класса от Acer

2011 г., «VisMech.ru»