Націлювання лише на Firefox за допомогою CSS

616

Використовуючи умовні коментарі, легко націлити на Internet Explorer за допомогою CSS-правил:

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

Іноді саме двигун Gecko (Firefox) погано поводиться. Який найкращий спосіб націлити лише Firefox за допомогою ваших правил CSS, а не жоден інший браузер? Тобто, Internet Explorer повинен ігнорувати не лише правила Firefox, але й WebKit та Opera.

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

css firefox css-hack

— avdgaag
джерело

Може хочете подивитися на деякі подібні питання і відповіді тир пов'язані з ... stackoverflow.com/questions/738831 / ...

— AnonJr

3

Чи є якийсь спосіб націлити Firefox на машині Windows проти Mac?

— Кеган Кімбі

4

<! - [якщо Gecko]> ... включати ... <! [endif] ->

— визначає

1252

Добре, я знайшов. Це, мабуть, найчистіше і просте рішення там, і це не покладається на включення JavaScript.

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

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

Розгорніть фрагмент

Він заснований на ще одному розширенні CSS для Mozilla. Тут є цілий список цих розширень CSS: Mozilla CSS Extensions .

— Ionuț G. Stan
джерело

17

Що саме означає URL-префікс () після "@ -moz-документа"? просто цікаво.

— Метт

17

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

— Ionuț G. Stan

10

Мені подобається, як для цього не потрібно створювати абсолютно новий CSS-документ, як це робиться для IE.

— JD Isaacks

7

@JohnIsaacks Вам не потрібен окремий таблицю стилів для умовних коментарів IE. Вони можуть бути лінійними. Чи ви хочете зробити це таким чином - інше питання.

— Ділан

4

Варто зазначити, що цей спосіб вирішення проблем Firefox 59, випущеного в березні 2018 року, більше не працює : bugzilla.mozilla.org/show_bug.cgi?id=1035091

— Jordan Grey

104

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

Можна використовувати @supports

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

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

Розгорніть фрагмент

Детальніше @supports тут

— лаапосто
джерело

11

Це набагато приємніше рішення, ніж приклад @ -moz-document url-prefix (), він також чудово грає з SCSS-аналізатором, тоді як інший цього не зробив.

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

1

Я використовую Firefox, і він все ще білий, це через версію, яку я використовую?

— Антуан

3

@Antoine Ви праві! Він не працював для останніх версій FF. Я оновив свою відповідь. Це має працювати зараз. Дякуємо, що вказали на це!

— laaposto

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

Якщо я правильно це розумію, верхній не є хромованим, а лише вказує поведінку за замовчуванням, яку ви перекриваєте для Firefox та IE.

— Мухд

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

Злам запитів медіа

Над цим працюватимуть, Firefox 3.6 та пізніші

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

Якщо вам потрібна додаткова інформація, відвідайте веб-переглядачі браузера

— Hbirjand
джерело

1

Не могли б ви детальніше розібратися про "використання селекторних хаків" та про те, як конкретно працює приклад, який ви надали? Дякую.

— jj_

1

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

— jj_

1

Я використовував Медіа-запит Hack: \ @media screen та (-moz-images-in-menus: 0) {} Це чудово поєднується з екраном \ @media та (-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

Використання специфічних правил забезпечує ефективне націлювання на браузер.

<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додані, щоб переосмислити або збільшити значення за замовчуванням.

— Кекоа
джерело

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

— avdgaag

1

@avdaag: виявлення можливостей є переважним у більшості випадків, але коли ви намагаєтеся ввести хак, щоб "виправити" певну помилку двигуна візуалізації, то орієнтація на користувацького агента теоретично є оптимальним рішенням. Ви не дискримінуєте невідомих веб-переглядачів; і поле-користувальницький агент повинен повідомити вам, який механізм візуалізації використовує браузер, тож навіть якщо рідкісний браузер 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 є дещо складним - якщо вам цікаві лише версії, які підтримують @supportsFx 22 і новіші версії , @supports not (animation: calc(0s))це все, що вам потрібно:
@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}
... але якщо вам потрібно підтримати навіть більш старі версії, вам потрібно буде скористатися каскадом , як показано в доказовій концепції вище.

— BoltClock
джерело

3

Єдиний спосіб зробити це через різні хакі CSS, що зробить вашу сторінку набагато більше шансів на збій при наступних оновленнях браузера. Якщо що-небудь, це буде МЕНШЕ безпечніше, ніж використання js-браузера sniffer.

— 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

Наступний код, як правило, кидає попередження щодо стилю:

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

Замість використання

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

Допомогли мені! Отримайте рішення для попередження стилю підказки звідси

— Кайлас
джерело