Ориентация только на Firefox с CSS - PullRequest
Новая
       104

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

565 голосов
/ 05 июня 2009

Используя условные комментарии, можно легко настроить 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…

Ответы [ 11 ]

1159 голосов
/ 05 июня 2009

ОК, я нашел это. Это, пожалуй, самое чистое и простое решение, и оно не требует включения JavaScript. 

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

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

80 голосов
/ 21 января 2011

Вот как работать с тремя разными браузерами: 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]-->
64 голосов
/ 08 сентября 2015

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

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

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

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

13 голосов
/ 20 августа 2014

Вот некоторые взломы браузера для таргетинга только на браузер 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);

Media Hery Hacks

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

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

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

13 голосов
/ 05 июня 2009

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

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

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

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

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

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

this.className += " firefox";

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

11 голосов
/ 13 января 2015

Использование специальных правил -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 голосов
/ 05 июня 2009

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

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

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

3 голосов
/ 14 декабря 2017

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

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

Вы можете использовать @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';
    }
  }
}

Ориентация на устаревшие версии Firefox немного сложна - если вас интересуют только версии, поддерживающие @supports, то есть Fx 22 и выше, @supports not (animation: calc(0s)) - это все, что вам нужно: 

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

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

3 голосов
/ 05 июня 2009

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

0 голосов
/ 16 марта 2019

Поддержка CSS имеет привязку к javascript, как примечание. 

if (CSS.supports("( -moz-user-select:unset )")){
  console.log("FIREFOX!!!")
 }

https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

Страница:
...