CSS-хаки

Полезные хаки. Все CSS хаки в голове удержать невозможно, может кому-то тоже пригодиться


Подчеркивание или дефис — воспринимается IE6 и ниже

Код HTML:
.style {_background:#F00;}
Звездочка — воспринимается IE7 и ниже
Код HTML:
.style {*background:#F00;}
IE6 и ниже игнорирует эти правила
Код HTML:
. div>span {...}
. div+span {...}
Минимальная и максимальная ширина для IE6
Код HTML:
. #element {
   . min-width:780px;
   . max-width:1260px;
   . width: expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 1260? "1260px" : "auto");
    }
Условные комментарии (для подключения отдельных цсс для определенных браузеров)

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

<!--[if lte IE 6]><link rel="stylesheet" href="style/ie6.css" type="text/css" media="screen" /&rt;< ![endif]--&rt;

CSS хаки для Internet Explorer:

* для всех версий */
.class { *color: #8abdce; }
 
/* для Internet Explorer 6 */
.class { _color: #8abdce; }
 
или
 
.class { -color: #8abdce; }
 
/* для Internet Explorer 7 */
*+html .class { color: #8abdce; }
 
или
 
*:first-child+html .class { color: #8abdce; }
 
или
 
html>body .class {
*background: #F00;
}
 
/* для Internet Explorer 8 */
.ie8only { color /*\**/: #fff\9 }


CSS хаки для Opera:

@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
  .style {background: #F00;}
}
или
html:first-child .class { color: #8abdce; }
 
или
 
*|html[xmlns*=""] .style {
  background: #F00;
}


CSS хаки для FireFox:

html:root .class { color: #8abdce; } /* этот работает ещё и в Safari */
 
или
 
.class, x:-moz-any-link { color: #368EF1; }
 
или
 
@-moz-document url-prefix() {
  .style {color: #F00;}
}
 
/* для FireFox 1-2 */
@-moz-document url-prefix() {
     color: #F00;
}


CSS хаки для Safari:

html[xmlns*=""] body:last-child .class { color: #368EF1; }


CSS хаки для Safari и Google Chrome:

body:last-child:not(:root:root) .style {
  color: #F00;
}
 
или
 
body:nth-of-type(1) p {
     color: #333333;
}


Конечно хаки это зло – но иногда без них решить задачу просто невозможно.

Комментарии

Отправить комментарий