Ориентация только на 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…

568
задан Shishir Morshed 25 December 2015 в 08:13
поделиться

4 ответа

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

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

Он должен быть красным в FF

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

1217
ответ дан 22 November 2019 в 22:02
поделиться

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

Решение основано на moz-поведениях Дина Эдвардса .

13
ответ дан 22 November 2019 в 22:02
поделиться

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

7
ответ дан 22 November 2019 в 22:02
поделиться

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

3
ответ дан 22 November 2019 в 22:02
поделиться
Другие вопросы по тегам:

Похожие вопросы: