CSS только для Firefox
Изоляция CSS кода, предназначенного для Mozilla Firefox, с помощью правила @-moz-document и пустого значения url-prefix(). Пример:
В Firefox этот текст красного цвета
HTML код:
<p>В Firefox этот текст красного цвета</p>
CSS код:
@-moz-document url-prefix() {
p {color: #c00;}
}
CSS только для Firefox
Правило @document, в принципе, не предназначалось для использования в качестве способа скрыть код от обработки браузером, не являющимся Firefox. Однако, фактически, код, заключенный в @-moz-document url-prefix() { p { } } игнорируется всеми основными современными браузерами. Поэтому его стали использовать, когда нужно что-то изменить именно для Mozilla Firefox.
Существует здравая мысль, что хаки нужно избегать, насколько это только возможно. По крайней мере, если речь о основных браузерах современных версий. Однако на практике это пока не всегда бывает возможным или оптимальным.
Поддержка в браузерах
- Windows: Firefox 1.5+, SeaMonkey 1.0+, Netscape 9.0
- Android: Firefox for Android 4+
- developer.mozilla.org/en-US/docs/Web/CSS/@document#browser_compatibility
- caniuse.com/?search=%40document
Данным способом возможно изолировать CSS код не только для Firefox, но и для других браузеров с движком Gecko. Таких, как, например, SeaMonkey 1.0+ или старый Netscape 9.0. В то время как в Firefox для iOS работать не будет, ибо Gecko в нем не используется. Из-за ограничений, связанных с безопасностью, которых придерживается Apple, применяется встроенный фреймворк, основанный на WebKit: Firefox for iOS и App Store Review Guidelines.
Интересно, существует еще один, довольно неожиданный, случай, когда хак срабатывает и текст становится красным: ELinks, текстовый веб-браузер с некоторой поддержкой CSS, запущенный под Linux или иной *nix системой в консоли, поддерживающей отображение цветов.
- Опубликовано: 21 Января, 2023
- Последнее редактирование: 4 Февраля, 2023