Опубликовано автор в категориях Верстальщику.

firefox-hacks
В принципе, при публикации данного рода статей необходимо большими буквами писать, что ИСПОЛЬЗОВАНИЕ ХАКОВ ВРЕДИТ ВАЛИДНОСТИ ВАШЕГО САЙТА! Однако бывают ситуации, когда использование данных средств оправдано, в особенности это касается верстки для Internet Explorer (хорошо хоть с восьмеркой попроще…), но иногда бывает необходимо создать особое правило и для нормальных браузеров. Это бывает редко, но к этому надо быть готовым. В этой статье, которую я нашел на одном из заокенских блогов мы рассмотрим CSS хаки для различных версий Firefox.

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

  • Для каждого хака, изменяйте только селектор #selector, .selector, и, конечно, декларации блоков.
  • Хаки, которые не валидны, обозначены знаком [!] в соответствующем комментарии.
  • Если вы обнаружите какие-либо противоречия, несоответствия, пожалуйста, оставьте комментарий.
  • Эта статья может быть дополнена вашими хаками, которые не описаны здесь. Пожалуйста, в комменты!

Также имейте в виду, что в целом есть два вида CSS хаков: нацеленные (таргетированные) и фильтры. Под нацеленными, мы имеем в виду применение стилей CSS к конкретному браузер (или группе браузеров) при исключении всех других. И наоборот, под фильтрацией, мы имеем в виду применение стилей CSS для каждого браузера, кроме определенного браузера (или группы браузеров). В сущности, хаки представляют собой две стороны одной медали.

CSS хаки таргетированные на любую версию Firefox

/* Target all Firefox */
#selector[id=selector] { color: red; }
 
/* Target all Firefox */
@-moz-document url-prefix() { .selector { color: red; } } 
 
/* Target all Gecko (includes Firefox) */
*>.selector { color: red; }

CSS хаки для Firefox 1.5 и выше

/* Target Firefox 1.5 and newer [!] */
.selector, x:-moz-any-link, x:only-child { color: red; }

CSS хаки для Firefox 2.0 и выше

/* Target Firefox 2 and older [!] */
body:empty .selector { color: red; }
 
/* Target Firefox 2 and older */
#selector[id=SELECTOR] { color: red; }
 
/* Target FireFox 2 and older [!] */
html>/**/body .selector, x:-moz-any-link { color: red; }

CSS хаки для Firefox 3 и, возможно, выше

/* Target FireFox 3 [!] */
html>/**/body .selector, x:-moz-any-link, x:default { color: red; }

Если у вас есть свои хаки для всех или конкретных версий Firefox то, пожалуйста, добавляйте их в комментарии.

UPDATE:

CSS hack для FireFox 4

Благодаря тому, что в FireFox4 был введен новый селектор — «:-moz-any», который дает возможность задать на любом уровне несколько селекторов сразу. Например:

:-moz-any(ol, ul) li {
    list-style-type: none
}
a:-moz-any(:hover, :visited) {
    color: black;
}

Мы получили новый CSS-хак для FireFox 4 и выше:

:-moz-any(x), .class_for_ff4 {
    color: red; /* стиль только для FF 4+ */
}

P.S. — мысли о продажах и комфорте…

Казалось бы каким образом может быть связана кухонная вытяжка в одессе с модными часами и семинарами по маркетингу? А может. Например как вытяжка так и часики tag replica — это предметы которые добавляют нам комфорта, а семинар по маркетингу — это неотъемлемый атрибут успешного развития тех людей, которые взялись продавать нам комфорт. Странно да! Продавать комфорт!Дана мебель информация. Дива мебель дана.

2 комментария к записи “Специальные CSS хаки для разных версий Firefox”

  1. Aleko

    Вот здесь я специально собрал проверенную отличную подборку css хаков. Надеюсь вам поможет: css хаки. В том числе я нашел (написал) хаки для хрома и ie8.

    Ответить

Оставить комментарий

  • (не будет показан)