Используя условные комментарии, легко ориентировать Internet Explorer на специфичные для браузера правила CSS:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
Иногда это двигатель Гекко (Firefox), который ведет себя плохо. Какой лучший способ нацелить только Firefox с вашими правилами CSS, а не на один другой браузер? То есть Internet Explorer должен игнорировать не только правила Firefox, но и WebKit и Opera.
Примечание: Я ищу «чистое» решение. Использование анализатора браузера JavaScript для добавления класса «firefox» в мой HTML, на мой взгляд, не считается чистым. Я бы предпочел увидеть что-то, что зависит от возможностей браузера, так же, как условные комментарии являются только «особенными» для IE ...
Хорошо, я нашел это. Это, пожалуй, самое чистое и простое решение, которое не зависит от включения JavaScript.
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
@-moz-document url-prefix() {
h1 {
color: red;
}
}
<h1>This should be red in FF</h1>
& Лт;!- конец фрагмента - >
Он основан на еще одном специфическом для Mozilla расширении CSS. Прямо здесь есть целый список этих расширений CSS: Mozilla CSS Extensions.
Вот как можно заняться тремя разными браузерами: IE, FF и Chrome
<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
width:490px;
}
/*This will work for firefox*/
@-moz-document url-prefix() {
#categoryBackNextButtons{
width:486px;
}
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
width:486px;
}
</style>
<![endif]-->
Обновлено (из комментария @Antoine)
Вы можете использовать @ supports
& Лт;!- начать фрагмент: js скрыть: false - >
@supports (-moz-appearance:none) {
h1 { color:red; }
}
<h1>This should be red in FF</h1>
& Лт;!- конец фрагмента - >
Подробнее о @supports
здесь
Вот некоторые взломы браузеров для нацеливания только на браузер Firefox
_:-moz-tree-row(hover), .selector {}
var isFF = !!window.sidebar;
var isFF = 'MozAppearance' in document.documentElement.style;
var isFF = !!navigator.userAgent.match(/firefox/i);
Это сработает, Firefox 3.6 и Later
@media screen and (-moz-images-in-menus:0) {}
Если вам нужна дополнительная информация, пожалуйста, посетите browserhacks
Прежде всего, отказ от ответственности. Я действительно не защищаю решение, которое я представляю ниже. Единственный специфичный для браузера CSS, который я пишу, предназначен для IE (особенно IE6), хотя я бы хотел, чтобы это было не так.
Теперь решение. Вы попросили, чтобы это было элегантно, поэтому я не знаю, насколько это элегантно, но это наверняка будет нацелено только на платформы Gecko.
Хитрость работает только тогда, когда JavaScript включен и использует привязки Mozilla (XBL), которые широко используются внутри Firefox и всех других продуктов на основе Gecko. Для сравнения это похоже на свойство CSS поведения в IE, но гораздо более мощное.
Три файла участвуют в моем решении:
ff.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
-moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
ff.xml
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="load-mozilla-css">
<implementation>
<constructor>
<![CDATA[
var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "ff.css");
document.getElementsByTagName("head")[0]
.appendChild(link);
]]>
</constructor>
</implementation>
</binding>
</bindings>
ff.css
h1 {
color: red;
}
Обновление: Вышеуказанное решение не так хорошо. Было бы лучше, если бы вместо добавления нового элемента LINK он добавил этот класс "firefox" к элементу BODY. И это возможно, просто заменив вышеупомянутый JS следующим:
this.className += " firefox";
Решение вдохновлено мозо-поведенческими деканами Эдвардса.
Использование специальных правил -engine обеспечивает эффективное нацеливание браузера.
<style type="text/css">
//Other browsers
color : black;
//Webkit (Chrome, Safari)
@media screen and (-webkit-min-device-pixel-ratio:0) {
color:green;
}
//Firefox
@media screen and (-moz-images-in-menus:0) {
color:orange;
}
</style>
//Internet Explorer
<!--[if IE]>
<style type='text/css'>
color:blue;
</style>
<![endif]-->
Вариант вашей идеи заключается в том, чтобы иметь «серверный детектор USER-AGENT», который будет определять, какой лист стилей прикрепить к странице. Таким образом, вы можете иметь firefox.css, ie.css, opera.css и т. Д.
.
Вы можете выполнить аналогичную вещь в самом Javascript, хотя вы можете не считать его чистым.
Я сделал аналогичную вещь, имея default.css
, который включает все общие стили, а затем конкретные таблицы стилей
добавляются для переопределения или улучшения значений по умолчанию.
Теперь, когда Firefox Quantum 57 вышел с существенными и потенциально нарушающими улучшениями в Gecko, которые в совокупности известны как Stylo или Quantum CSS, вы можете оказаться в ситуации, когда вам придется различать устаревшие версии Firefox и Firefox Quantum.
Из моего ответа здесь:
Вы можете использовать
@ supports
с выражениемcalc (0s)
в сочетании с@ -moz-document
для тестирования Stylo - Gecko не поддерживает значения времени в выраженияхcalc ()
, но Stylo делает: ,
& Лт;!- язык: lang-css - >
@ -moz-document url-prefix () { @supports (анимация: calc (0s)) { / Стайло / } }
Вот подтверждение концепции:
& Лт;!- начать фрагмент: js - >
body::before {
content: 'Not Fx';
}
@-moz-document url-prefix() {
body::before {
content: 'Fx legacy';
}
@supports (animation: calc(0s)) {
body::before {
content: 'Fx Quantum';
}
}
}
& Лт;!- конец фрагмента - >
Ориентация на устаревшие версии Firefox немного сложна - если вас интересуют только версии, поддерживающие
@supports
, то есть Fx 22 и выше,@ supports not (animation: calc (0s))
- это все, что вам нужно:
& Лт;!- язык: lang-css - >
@ -moz-document url-prefix () { @ не поддерживает (анимация: calc (0s)) { / Гекко / } }
... но если вам нужно поддерживать даже более старые версии, вам нужно [использовать каскад](https://stackoverflow.com/questions/16584228/what-is-the-the-the-the-the-the-the-the-the-profess- для поддержки-используя только-css / 16585200 # 165858500000000).
Единственный способ сделать это - с помощью различных взломов CSS, которые значительно повысят вероятность сбоя вашей страницы при следующих обновлениях браузера. Во всяком случае, это будет МЕНЬШЕ безопасно, чем использование sniffer js-browser.
Следующий код имеет тенденцию бросать предупреждения о стиле lint:
@-moz-document url-prefix() {
h1 {
color: red;
}
}
Вместо использования
@-moz-document url-prefix('') {
h1 {
color: red;
}
}
Помог мне! Получил решение для предупреждения о стиле ворса из здесь
Поддержка CSS имеет обязательную силу для javascript, как примечание.
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
if (CSS.supports("( -moz-user-select:unset )")){
console.log("FIREFOX!!!")
}
& Лт;!- конец фрагмента - >
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions