CSS хаки

:

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

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

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

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

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-хаки для браузера 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 */

Источник


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Комментарии: