Каков наилучший способ иметь специфичные для Firefox правила CSS теперь после ограничения @ -moz-document

Question

@-moz-document был довольно полезным хаком для нацеливания Firefox в CSS. Например,

@-moz-document url-prefix() {
    /* Firefox-specific rules */
}

Но теперь, когда https://bugzilla.mozilla.org/show_bug.cgi?id=1035091 исправлено, старый хак больше не работает в Firefox Developer Edition, и я считаю, что этот патч скоро появится в стабильной версии. Так

1. Насколько я понимаю, листы UA поставляются с браузером для просмотра элементов по умолчанию, но что такое пользовательские листы?
2. Существуют ли альтернативные реализации только для CSS?

Answer 1

Вы можете использовать @supports запрос функции , проверяющий значение -moz- определенного префикса определенного поставщика, например,

Демонстрация Codepen

---

<p class="moz">Is it Mozilla?</p>

CSS

.moz::after { content: " nope."}

@supports (display: -moz-grid) {
   .moz::after { content: " yep!"}
}

Обратите внимание, что этот метод будет работать, пока это конкретное значение (например, -moz-grid) не будет удалено из поставщика вбудущее и может также использоваться для обнаружения ценностей других поставщиков (например, display: -webkit-box или display: -ms-flexbox)