Таргетинг только на Firefox с CSS

используя условные комментарии, легко настроить Internet Explorer с помощью специальных для браузера правил CSS:

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

иногда это двигатель геккона (Firefox), который плохо себя ведет. какой был бы лучший способ нацелиться только на Firefox с вашими правилами CSS, а не на один другой браузер? то есть, не только Internet Explorer должен игнорировать только правила Firefox, но и WebKit и Opera должны.

Примечание: Я ищу "чистое" решение. Использование JavaScript browser sniffer для добавления класса "firefox" в мой HTML не квалифицируется как чистый, на мой взгляд. Я бы хотел увидеть что-то, что зависит от возможностей браузера, так как условные комментарии являются только "особенными" для IE...

529
css css-hack firefox

10 ответов

хорошо, я нашел его. Это, вероятно, самое чистое и простое решение и не зависит от того, включен ли JavaScript.

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}
<h1>This should be red in FF</h1>

Он основан на еще одном конкретном расширении CSS Mozilla. Здесь есть целый список для этих расширений CSS:Mozilla CSS расширения.

1083

вот как справиться с тремя различными браузерами: 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]-->
77

Обновлено(из комментария @Antoine)

можно использовать @supports

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}
<h1>This should be red in FF</h1>

подробнее о @supports здесь

38

прежде всего, отказ от ответственности. Я не выступаю за решение, которое я привожу ниже. Единственный конкретный CSS браузера, который я пишу, предназначен для IE (особенно IE6), хотя я бы хотел, чтобы это было не так.

Итак, решение. Вы попросили его быть элегантным, поэтому я не знаю, насколько он элегантен, но он наверняка будет нацелен только на платформы Gecko.

трюк работает только тогда, когда JavaScript включен и использует привязки Mozilla (XBL), которые активно используются внутренне в Firefox и всех других продуктах на основе Gecko. Для сравнения, это похоже на свойство поведения CSS в IE, но гораздо более мощное.

в моем решении участвуют три файла:

  1. ff.html: файл в стиле
  2. ff.xml: файл, содержащий привязки геккона
  3. ff.css: специфический для Firefox стиль

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;
}

обновление: Вышеприведенное решение не так хорошо. Было бы лучше, если вместо добавления нового элемента ссылки он добавит это класс "firefox" в элементе BODY. И это возможно, просто заменив вышеуказанный JS следующим:

this.className += " firefox";

в решение вдохновлено МОЗ-поведение декана Эдвардса.

12

вот некоторые хаки браузера для таргетинга только на браузер Firefox,

использование селекторных хаков.

_:-moz-tree-row(hover), .selector {}

JavaScript Хаки

var isFF = !!window.sidebar;

var isFF = 'MozAppearance' in document.documentElement.style;

var isFF = !!navigator.userAgent.match(/firefox/i);

Media Query Hacks

Это будет работать, Firefox 3.6 и позже

@media screen and (-moz-images-in-menus:0) {}

Если вам нужна дополнительная информация,пожалуйста, посетите browserhacks

12

использование определенных правил движка обеспечивает эффективный таргетинг браузера.

<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]-->
9

вариация твоя идея-это server-side USER-AGENT detector это выяснит, какой стиль листа прикрепить к странице. Таким образом, вы можете иметь firefox.css, ie.css, opera.css, etc.

вы можете выполнить аналогичную вещь в самом Javascript, хотя вы не можете считать его чистым.

Я сделал аналогичную вещь, имея default.css который включает в себя all common styles and then specific style sheets добавляются для переопределения или улучшения значений по умолчанию.

7

единственный способ сделать это-с помощью различных CSS-хаков, что сделает вашу страницу более вероятной неудачей при следующих обновлениях браузера. Во всяком случае, это будет менее безопасно, чем использование сниффера JS-браузера.

3

теперь, когда Firefox Quantum 57 выходит с существенными - и потенциально разрушительными-улучшениями Gecko, известными как Stylo или Quantum CSS, вы можете оказаться в ситуации, когда вам придется различать устаревшие версии Firefox и Firefox Quantum.

из моего ответа здесь:

можно использовать @supports С calc(0s) выражения в сочетании с @-moz-document to test for Stylo-Gecko не поддерживает значения времени в calc() выражения, но Stylo делает:

@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}

вот доказательство концепции:

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)) все, что вам нужно:

@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}

... но если вам нужно поддерживать еще более старые версии, вам нужно используйте каскад, как показано в доказательстве концепции выше.

2

следующий код бросает стиль lint предупреждения:

@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}

вместо 

@-moz-document url-prefix('') {
    h1 {
        color: red;
    }
}

помог мне! Получил решение для предупреждения стиля lint от здесь

0