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

616

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

css firefox css-hack

— avdgaag
источник

Возможно, вы захотите взглянуть на некоторые похожие вопросы и связанные с ними ответы ... stackoverflow.com/questions/738831/…

— AnonJr

3

Есть ли способ нацелить Firefox на Windows-машине против Mac?

— Кеган Квимби,

4

<! - [if Gecko]> ... include ... <! [endif] ->

— определяет

1252

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

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

<h1>This should be red in FF</h1>

Развернуть фрагмент

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

— Ionuț G. Stan
источник

17

Что именно означает url-prefix () после "@ -moz-document"? просто любопытно.

— Мэтт

17

@Matt, это способ фильтрации веб-сайтов, на которых применяется этот CSS. Другой вариант - использовать domain()фильтр. Например @-moz-document domain(google.com) {...}, примените прилагаемые правила CSS только к домену google.com.

— Ionuț G. Stan

10

Мне нравится, что вам не нужно создавать совершенно новый CSS-документ для этого, как вы делаете это для IE.

— Джей Ди Айзекс

7

@JohnIsaacks Вам не нужна отдельная таблица стилей для условных комментариев IE. Они могут быть встроенными. Хотите ли вы сделать это таким образом, это другой вопрос.

— Дилан

4

Стоит отметить, что этот обходной путь больше не работает с Firefox 59, выпущенного в марте 2018 года: bugzilla.mozilla.org/show_bug.cgi?id=1035091

— Джордан Грей

105

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

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

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}

<h1>This should be red in FF</h1>

Развернуть фрагмент

Больше @supports здесь

— laaposto
источник

11

Это гораздо более приятное решение, чем пример @ -moz-document url-prefix (), оно также хорошо работает с синтаксическим анализатором SCSS, тогда как другое - нет.

— Аластер Ходжсон

1

Я использую Firefox, и он все еще белый, это из-за версии, которую я использую?

— Антуан

3

@ Антуан Ты прав! Это не сработало для последних версий FF. Я обновил свой ответ. Это должно работать сейчас. Спасибо за указание на это!

— Лаапосто

83

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

— Вакас Али Хан Пуар
источник

66

Если я правильно понимаю, верхний не Chrome, а просто задает поведение по умолчанию, которое вы переопределяете для Firefox и IE.

— Muhd

3

Очень полезный. Как бывший любитель Firefox, я потрясен тем, что должен делать специфические взломы Firefox, подобные этому, но пока он работает, я могу жить с этим.

— SpaceBeers

Предложение по обнаружению IE не работает, если вы хотите добавить его в файл .css. Вы можете включить таблицы стилей таким образом в HTML. Если вы хотите использовать IE CSS в файле CSS, я рекомендую посмотреть здесь: keithclark.co.uk/articles/…

— Biepbot Von Stirling

16

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

— Hbirjand
источник

1

Не могли бы вы подробнее рассказать о «использовании хаков селекторов» и о том, как конкретно приведенный вами пример работает? Спасибо.

— jj_

1

Хорошо, понял это сам: в основном он скрывает второй селектор для других браузеров, которые не понимают первый. В этом случае только Mozilla понимает, _:moz-tree-row(hover)поэтому она будет единственной, кто сможет обработать .selector{}последующее событие. Этот специфический хакер в настоящее время работает на всех версиях Firefox, узнайте больше на сайте browserhacks.com .

— jj_

1

Я использовал Media Query Hack: \ @media screen и (-moz-images-in-menu: 0) {} Это хорошо сочетается с \ @media screen и (-webkit-min-device-pixel-ratio: 0) и Visual Studio не выдает предупреждение, используя его.

— Дэн Рэндольф

1

Обратите внимание, что -moz-images-in-menu: 0 было удалено в Firefox 52 - bugzilla.mozilla.org/show_bug.cgi?id=1302157

— jonathanKingston

13

Прежде всего, отказ от ответственности. Я действительно не поддерживаю решение, которое я представляю ниже. Единственный 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;
}

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

this.className += " firefox";

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

— Ionuț G. Stan
источник

11

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

— Rayjax
источник

7

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

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

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

— Kekoa
источник

Это похоже на хороший и стабильный подход & mdash; спасибо & mdash; хотя это все еще зависит от перехвата браузера. Я бы предпочел использовать что-то, что зависит от возможностей, например правило CSS только для Gecko или что-то в этом роде. Я использую тот же базовый подход: стили по умолчанию и специфичные для браузера надстройки.

— Avdgaag

1

@avdaag: обнаружение возможностей в большинстве случаев предпочтительнее, но когда вы пытаетесь внедрить хак, чтобы «исправить» ошибку конкретного движка рендеринга, тогда нацеливание на агента пользователя является, теоретически, оптимальным решением. Вы не отличаетесь от неизвестных браузеров; а поле user-agent должно указывать вам, какой механизм рендеринга использует браузер, поэтому даже если появится редкий браузер Gecko, ему все равно будет дано исправление. Тем не менее, многие браузеры теперь подделывают свои строки пользовательского агента из-за неправильного использования обнаружения браузера. Так что на практике это может не сработать.

— Lèse Majesté

6

Теперь, когда 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';
    }
  }
}
Развернуть фрагмент
Ориентация на унаследованные версии Firefox немного сложна - если вас интересуют только версии с поддержкой @supports, начиная с Fx 22 и выше, @supports not (animation: calc(0s))это все, что вам нужно:
@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}
... но если вам нужно поддерживать даже более старые версии, вам нужно использовать каскад , как продемонстрировано в проверке концепции выше.

— BoltClock
источник

3

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

— jvenema
источник

1

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

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

Развернуть фрагмент

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

— NVRM
источник

0

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

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

Вместо того, чтобы использовать

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

Выручил меня! Получил решение для предупреждения стиля линта отсюда

— Кайлас
источник