База CSS хаков на подработках

Автор: Aport Пятница, Январь 23rd, 2015 Нет комментариев

Рубрика: Разное

В верстке хаки вообще лучше не использовать. Но, раз они есть, грех о них не знать. Тем более, иногда это оправдано при использовании определенных особенностей браузера для ускорения рендеринга web-страницы.

Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)

Всем известные Conditional comments в IE

Несмотря на известность, в них есть много редко используемого.
Например таблица стилей, которая будет видна всем браузерам, кроме IE версий 5-8.

<!--[if !IE]--><link href="styles.css" rel="stylesheet" media="all" /><!--[endif]-->

Conditional comments для 6, 7, 8 версии (8я версия тоже их поддерживает — не удивляйтесь).

<!—[if IE 6]><link href=»ie6.css» rel=»stylesheet» media=»all» /><![endif]—>

<!—[if IE 7]><link href=»ie7.css» rel=»stylesheet» media=»all» /><![endif]—>

<!—[if IE 8]><link href=»ie8.css» rel=»stylesheet» media=»all» /><![endif]—>

IE только

* html .class{background:red}

В случае если у html-страницы есть доктайп, этот хак работает только для IE6.
В случае quirks-mode, хак работает в IE6 и IE7.

*+html .class{background:red}

или

*:first-child+html .class{background:red}

В случае, если у html-страницы есть доктайп, этот хак работает в IE7.

IE6 только

.class{ _background:red }

.class{ -background:red }

IE7 только

-,.class{ background:red; }

*+html .style { background: #F00; }

*:first-child+html .style { background: #F00; }

html>body .style { *background: #F00; }

IE8 только

.style { background: #F00/; }

IE6 и IE7

.class{ *background:red }

.class{
//background:red;
}

.class{background:red!ie}

Хак, работающий в IE6 и IE7 по аналогии со свойством !important.

IE6, IE7 & Safari

html*.class{background:red}

Нюанс — в Google Chrome 2 не работает. Хак пригождается в общем для IE css-файле, когда нужно отделить стили от 8-ки

Safari < 4.0

body:last-child:not(:root:root) .style {
background: #F00;
}

html[xmlns*=""] body:last-child .style {
background: #F00;
}

Safari 3 только

html:root*.class{background:red}

Также не работает в Chrome 2. О причине использования такого хака и о других хаках для сафари можно узнать здесь.

FF2, FF3 только

@-moz-document url-prefix(){
.class{background:red}
}

FF2, FF3 и IE7

x:-moz-any-link,.class{background:red}

FF3 и IE7

x:-moz-any-link,x:default,.class{background:red}

Opera только

/* только для Opera < 11 */
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;}
}

/* только для Opera < 11 */
*|html[xmlns*=""] .style {
background: #F00;
}

/* только для Opera < 9.5 */
html:first-child .style {
background: #F00;
}

Opera 9.5 и IE7

noindex:-o-prefocus,.class{background:red}

Подсказка: для того, чтобы превратить его в хак только для оперы, воспользуйтесь любым обрамляющим хаком, который не поддерживает IE7.

Хак для FF2, FF3, Safari 3, Chrome 2, Opera 9.5

html:root .class{background:red}

Хак для Safari 3 и 4!, Chrome 2

@media screen and (-webkit-min-device-pixel-ratio:0) {
body:first-of-type .class {background: red}
}

Хаки для Safari 3, Chrome 2, Opera 9.5

body:first-of-type .class{background:red}

@media all and (min-width:0){
.class{background:red}
}

Хак для FF2, FF3, Safari 3 и Chrome 2

html:not([lang*=""]):not(:only-child) .class{background:red}

Этот хак может быть использован к примеру, если вы хотите для Safari и FF сделать скругленные уголки при помощи CSS, а для остальных браузеров хотите, чтобы было картинками.

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

<!—[if !IE 6]—><link href=»styles.css» rel=»stylesheet» media=»all» /><!—[endif]—>

html>body .class{background:red}

head+body .class{background:red}

html:first-child .class{background:red}

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

html>/**/body .class{background:red}

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

*|html .class{background:red}

html:not([lang*=""]) .class{background:red}

Об отделении стилей для IE

Сама Microsoft рекомендует использовать conditional comments (официальный блог). Я в своей работе использую conditional comments для всех IE:

<!--[if IE]><link href="ie.css" rel="stylesheet" media="all" /><![endif]-->

А затем дополнительно отделяю хаками* htmlи*+htmlстили для IE6 и IE7 соответственно. Оставшиеся стили получаются для всех IE.

Изменение рендеринга IE8

Добавление данной строчки в заголовок web-страницы изменяет тип рендеринга в зависимости от значения content (это не хак, но всё же вещь очень похожая по свойствам на хак):

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Основные значения content следующие (взято отсюда):

  • «IE=7» — включает режим Strict в котором рендерятся все страницы;
  • «IE=EmulateIE7» — включает режим совместимости с IE7, в котором в зависимости от DOCTYPE будет применяться либо стандартный для IE7 режим рендеринга (Strict), либо quirks-режим (Quirks);
  • «IE=EmulateIE8» — страница форсируется в режим «IE8 Standards» вне зависимости от того, включен ли режим совместимости «Compatibility View» в браузере пользователя, а quirks-страницы отображаются в Quirks-режиме.
  • «IE=8» — включается режим максимального соответствия стандартам «IE8 Standards».

В случае нежелания переписывать старые проекты под IE8 — вы можете воспользоватьсяIE=EmulateIE7

UPD. Хак для IE8:

/*/ #nav a {position:relative;} /**/

UPD2. Хак для IE8 в режиме стандартов:

.test { color /*\**/: blue\9 }

UPD3. Хак для любого IE, включая 8й в режиме стандартов:

.test { color: blue\9 }

Во всех перечисленных выше примерах .class — пример класса (можно указать вместо него id, тег и т.д.), а background:red — пример свойства и его значения.

 

Источник: yapro.ru

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

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты