Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.
Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично.
Хак — исправление ошибки или добавление новой функции посредством использования другой недокументированной или некорректно реализованной особенности. (с) 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 
nly-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 */
Последние комментарии