CSS хаки для Firefox
На этой странице описаны CSS хаки для Firefox, используя которые можно назначить HTML-элементу какие-то свойства, понимаемые только этим браузером, но игнорируемые другими.
CSS хак для Firefox
В этом хаке используется at-правило не входящее в спецификацию CSS, которое понимает только Firefox всех версий (на момент написания статьи).
Синтаксис:
Валидация: нет.
Пример HTML и CSS: хак для Firefox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Хаки для Firefox</title>
<style type="text/css">
.par {
color: green; /* для всех */
}
@-moz-document url-prefix() {
.par {
color: red; /* для Firefox */
}
}
</style>
</head>
<body>
<p class="par">
В Firefox этот текст будет красным, в остальных браузерах - зеленым.
</p>
</body>
</html>CSS хак для Firefox и IE7
Данный хак понимает не только Firefox, но и IE7. Суть его заключается в том, что после нужного селектора через запятую указывается еще один, но так как он не соответствует синтаксису CSS, то все браузеры (кроме указанных) его игнорируют, считая ошибкой. Согласно того же синтаксиса, если в перечислении селекторов допущена ошибка — браузеры должны проигнорировать и все свойства, которые находятся внутри скобок, что собственно и происходит.
Синтаксис:
Валидация: нет.
Пример HTML и CSS: хак для Firefox и IE7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Хаки для Firefox</title>
<style type="text/css">
.par {
border: 3px orange solid; /* для всех */
}
.par, x:-moz-any-link {
border: 3px blue solid; /* для Firefox и IE7 */
}
</style>
</head>
<body>
<p class="par">
В Firefox и IE7 цвет рамки будет синим, в остальных браузерах - оранжевым.
</p>
</body>
</html>