Опубликовано: 12.05.2011 Последняя правка: 16.12.2015

CSS хаки для Firefox

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

CSS хак для Firefox

В этом хаке используется at-правило не входящее в спецификацию CSS, которое понимает только Firefox всех версий (на момент написания статьи).

Синтаксис:

@-moz-document url-prefix() { селектор { стили CSS } }

Валидация: нет.

Пример HTML и CSS: хак для Firefox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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, то все браузеры (кроме указанных) его игнорируют, считая ошибкой. Согласно того же синтаксиса, если в перечислении селекторов допущена ошибка — браузеры должны проигнорировать и все свойства, которые находятся внутри скобок, что собственно и происходит.

Синтаксис:

селектор, x:-moz-any-link { стили CSS }

Валидация: нет.

Пример HTML и CSS: хак для Firefox и IE7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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>

Результат примера