Это сайт — моя персональная записная книжка. Интересна мне, по большей части, история, своя жизнь и немного программирование.

CSS только для Mozilla (в том числе — FireFox)

У верстальщиков до сих пор возникает задача — подключить стили только для определённого браузера. Для IE проблема решаема — всё меньше верстальщиков не знают что такое conditional comments. Но исчезающе малое количество народу знает что такое per-site user stylesheet rules. Интересны они тем, что Mozilla FireFox поддерживет их через собственное правило — «@-moz-document».

Вообще, это правило позволяет подключать стили в зависимости от домена, URL или его префикса. Для нас важно, что эти правила увидит только FireFox.

Простой пример использования, из которого становится понятен общий принцип:

<style type="text/css">
body { background: white; color: black }

@-moz-document url-prefix()
{
    body { background: grey; color: white }
}
</style>
<body>White in FireFox</body>

Принципы фильтрации по URL и доменам так же могут оказаться полезными, о них можно почитать в архиве W3C.

15 комментариев
perlexeded.livejournal.com 2008

гм
насколько я помню, conditionas comments не проходят валидацию
а как с этим делом у мозилловской штуки?

Евгений Степанищев (bolknote.ru) 2008

Комментарий для perlexeded.livejournal.com:

Conditional comments валидацию, конечно же, проходят. Насчёт этой штуки — не знаю.

ELV1S (elv1s.ru) 2008

<a href=» http://jigsaw.w3.org/css-validator/validator?uri=http://elv1s.ru/x/s/bolknote.ru/moz.css%22%3E%D0%9D%D0%B5 валидно</a>, конечно, как и любой -moz-.

Евгений Степанищев (bolknote.ru) 2008

Комментарий для elv1s.ru:

Для меня валидность — не определяющая цель, но для многих важно, да, как приверженность к какой-то тусовке.

Евгений Степанищев (bolknote.ru) 2008

Комментарий для elv1s.ru:

Кстати: http://www.w3.org/TR/CSS21/syndata.html

should have one of the following formats:
’-’ + vendor identifier + ’-’ + meaningful name
’_’ + vendor identifier + ’-’ + meaningful name

For example, if XYZ organization added a property to describe the color of the border on the East side of the display, they might call it -xyz-border-east-color.

Other known examples:
-moz-box-sizing
-moz-border-radius
-wap-accesskey

ELV1S (elv1s.ru) 2008

Комментарий для Евгения Степанищева:

Да, я в курсе.

На счёт валидности в CSS всё не так однозначно. «-${&}{@#@» и «opacity: .5» не валидны, а эффект разный.

А тут в комментариях ссылки вставляются только тупо текстом?

Евгений Степанищев (bolknote.ru) 2008

Комментарий для elv1s.ru:

Ссылки не вставляются, зачем тут ссылки? opacity — валидно, просто текущий валидатор поддерживает CSS2.1, а opacity — CSS3.

ELV1S (elv1s.ru) 2008

Комментарий для Евгения Степанищева:

Чтобы не выделять ссылку и жать «Go to Web Address».

Валидатор говорит: «Property opacity doesn’t exist in CSS level 2.1 but exists in [css3]».

Тогда можно сказать, что и @-moz-document валидно, просто текущий валидатор не поддерживает это специфичное Gecko-правило :-)

Кстати, зачем здесь надпись «Ответить» картинкой сделана? Мне шрифт без сглаживания глаза режет.

Евгений Степанищев (bolknote.ru) 2008

Комментарий для elv1s.ru:

Ну, для at-rule не определены правила создания собственных наименований, так что не валидно.

А чем его ещё писать? Шрифта подходящего нет. А почему режет? Монитор CRT? На всех LCD, которые есть в округе, это смотрится хорошо. На хорошем CRT, который стоит дома в Казани — тоже хорошо.

ELV1S (elv1s.ru) 2008

Комментарий для Евгения Степанищева:

По поводу валидности. Я использую -o-link, -moz-border-radius, -webkit-transition и меня не огорчает то, что это не валидно. Браузер, не поддерживающий эти свойства, просто проигнорирует их.

LCD монитор у меня. Дело не в мониторе, а в том, что шрифт без сглаживания. Я бы написал тупо Ариалом. Хотя ладно, не важно.

Евгений Степанищев (bolknote.ru) 2008

Комментарий для elv1s.ru:

Лично меня тоже не огорчает, что это не валидно. Ариал намного шире, а это очень хороший шрифт, не всей графике нужно сглаживание.

Елена 2013

Комментарий для Евгения Степанищева:

Евгений, вы просто бог!

@-moz-document url-prefix()
{

body { background: grey; color: white }

}

этот код просто спас меня от нервного срыва, спасибо огромное ))))

Евгений Степанищев (bolknote.ru) 2013

Комментарий для Елена:

И это хорошо :)

fedor 2014

sps pomoglo

Oleg) 2023

Спасибо, пригодилось)