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.
14 марта 2008 15:27

perlexeded.livejournal.com (perlexeded.livejournal.com)
14 марта 2008, 19:52

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

bolk (bolknote.ru)
14 марта 2008, 21:26, ответ предназначен perlexeded.livejournal.com:

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

ELV1S (elv1s.ru)
15 марта 2008, 00:08

<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://elv1s.ru/x/s/bolknote.ru/moz.css">Не валидно</a>, конечно, как и любой -moz-.

bolk (bolknote.ru)
15 марта 2008, 00:21, ответ предназначен ELV1S (elv1s.ru):

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

bolk (bolknote.ru)
15 марта 2008, 00:24, ответ предназначен ELV1S (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)
15 марта 2008, 01:12, ответ предназначен bolk (bolknote.ru):

Да, я в курсе.

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

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

bolk (bolknote.ru)
15 марта 2008, 01:17, ответ предназначен ELV1S (elv1s.ru):

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

ELV1S (elv1s.ru)
15 марта 2008, 01:37, ответ предназначен bolk (bolknote.ru):

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

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

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

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

bolk (bolknote.ru)
15 марта 2008, 01:41, ответ предназначен ELV1S (elv1s.ru):

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

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

ELV1S (elv1s.ru)
16 марта 2008, 02:03, ответ предназначен bolk (bolknote.ru):

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

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

bolk (bolknote.ru)
16 марта 2008, 12:31, ответ предназначен ELV1S (elv1s.ru):

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

Елена (инкогнито)
17 июля 2013, 18:59, ответ предназначен bolk (bolknote.ru):

Евгений, вы просто бог!
@-moz-document url-prefix()
{
body { background: grey; color: white }
}
этот код просто спас меня от нервного срыва, спасибо огромное ))))

Евгений Степанищев (bolknote.ru)
17 июля 2013, 21:17, ответ предназначен Елена

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

fedor (инкогнито)
5 февраля 2014, 16:02

sps pomoglo

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)