Несколько функций @ rule, соединенных запятой

Question

Я пытаюсь использовать некоторые собственные правила для Firefox, и до сих пор я использовал
@-moz-document url-prefix()
Но в соответствии с документами @-moz-document не будет поддерживаться в будущих версиях.
Вместо этого@document будет поддерживаться.

Поэтому я изменил это:

@-moz-document url-prefix() {
   ...
}

На это

@-moz-document url-prefix(),
@document url-prefix() {
   ...
}

Но по какой-то причине правила больше не применяются

Answer 1

Причина, по которой это не сработает, заключается в том, что цепочечные селекторы / директивы CSS оцениваются как единое целое.Если одна из частей не проходит оценку, весь стиль игнорируется

Пример:

// ? 
[type="range"]::-moz-range-thumb, [type="range"]::-ms-thumb { ... }
                 makes IE skip             makes Firefox skip

// ?
[type="range"]::-moz-range-thumb { ... }    makes IE skip (Firefox will work) 
[type="range"]::-ms-thumb { ... }           makes Mozilla skip (IE will work)

В вашем случае текущий Firefox будет понимать @ -moz-document url-prefix (), но не @documenturl-prefix (), заставляющий пропустить стиль.

Поэтому при работе с реализациями, специфичными для поставщика, всегда держите ваши стили разделенными.

Надеюсь, это имело смысл: -)

Answer 2

С страницы MDN :

С версии 61: эта функция находится за предпочтением layout.css.moz-document.content.enabled (необходимо установитьправда).Чтобы изменить настройки в Firefox, посетите страницу about: config.