CSS хаки

Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.

Css Хак — специальная CSS конструкция, которую понимают одни браузеры и игнорируют другие. Использование хаков часто говорит о непрофессиональности верстальщика. Но встречаются случаи, когда хак — единственный способ решения проблемы (например общеизвестные баги браузеров (см «Глюки браузеров»)). Не стоит так же забывать, что в наше время спешка — обычное явление. Посему сроками «на вчера» — никого не удивишь. Вот и нет времени разбираться почему не выходит так как хочется.

Плюс css хаков

Это быстрое решение проблемы. Прописали дополнительных строчек и все отлично, верстаем дальше.

Недостатки css хаков

  1. Нет уверенности как поведет себя сайт с выходом новых версий браузеров. Например, написали код с хаком для Firefox, через месяц выходит новая версия Safari и оказывается она тоже воспринимает этот хак! Приходится переделывать.
  2. Многие хаки не проходят валидацию — опасность этого описана в предыдущем пункте.

По возможности старайтесь избегать использования хаков. Для исправления ошибок IE используйте отдельный CSS-файл, котjрый подключается с помощью условных комментариев.

Глоссарий

Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично.

Хак — исправление ошибки или добавление новой функции посредством использования другой недокументированной или некорректно реализованной особенности.

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

CSS-хаки для браузера Internet Explorer

ZOOM:1 :
Хак, предназначенный для определения hasLayout
* { zoom : 1 ; }
	

PNG в IE6 :
Для IE6 подключается htc-файл iepngfix.htc, для правильной работы фоновых изображений формата PNG для всех элeментов, в файле cssf-ie6.css. Используется IE PNG Fix v1.0 RC4 последней версии.
* { behavior : url ( "css/iepngfix.htc" ); }
	

Если важны байты есть пример использования фильтра для IE:
.class { 
 background : none ; 
 
 filter : progid : DXImageTransform.Microsoft.AlphaImageLoader ( 
 src= '/images/png-image.png' , 
 sizingMethod= 'scale' 
 ); 
}
	

Отделение стилей от IE6 :
html>body .class { }head+body .class { }html:first-child .class { }
	

Отделение стилей от IE6 и IE7 :
html>/**/body { }

Отделение стилей от IE6 — IE8 :
*|html .class { }html:not([lang*=""]) .class { }
	

Conditional comments в IE :
Условные комментарии работают только в IE под Windows, для других браузеров они являются обычными комментариями, поэтому их можно безболезненно использовать. Синтаксис такой:
<!--[if условие]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <![endif]--><!--[if !условие]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <![endif]-->/* Если же вы хотите проигнорировать эксплорером какой-то кусок кода, то используйте !условие */
/* Условие может быть таким:
IE – для любой версии IE
lt IE v – (less than) для всех браузеров IE, версия которых меньше чем v
lte IE v – (less than or equal) для всех браузеров IE, версия которых меньше чем v, или такая же
gte IE v – (greater than or equal) – для IE, версия которых больше или равна v
gt IE v – (greater than) – для IE, версия которых больше v. */

Conditional comments в IE6, IE7, IE8 :
<!--[if IE 6]> <link href= "ie6.css" rel= "stylesheet" media= "all" /> <![endif]-->/* Таблица стилей для IE6 */
<!--[if IE 7]> <link href= "ie7.css" rel= "stylesheet" media= "all" /> <![endif]-->/* Таблица стилей для IE7 */
<!--[if IE 8]> <link href= "ie8.css" rel= "stylesheet" media= "all" /> <![endif]-->/* Таблица стилей для IE8 */

Box Model хак :
В IE существуют глюки, когда border и padding включаются в ширину элемента. Box Model хак фиксит их.
.class { 
 padding : 4em ; 
 border : 1em solid red ; 
 width : 30em; 
 width /**/ : /**/ 25em ; 
}
/* Для IE ширина блока меньше на величину padding + border */
	

Min-width и max-width в IE :
IE не понимает эти свойства css. Хак для блока выглядит так:
.class { 
 min-width : 500px ; 
 width : expression ( 
 document.body.clientWidth < 500? "500px" : "auto" 
 );}/* Для IE ширина блока меньше на величину padding + border */
	

.class { 
 min-width : 500px ; 
 max-width : 750px ; 
 width : expression ( 
 document.body.clientWidth < 500? "500px" : 
 document.body.clientWidth > 750? "750px" : "auto" 
 );}/* Для IE ширина блока меньше на величину padding + border */
	

Min-height хак от Дастина Диаза
.class { 
 min-height : 100% ; 
 height : auto !important ; 
 height : 100% ; 
}
	

Простые селекторы:
Не обязательно создавать отдельный файл для разных браузеров. Можно использовать индивидуальные css-селекторы в основном css-файле:
* html .class { } /* В случае, если у html-страницы есть доктайп, этот хак работает в IE6 *//* В случае quirks-mode, хак работает в IE6 и IE7. */*:first-child+html .class { } /* Для IE 7 и ниже (first-child) */*+html .class { } /* Для IE 7 */*:first-child+html .class { } /* Для IE 7 */html>body .class { } /* Для IE 7 и нормальных браузеров */html>/**/body .class { } /* Для нормальных браузеров (кроме IE 7) *//* Пример:
.class { background:red }
*html .class { background:green }
Во всех браузерах кроме IE6 и ниже бэкграунд будет красный, а в IE6 и ниже браузерах - зеленый */
	

Грязные хаки для IE6 :
.class { _background : #F00 ; }.class { -background : #F00 ; }.class { c\olor : #F00 ; } /* Не работает перед буквами a, b, c, d, e, f */
	

Грязные хаки для IE7 :
>body { background : #F00 ; }/* выбирает элемент body только в IE7 */html* { background : #F00 ; }/* выделяет все элементы внутри элемента html. Только для IE7 и ниже */-,.class { background : #F00 ; }.class { background : #F00 !important! ; }/* Хак работает по аналогии со свойством !important. Работает для IE7 и ниже */
	

Грязные хаки для IE8 :
.class { background : #F00\0/ ; }/* выбирает элемент body только в IE7 */
	

Грязные хаки, работающие в IE6 и IE7 :
.class { *background : #F00 ; }.class { //background : #F00 ; }.class { background : #F00 !ie ; }/* Хак работает по аналогии со свойством !important */
	

CSS-хаки для браузера Mozila FireFox

Хаки для всех версий MFF :
#class[id=class] { color : #F00 ; }@-moz-document url-prefix () { .class { color : #F00 ; } }
*>.class { color : #F00 ; }
	

Для MFF 1.5 и выше :
.class, x:-moz-any-link, x:only-child { color : #F00 ; }
	

Для MFF 2.0 и выше :
body:empty .class { color : #F00 ; }#class[id=CLASS] { color : #F00 ; }html>/**/body .class, x:-moz-any-link { color : #F00 ; }
	

Для MFF 3.0 и возможно выше :
html>/**/body .class, x:-moz-any-link, x:default { color : #F00 ; }

CSS-хаки для браузера Google Chrome

body:nth-of-type(1) .class {
 background : #000 ;
}
	

CSS-хаки для браузера Opera

Хаки для всех версий Opera :
@media all and (-webkit-min-device-pixel-ratio:10000), 
not all and ( -webkit-min-device-pixel-ratio : 0 ) { 
 .style { background : #F00 ; }
	}
	

@media all and ( min-width : 0px )
 { 
 .class { 
 color : #F00 ; 
 } 
	}
	

Для Opera 6 :
@media all and ( min-width : 1px )
 { { } 
 .class { 
 color : #F00 ; 
 } 
	}
	

Для Opera 7, 8 :
@media all and ( min-width : 1px )
 { 
 .class { 
 color : #F00 ; 
 } 
	}
	

Для Opera 9 :
@media all and ( width )
 { 
 .class { 
 color : #F00 ; 
 } 
	}
	

@media all and ( min-width : 0px )
 { 
 head~body .class { 
 color : #F00 ; 
 } 
	}
	

CSS-хаки для браузера Safari

body:first-of-type .class { color : #F00 ; }html:root*.class { color : #F00 ; }body:first-of-type .class { color : #F00 ; }body:first-of-type .class { color : #F00 ; }
	

@media screen and ( -webkit-min-device-pixel-ratio : 0 )
 { 
 .class { 
 color : #F00 ; 
 } 
}
/* Хак для Opera и Safari */
	

Selector Hacks

	/***** Selector Hacks ******/

	/* IE6 and below */
	* html #uno { color: red }

	/* IE7 */
	*:first-child+html #dos { color: red }

	/* IE7, FF, Saf, Opera */
	html>body #tres { color: red }

	/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
	html>/**/body #cuatro { color: red }

	/* Opera 9.27 and below, safari 2 */
	html:first-child #cinco { color: red }

	/* Safari 2-3 */
	html[xmlns*=""] body:last-child #seis { color: red }

	/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
	body:nth-of-type(1) #siete { color: red }

	/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
	body:first-of-type #ocho { color: red }

	/* saf3+, chrome1+ */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
	 #diez { color: red }
	}

	/* iPhone / mobile webkit */
	@media screen and (max-device-width: 480px) {
	 #veintiseis { color: red }
	}


	/* Safari 2 - 3.1 */
	html[xmlns*=""]:root #trece { color: red }

	/* Safari 2 - 3.1, Opera 9.25 */
	*|html[xmlns*=""] #catorce { color: red }

	/* Everything but IE6-8 */
	:root *> #quince { color: red }

	/* IE7 */
	*+html #dieciocho { color: red }

	/* IE 10+ */
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	 #veintiun { color: red; }
	}

	/* Firefox only. 1+ */
	#veinticuatro, x:-moz-any-link { color: red }

	/* Firefox 3.0+ */
	#veinticinco, x:-moz-any-link, x:default { color: red }

	/* FF 3.5+ */
	body:not(:-moz-handler-blocked) #cuarenta { color: red; }
	

Attribute Hacks

/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8, but also IE9 in some cases :( */
	#diecinueve { color: blue\9; }

	/* IE7, IE8 */
	#veinte { color/*\**/: blue\9; }

	/* IE6, IE7 -- acts as an !important */
	#veintesiete { color: blue !ie; } /* string after ! can be anything */

	/* IE8, IE9 */
	#anotherone {color: blue\0/;} /* must go at the END of all rules */

	/* IE9, IE10 */
	@media screen and (min-width:0\0) {
	 #veintidos { color: red}
	}
	

Property prefix hacks

/* Property prefix hacks */
/* IE6 only - any combination of these characters */
_ - ? ¬ ¦
/* IE6/7 only - any combination of these characters */
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |
	

@media hacks

	/* @media hacks */

	/* IE6/7 only (via Keith Clarke) */
	@media screen\9 { }

	/* IE6/7/8 (via Keith Clarke) */
	@media \0screen\,screen\9 {}

	/* IE8 (via Keith Clarke) */
	@media \0screen { }

	/* IE8/9 */
	@media screen\0 { }
	

Список CSS хаков для разных браузеров, IE6, IE7, IE8, FireFox, Opera, Safari, Chrome

/* хак только для IE8 Only */.myClass { 
 color:red\0/; /* красный */
 padding:70px\0/; /* отступ 70px только для Internet Explorer 8 */
}
/* IE 6 Only */* html .myClass {
...
} 
/* All except IE6 standards */.myClass { 
property /**/: value; 
} 
/* Firefox & IE 7, и выше */html>body .myClass {
 ...
}
/* Modern browsers only (not IE 7) */html>/**/body .myClass {
...
}
/* IE 7 Only */*:first-child+html .myClass {
 ...
}
/* Firefox Only */@-moz-document url-prefix() {
.myClass {
...
}
}
/* Opera Only */noindex:-o-prefocus, .MyClass {
color:red;
}
/* IE7 Only */div[class^="myClass"] .myClass2 { 
...
}
/* IE7 only */*+html .myClass { 
...
} 
/* hack for Opera <=9 */html:first-child .myClass {
...
} 
/* Firefox, Opera, Konqueror, Safari */*|html .myClass { 
...
}
/* IE8 beta 2 only (?)*/html:first-child .myClass [attr|=a-b] { 
...
} 
/* IE5/Mac only *//*\*//*/ .myClass { property: value; } /**/ 
/* Gecko only */.myClass:not([attr*=""]) { 
...
} 
/* Opera */@media all and (min-width: 0px) { 
html:first-child .myClass { 
...
} 
} 
/* Safari only */.myClass:not(:root:root) { 
...
} 
/* Safari 3.0 and Chrome only */@media screen and (-webkit-min-device-pixel-ratio:0) {
 .myClass {
 ....
 }
}
/* Chrome browser */body:nth-of-type(1) .myClass {
 ...
}
/* Safari browser css hack */body:first-of-type .myClass {property:value;}

CSS для Explorer

<!--[if IE]> 
	... если Internet Explorer ..
	<link href="ie-fix.css" type="text/css" rel="stylesheet"> 
	<![endif]--> 

	<!--[if IE 6.0]> 
		... если IE6 
	<![endif]--> 
		
	<!--[if IE 7]> 
		... если IE7
	<![endif]--> 

	<!--[if gte IE 5]> 
		... если IE5+
	<![endif]--> 

	<!--[if lt IE 6]> 
		.. если ниже IE 6
	<![endif]--> 

	<!--[if lte IE 5.5]> 
		... если ниже или равно IE 5.5 
	<![endif]--> 

	<!--[if gt IE 6]> 
		... если выше IE 6 
	<![endif]-->
	

Полупрозрачность фона в IE, Firefox, Opera

.myClass {
	background-color:#000;	
	-moz-opacity:.82; /* Firefox */ 
	opacity:.82; /* Opera */
	filter:alpha(opacity=82); /* IE */
	}
	

Убрать лишний padding в button в Firefox

button::-moz-focus-inner { 
	 border: 0;
	 padding: 0;
	}
	

Chrome/Firefox ... ?

button {
	 -webkit-border-fit: lines;
	}
	

Firefox 2

html>/**/body .selector, x:-moz-any-link { color:lime;}

Firefox 3

html>/**/body .selector, x:-moz-any-link, x:default { color:lime;}

Any Firefox

@-moz-document url-prefix() { 
 .selector { color:lime; }}

Дополнительно



Хаки для IE

СинтаксисКто понимаетПример
Проходят валидацию
* htmlIE6
		div {
		background: #ff0000;
		}
		* html div {
		background: #000;
		}
		
!importantIE6
div {
		background: #ff0000 !important; /* для всех браузеров */
		background: #000; /* для IE6 */
		}
		
*:first-child+htmlIE7
div {
		background: #ff0000;
		}
		*:first-child+html div {
		background: #000;
		}
		
*+htmlIE7+
может понять Opera 9 и ниже
div {
		background: #ff0000;
		}
		*+html div {
		background: #000;
		}
		
html>bodyпоймут все кроме IE6
div {
		background: #ff0000;
		}
		html>body div {
		background: #000;
		}
		
#ie#fixпоймут все кроме IE8
div {
		background: #ff0000; /* для ie8 */
		}
		div, #ie#fix {
		background: #000; /* для остальных браузеров */
		}
		
Не проходят валидацию (не рекомендуемые)
_свойство: значение
и
-свойство: значение
IE6
div {
		background: #ff0000; /* для всех браузеров */
		_background: #000; /* для IE6 */
		}
		
*свойство: значение
и
//свойство: значение
IE6
IE7
div {
		background: #ff0000; /* для всех браузеров */
		*background: #000; /* для IE6 и IE7 */
		}
		
html*IE6
IE7
Chrome
Safari
div {
		background: #ff0000;
		}
		html* div {
		background: #000;
		}
		
!ieIE6
IE7
div {
		background: #ff0000; /* для всех браузеров */
		background: #000 !ie; /* для IE6 и IE7 */
		}
		

Хаки для Firefox

СинтаксисКто понимаетПример
Не проходят валидацию (не рекомендуемые)
html:rootFF 1.5+
Opera 9.6
update: 14.01.10
неактуально
(понимают новые версии
opera, chrome, safari)
div {
		background: #ff0000;
		}
		html:root div {
		background: #000;
		}
		
x:-moz-any-link FF 1.5+
IE7
div {
		background: #ff0000;
		}
		div, x:-moz-any-link {
		background: #000;
		}
		
@-moz-document url-prefix()FF 1.5+
div {
		background: #ff0000;
		}
		@-moz-document url-prefix() {
		div {
		background: #000;
		}}
		

Хаки для Opera

СинтаксисКто понимаетПример
Проходит валидацию
html:first-childOpera 7-9.01
div {
		background: #ff0000;
		}
		html:first-child div {
		background: #000;
		}
		
Не проходят валидацию (не рекомендуемые)
@media all and (min-width: 0)
проходит валидацию CSS3
Opera 9-9.6
update 14.01.10
не актуально
(понимается новыми
версиями ff, chrome, safari)
div {
		background: #ff0000;
		}
		@media all and (min-width:0) {
		div {
		background: #000;
		}}
		
html>/**/body noindex:-o-prefocus, html>/**/body Opera 9.5-10
html>/**/body noindex:-o-prefocus, html>/**/body p {
		color:#0f0
		}
		

Хаки для Chrome и Safari

СинтаксисКто понимаетПример
Не проходят валидацию (не рекомендуемые)
body:nth-of-type(1)
update 14.01.10 - не актуально (понимается новыми версиями opera, ff, safari, chrome)
div {
		background: #ff0000;
		}
		body:nth-of-type(1) div {
		background: #000;
		}
		
html:root*
update 14.01.10 - не актуально (понимается новыми версиями opera, ff, safari, chrome)
div {
		background: #ff0000;
		}
		html:root*div {
		background: #000;
		}
		
html*
Safari
Chrome
IE6
IE7
div {
		background: #ff0000;
		}
		html*div {
		background: #000;
		}
		

Хаки Konqueror

СинтаксисКто понимаетПример
Не проходят валидацию (не рекомендуемые)
html:not(:nth-child(1)) #element
Konqueror
FF 3.5
#div {
		background: #ff0000;
		}
		html:not(:nth-child(1)) #div {
		background: #000;
		}