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 16:27

webdev, firefox, css

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

Да, я в курсе.

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

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

ELV1S (elv1s.ru)
15 марта 2008, 02: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, 02:41, ответ предназначен ELV1S (elv1s.ru):

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

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

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

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

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

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

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

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

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

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

Подсказка по написанию комментария

В комментариях можно применять следующую специальную разметку:

слово, обрамлённое в «звёздочки» выделяется *жирным*
ссылка становится ссылкой: http://bolknote.ru
ссылка в скобках также становится ссылкой, закрывающая скобка не захватывается: (http://bolknote.ru)
каждую строку цитаты следует начинать со знака «больше»:
> это цитата
> из двух строк
можно вставить картинку, залитую на один из сервисов: «Яндекс.Фотки», «Фликр» или «Пикплз». Для этого нужно вставить на страницу полный адрес вашей картинки на сервисе, он превратится в картинку:

http://fotki.yandex.ru/users/bolknote/view/274311?page=3