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

Slyweb

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

Любой веб-программист должен знать, что такое CSS хаки. CSS хаки - разновидность методов определяющих браузер средствами css, основанных на поддержке или не поддержке определенных css свойств тем или иным браузером.

Оглавление статьи "CSS хаки для IE, Chrome, Safari"

Условные комментарии
Селекторы как CSS хаки
Правила как CSS хаки
Не рекомендуемые CSS хаки
Хаки для Webkit и Safari

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

  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. }

IE6, IE7, IE8 никогда не будут поддерживать данный код. Более новые версии браузеров - Safari, Chrome и Firefox данный код так же поддерживают.

Вместе с данной статьёй чаще читают следующее:

Currently 2.12/5
1
2
3
4
5

2.1/5 (77 проголосовали)

Дата: 1 год назад - 2011.02.03

Комментариев: 0

Поделись статьёй:

Поделись статьёй, чтоб другие стали умнее...

Поделись статьёй:

Подпишись:

на комментарии к статье...

Комментарии к статье:

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

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

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

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.	@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.	}