Подборка CSS хаков для всех браузеров

Ниже привожу список css-хаков, актуальных на момент написания данной статьи. Все представленные CSS хаки проверены лично мной, мною же регулярно используются и прекрасно работают. Если вам есть, чем дополнить этот список, буду признателен за комментарии.

Для Opera

/**
 * Работает в Opera 10.10 и выше
 * Код валиден: Нет
 */
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
	.styleName{
		color: #f00;
	}
}
/**
 * Работает в Opera < 9.5
 * Код валиден: Да
 */
html:first-child .styleName {
	color: #f00;
}
[/code]

<h3>Для FireFox</h3>

[code lang="css"]
/**
 * Работает в FireFox 3.5.8 и выше
 * Код валиден: Нет
 */
@-moz-document url-prefix() {
	.styleName {
		color: #f00;
	}
}




Для Internet Explorer

/**
 * Работает в Internet Explorer 6 и ниже
 * Код валиден: Нет
 * Комментарий: используйте подчеркивание перед именем свойства
 */
.styleName {
	_color: #f00;
}
/**
 * Работает в Internet Explorer 7 и ниже
 * Код валиден: Нет
 * Комментарий: используйте звездочку перед именем свойства
 */
.styleName {
	*color: #f00;
}
/**
 * Работает в Internet Explorer 7
 * Код валиден: Да
 */
*+html .styleName {
	color: #f00;
}
/**
 * Работает в Internet Explorer 7
 * Код валиден: Да
 */
*:first-child+html .styleName {
	color: #f00;
}
/**
 * Работает в Internet Explorer 8
 * Код валиден: Нет
 */
.styleName {
	text-decoration: underline\0/;
}
/**
 * Работает в Internet Explorer 9
 * Код валиден: Нет
 */
.styleName {
	text-decoration: underline\9;
}

Общие хаки

Эти хаки работаю не только одном конкретном браузере, но при этом могут быть полезны. Например, следующий работает во всех браузерах кроме IE любых версий.

/**
 * Работает в FireFox 3.5.8, Opera 10.10, Chrome 4.0.249.89, Safari 4.0.4. Не работает в IE по 8-ю версию включительно
 * Код валиден: Нет
 */
@media all and (min-width: 0) {
	.styleName {
		color: #f00;
	}
}
/**
 * Работает в любых браузерах, кроме IE 7 и ниже
 * Код валиден: Да
 * Комментарий: данная конструкция подгружает указанный css файл
 */
@import "style.css" all;

Увы, но хаков, которые работали бы только в Chrome или Safari (4-я версия и выше) я так и не нашел. Если они мне попадутся или кто-то пришлет, я с большим удовольствием опубликую их.

Условные комментарии

Условные комментарии не являются хаками, как таковыми. Это всего лишь конструкции, которые понимает только Internet Explorer (любых версий под Windows OS). Все остальные браузеры считают их обычными комментариями и игнорируют.

Общий синтаксис имеет такой вид:

<!--[if condition]>
code
<![endif]-->

Условия могут быть следующими:

  • lt IE V – (less than) для Internet Explorer меньше версии - V
  • lte IE V – (less than or equal) для Internet Explorer меньше версии V или версии V
  • gt IE V – (greater than) – для Internet Explorer старше версии V
  • gte IE V – (greater than or equal) – для Internet Explorer старше версии V или версии V

Пример использования:

<!--[if gte IE 7]>
Код для Internet Explorer версий 7 и 8 включительно
<![endif]-->

В условные комментарии можно вложить не только CSS код. HTML и JavaScript тоже прекрасно работают.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *