CSS Хаки

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

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

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

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

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

ZOOM:1 :

Пожалуй самый интересный хак, предназначенный для определения hasLayout
1
* { zoom : 1 ; }

PNG в IE6 :

Для IE6 подключается htc-файл iepngfix.htc, для правильной работы фоновых изображений формата PNG для всех элeментов, в файле cssf-ie6.css.
1
2
* { behavior : url ( "css/iepngfix.htc" ); }
/* Используется IE PNG Fix v1.0 RC4 последней версии */
Если важны байты есть пример использования фильтра для IE:
1
2
3
4
5
6
7
.class {
  background : none ;
  filter : progid : DXImageTransform.Microsoft.AlphaImageLoader (
    src= '/images/png-image.png' ,
    sizingMethod= 'scale'
  );
}

Отделение стилей от IE6 :

1
html>body .class { }
2
head+body .class { }
3
html:first-child .class { }

Отделение стилей от IE6 и IE7 :

1
html>/**/body { }

Отделение стилей от IE6 - IE8 :

1
*|html .class { }
2
html:not([lang*=""]) .class { }

Conditional comments в IE :

Условные комментарии работают только в IE под Windows, для других браузеров они являются обычными комментариями, поэтому их можно безболезненно использовать. Синтаксис такой:
1
<––[if условие]––> <link href= "styles.css" rel= "stylesheet" media= "all" /> <––[endif]––>
2
<––[if !условие]––> <link href= "styles.css" rel= "stylesheet" media= "all" /> <––[endif]––>
3
/* Если же вы хотите проигнорировать эксплорером какой-то кусок кода, то используйте !условие */
4
5
6
7
8
9
/* Условие может быть таким:
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 :

1
2
<––[if IE 6]––> <link href= "ie6.css" rel= "stylesheet" media= "all" /> <––[endif]––>
/* Таблица стилей для IE6 */
3
4
<––[if IE 7]––> <link href= "ie7.css" rel= "stylesheet" media= "all" /> <––[endif]––>
/* Таблица стилей для IE7 */
5
6
<––[if IE 8]––> <link href= "ie8.css" rel= "stylesheet" media= "all" /> <––[endif]––>
/* Таблица стилей для IE8 */

Box Model хак :

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

Min-width и max-width в IE :

IE не понимает эти свойства css. Хак для блока выглядит так:
1
2
3
4
5
6
7
.class {
  min-width : 500px ;
  width : expression (
    document.body.clientWidth < 500? "500px" : "auto"
  );
}
 
1
2
3
4
5
6
7
8
9
.class {
  min-width : 500px ;
  max-width : 750px ;
  width : expression (
    document.body.clientWidth < 500? "500px" :
    document.body.clientWidth > 750? "750px" : "auto"
  );
}
 
Min-height хак от Дастина Диаза
1
2
3
4
5
.class {
  min-height : 500px ;
  height : "auto" !important ;
  height : "500px" ; }
 

Простые селекторы:

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

Грязные хаки для IE6 :

1
.class { _background : #F00 ; }
2
.class { -background : #F00 ; }
3
.class { c\olor : #F00 ; } /* Не работает перед буквами a, b, c, d, e, f */

Грязные хаки для IE7 :

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

Грязные хаки для IE8 :

1
2
.class { background : #F00\0/ ; }
/* выбирает элемент body только в IE7 */

Грязные хаки, работающие в IE6 и IE7 :

1
.class { *background : #F00 ; }
2
.class { //background : #F00 ; }
3
4
.class { background : #F00 !ie ; }
/* Хак работает по аналогии со свойством !important */

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

Хаки для всех версий MFF :

1
#class[id=class] { color : #F00 ; }
2
@-moz-document url-prefix () { .class { color : #F00 ; } }
3
*>.class { color : #F00 ; }

Для MFF 1.5 и выше :

1
.class, x:-moz-any-link, x:only-child { color : #F00 ; }

Для MFF 2.0 и выше :

1
body:empty .class { color : #F00 ; }
2
#class[id=CLASS] { color : #F00 ; }
3
html>/**/body .class, x:-moz-any-link { color : #F00 ; }

Для FF 3.0 и возможно выше :

1
html>/**/body .class, x:-moz-any-link, x:default { color : #F00 ; }

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

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

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

Хаки для всех версий Opera :

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

Для Opera 6 :

1
2
3
4
5
@media all and ( min-width : 1px ) { { }
  .class {
    color : #F00 ;
  }
}

Для Opera 7, 8 :

1
2
3
4
5
@media all and ( min-width : 1px ) {
  .class {
    color : #F00 ;
  }
}

Для Opera 9 :

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

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

1
body:first-of-type .class { color : #F00 ; }
2
html:root*.class { color : #F00 ; }
3
body:first-of-type .class { color : #F00 ; }
4
body:first-of-type .class { color : #F00 ; }
1
2
3
4
5
6
@media screen and ( -webkit-min-device-pixel-ratio : 0 ) {
  .class {
    color : #F00 ;
  }
}
/* Хак для Opera и Safari */


Статья будет дополняться. Если ваши наблюдения отличаются

Skype Me™!

Автор статьи: Иванов Павел


Valid XHTML 1.0 Transitional Правильный CSS! Rambler's Top100 Яндекс цитирования