Ориентация только на Firefox с помощью CSS

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

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

Вы можете использовать @supports

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

Ответ 4

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

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

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

В моем решении задействованы три файла:

  • ff.html: файл в стиле
  • ff.xml: файл, содержащий привязки Gecko
  • 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;
}

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

this.className += " firefox";

Решение вдохновлено Моз-поведением Дин Эдвардс.

Ответ 5

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

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

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

JavaScript Hacks

var isFF = !!window.sidebar;

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

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

Прошивки для медиа-запросов

Это будет работать, Firefox 3.6 и более поздние версии

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

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

Ответ 6

Использование специальных правил -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]-->

Ответ 7

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

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

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

Ответ 8

Единственный способ сделать это - использовать различные хаки CSS, которые сделают вашу страницу более вероятной ошибкой при следующих обновлениях браузера. Во всяком случае, это будет БЕСПЛАТНО безопасно, чем использование jiff-браузера.

Ответ 9

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

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

Вы можете использовать @supports с выражением calc(0s) в сочетании с @-moz-document для тестирования для 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';
    }
  }
}

Ответ 10

Следующий код имеет тенденцию выдавать предупреждения стилей стиля:

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

Вместо использования

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

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