CSS-хаки

CSS-хаки

  В браузерах одинаково отображаются не все html-тэги. Поэтому и используемые стили к таким тэгам, в разных браузерах будут видны по-разному. Чтобы отобразить такие тэги во всех браузерах одинаково, нужно для каждого менять стили.
Для решения данной проблемы имеются 2 пути:
  • отдельный файл со стилями для каждого браузера
  • использование CSS-хаков
  Отдельный файл со стилями для каждого браузера использовать это не лучший вариант. Тогда, как правило, приходится менять несколько свойств. Все же остальные свойства остаются неизменными. Такое приводит к повторению кода. Поэтому рассмотрим подробнее использование хаков.
  CSS-хак - это правило, понимаемое или игнорируемое браузером, которому оно написано. Как и все правила CSS-хаки пишутся в таблице стилей.

Синтаксис хаков для Internet Explorer 6

* html Имя_правила {
...
} /*только для IE6, валидный код*/
Имя_правила {
_Свойство;
} /*только для IE6*/

Синтаксис хаков для Internet Explorer 7

*+html Имя_правила {
...
} /*только для IE7, валидный код*/
*:first-child+html Имя_правила {
...
} /*только для IE7*/
html>body Имя_правила {
...
}

Синтаксис хаков для Opera

html:first-child Имя_правила {
...
} /* только для Opera < 9.5, валидный код */
@media all and (min-width: 0) {
Имя_правила {...}
} /*только для Opera*/

Синтаксис хаков для Firefox

html:root Имя_правила {
...
} /*только для Firefox*/
@-moz-document url-prefix() {
Имя_правила {...}
}

Синтаксис хаков для Safari

html[xmlns*=""] body:last-child Имя_правила {
...
}

Синтаксис хаков для Safari и Google Chrome

body:last-child:not(:root:root) Имя_правила {
...
}