Список CSS хаков
Ниже приведен список всевозможных хаков для браузеров IE6, IE7, IE8, FireFox, Opera, Safari
Список CSS хаков
/* хак только для 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 {
...
}
}
/* 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 < 9.5 only */
@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 {
....
}
}
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;
}
Еще из одного источника матерьял
CSS-хаки для браузера Opera
1
2
3
4
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;}
}
1
2
3
*|html[xmlns*=""] .style {
background: #F00;
}
1
2
3
4
5
html:first-child .style {
background: #F00;
}
/* код валидный */
/* только для Opera < 9.5 */
CSS-хаки для браузера FireFox
1
2
3
@-moz-document url-prefix() {
.style {background: #F00;}
}
CSS-хаки для браузера Internet Explorer 6
1
2
3
4
.style {
_background: #F00;
}
/* код валидный */
Несмотря на то, что принимает хак с подчеркиванием за ошибку,
спецификация CSS 2.1 использовать данную конструкцию.
1
2
3
4
* html .style {
background: #F00;
}
/* код валидный */
CSS-хаки для браузера Internet Explorer 7
1
2
3
4
*+html .style {
background: #F00;
}
/* код валидный */
1
2
3
4
*:first-child+html .style {
background: #F00;
}
/* код валидный */
1
2
3
html>body .style {
*background: #F00;
}
CSS-хаки для браузера Internet Explorer 8
1
2
3
.style {
background: #F00\0/;
}
Этот хак следует писать после стилей для остальных браузеров.
CSS-хаки для браузера Safari
1
2
3
4
body:last-child:not(:root:root) .style {
background: #F00;
}
/* для Safari < 4.0 */
|
1
2 3 4 |
html[xmlns*=""] body:last-child .style {
background: #F00; } /* для Safari < 4.0 */ |