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

В верстке хаки вообще лучше не использовать. Но, раз они есть, грех о них не знать. Тем более, иногда это оправдано при использовании определенных особенностей браузера для ускорения рендеринга 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\0/; }

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 — пример свойства и его значения.

Источники: habrahabr.ru, habrahabr.ru 2 и dimox.name

Оцени публикацию:
  • 7,29
Оценили человек: 7

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • добавте в эту статью http://yapro.ru/web-master/css/baza-css-hakov-na-podrabotkah.html css хак для яндекс браузера.
    28 февраля 2014, 11:54 коммент полезен : +1 # Volodymyr
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » CSS »