CSS хаки для браузеров

21 августа 2011

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

Хаки для IE. Наиболее простые и одновременно очень гибкие хаки. Хак имеет конструкцию:

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

Данный хак подключается в заголовочной части страницы между тегами <head></head> и после объявления основного файла стилей. Хак подключает файл стилей ie.css только для браузеров IE.

Для подключения стилей через такие хаки для конкретных версий IE используются следующие конструкции (для IE6, IE7, IE8? IE9):

<!--[if IE 6.0]><link rel="stylesheet" href="ie6.css" type="text/css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="ie8.css" type="text/css" /><![endif]-->
<!--[if IE 9]><link rel="stylesheet" href="ie9.css" type="text/css" /><![endif]-->

Далее пойдут хаки, которые применяются в файлах стилей (file.css)
Тут и ниже код:
.class_style - имя любого класса стилей
#id_style - имя любого идентификатора стилей

IE6. Тут применяется символ _ для параметров css разметки. Параметры с таким символом сработают только в шестом эксплоэре. Ниже в примере, фон страницы во всех браузерах будет красный, а в IE6 зелёный.

body
{
	background-color: red;
	_background-color: green;
}

IE7. Хоть это и выглядит странно, но для седьмой версии можно использовать три вида хаков

*+html .class_style
{
background-color: red;
}

*:first-child+html .class_style 
{
	background-color: red;
}

html>body .class_style
{
	*background-color: red;
}

IE8. Конструкцией очень похож на мозиловский хак

@media \0screen
{
	.class_style
	{
		background-color: red;
	}
}

Файрфокс (FF2, FF3)

@-moz-document url-prefix()
{
	.class_style 
	{
		background-color: red;
	}
}

Safari, версии ниже 4.0

body:last-child:not(:root:root) .class_style
{
	background-color: red;
}

Хром, версия 6.0 и ниже. Хак может сработать на некоторых версиях Safari

@media all and (-webkit-min-device-pixel-ratio:0)
{
	.class_style
	{
		background-color: red;
	}
}

Удачи в вёрстке и используйте хаки только в крайней необходимости.