CSS-фильтр для Gecko

Любой сознательный веб-работник понимает, что всевозможных фильтров и хаков лучше избегать, особенно когда речь идет о фильтрации в среде «продвинутых на стандартах» браузерах. В большинстве случаев нет необходимости определять стили, к примеру, отдельно для Firefox и Opera. Но что делать, если такая потребность все же есть?

В этом случае, можно воспользоваться CSS-селекторами, которые поддерживаются браузерами на движке Gecko, но при этом игнорируются остальными передовыми веб-проводниками. На текущий момент для наших целей вполне подойдут псевдо-элемент :root или псевдо-класс :not(). Оба приняты на вооружение Gecko, начиная с версии 0.9.

Рассмотрим технику на конкретных примерах. Возьмем див <div id="example">Какой-нибудь текст</div>:

#example{
 padding:0.5em;
 border:2px solid #ccc;
 color:#ccc;
 text-align:center;
}

1. :root (поддерживается Gecko, IE/Mac, Safari)

   :root #example{
    border-color: green;
    color: green;
   }

   Какой-нибудь текст
   
   
2. :not() (поддерживается Gecko, Safari)

   #example:not(body){
    border-color: green;
    color: green;
   }

   Какой-нибудь текст

Если указанные инструкции работают, то текстовое содержимое и границы блоков в приведенных примерах будут зеленного цвета.