Hanya menargetkan Firefox dengan CSS

616

Menggunakan komentar bersyarat, mudah menargetkan Internet Explorer dengan aturan CSS khusus browser:

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

Terkadang mesin Gecko (Firefox) yang bertingkah buruk. Apa cara terbaik untuk menargetkan hanya Firefox dengan aturan CSS Anda dan bukan satu browser lainnya? Artinya, tidak hanya Internet Explorer yang mengabaikan aturan khusus Firefox, tetapi juga WebKit dan Opera.

Catatan: Saya mencari solusi 'bersih'. Menggunakan sniffer browser JavaScript untuk menambahkan kelas 'firefox' ke HTML saya tidak memenuhi syarat sebagai bersih menurut saya. Saya lebih suka melihat sesuatu yang tergantung pada kemampuan browser, seperti komentar bersyarat hanya 'istimewa' untuk IE…

css  firefox  css-hack 
— avdgaag
sumber
Mungkin ingin melihat beberapa pertanyaan serupa dan jawaban terkait mereka ... stackoverflow.com/questions/738831/…
— AnonJr
3
apakah ada cara untuk menargetkan firefox pada mesin windows vs mac?
— Kegan Quimby
4
<! - [jika Tokek]> ... termasuk ... <! [endif] ->
— mendefinisikan

Jawaban:

1252

Oke, saya sudah menemukannya. Ini mungkin solusi paling bersih dan mudah di luar sana dan tidak bergantung pada JavaScript yang dihidupkan.

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

Ini didasarkan pada ekstensi CSS khusus Mozilla lainnya. Ada daftar lengkap untuk ekstensi CSS ini di sini: Mozilla CSS Extensions .

— Ionuț G. Stan
sumber
17
Apa sebenarnya yang dimaksud dengan awalan-url () setelah "@ -moz-document"? hanya penasaran.
— Matt
17
@ Matt, itulah cara untuk memfilter situs web tempat CSS diterapkan. Pilihan lain adalah menggunakan domain()filter. Misalnya @-moz-document domain(google.com) {...}akan menerapkan aturan CSS terlampir hanya di domain google.com.
— Ionuț G. Stan
10
Saya suka bagaimana Anda tidak harus membuat dokumen CSS yang sama sekali baru untuk ini seperti yang Anda lakukan untuk IE.
— JD Isaacks
7
@JohnIsaacks Anda tidak perlu stylesheet terpisah untuk komentar bersyarat IE. Mereka bisa sebaris. Apakah Anda ingin melakukannya dengan cara itu adalah pertanyaan lain.
— Dylan
4
Perlu dicatat bahwa solusi ini tidak lagi berfungsi pada Firefox 59, dirilis Maret 2018: bugzilla.mozilla.org/show_bug.cgi?id=1035091
— Jordan Grey
105

Diperbarui (dari komentar @Antoine)

Kamu bisa menggunakan @supports

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

Lebih banyak di @supports sini

— laaposto
sumber
11
Ini adalah solusi yang jauh lebih bagus daripada contoh @ -moz-document url-prefix (), itu juga cocok dengan parser SCSS sedangkan yang lain tidak.
— Alastair Hodgson
1
Saya menggunakan Firefox dan masih putih, apakah karena versi yang saya gunakan?
— Antoine
3
@Antoine Kamu benar! Tidak berfungsi untuk versi FF terbaru. Saya memperbarui jawaban saya. Itu seharusnya bekerja sekarang. Terima kasih untuk menunjukkannya!
— laaposto
83

Berikut cara mengatasi tiga browser berbeda: IE, FF dan 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]-->
— Waqas Ali Khan Puar
sumber
66
Jika saya memahami ini dengan benar, yang paling atas bukan chrome, tetapi hanya menentukan perilaku default yang Anda timpa untuk Firefox dan IE.
— Muhd
3
Sangat berguna. Sebagai mantan pencinta Firefox, saya sedih bahwa saya harus melakukan peretasan khusus Firefox seperti ini, tetapi selama berfungsi saya bisa hidup dengannya.
— SpaceBeers
Saran untuk deteksi IE tidak berfungsi jika Anda ingin menambahkannya ke file .css. Anda dapat memasukkan stylesheet dengan cara itu dalam HTML. Jika Anda ingin memiliki IE CSS dalam file CSS, saya sarankan melihat di sini: keithclark.co.uk/articles/…
— Biepbot Von Stirling
16

Berikut ini beberapa peretas peramban untuk menargetkan hanya peramban Firefox,

Menggunakan hack selector.

_:-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 Query Hacks

Ini akan berfungsi, Firefox 3.6 dan Nanti

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

Jika Anda memerlukan informasi lebih lanjut, Silakan kunjungi browser

— Hbirjand
sumber
1
Bisakah Anda menguraikan sedikit lebih banyak tentang "menggunakan hacks pemilih" dan bagaimana contoh yang Anda berikan bekerja secara spesifik? Terima kasih.
— jj_
1
Baiklah mendapatkannya sendiri: pada dasarnya yang dilakukannya adalah menyembunyikan pemilih kedua ke browser lain yang tidak mengerti yang pertama. Dalam hal ini hanya Mozilla yang mengerti _:moz-tree-row(hover)sehingga itu akan menjadi satu-satunya yang dapat memproses .selector{}berikutnya. Peretasan khusus ini saat ini berfungsi pada semua versi Firefox, periksa browserhacks.com untuk informasi lebih lanjut tentang ini.
— jj_
1
Saya menggunakan Media Query Hack: \ @media layar dan (-moz-images-in-menus: 0) {} Ini berjalan baik dengan layar \ @media dan (-webkit-min-device-pixel-ratio: 0) dan Visual Studio tidak memberikan peringatan saat menggunakannya.
— Dan Randolph
1
Harap dicatat -moz-gambar-dalam-menu: 0 telah dihapus di Firefox 52 - bugzilla.mozilla.org/show_bug.cgi?id=1302157
— jonathanKingston
13

Pertama-tama, penafian. Saya tidak menganjurkan solusi yang saya sajikan di bawah ini. Satu-satunya CSS spesifik browser yang saya tulis adalah untuk IE (terutama IE6), meskipun saya berharap bukan itu masalahnya.

Sekarang solusinya. Anda memintanya menjadi elegan jadi saya tidak tahu seberapa elegan itu tapi pasti akan menargetkan platform Gecko saja.

Trik ini hanya berfungsi ketika JavaScript diaktifkan dan memanfaatkan Mozilla bindings ( XBL ), yang banyak digunakan secara internal di Firefox dan semua produk berbasis Gecko lainnya. Sebagai perbandingan, ini seperti perilaku properti CSS di IE, tetapi jauh lebih kuat.

Tiga file terlibat dalam solusi saya:

  1. ff.html: file ke gaya
  2. ff.xml: file yang mengandung binding Gecko
  3. ff.css: gaya khusus 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;
}

Pembaruan: Solusi di atas tidak terlalu bagus. Akan lebih baik jika bukan menambahkan elemen LINK baru itu akan menambah bahwa "firefox" kelas pada elemen BODY. Dan itu mungkin, hanya dengan mengganti JS di atas dengan yang berikut ini:

this.className += " firefox";

Solusi ini terinspirasi oleh perilaku moz Dean .

— Ionuț G. Stan
sumber
11

Menggunakan aturan khusus mesin memastikan penargetan browser yang efektif.

<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
sumber
7

Variasi pada ide Anda adalah memiliki server-side USER-AGENT detectoryang akan mengetahui style sheet apa yang akan dilampirkan ke halaman. Dengan cara ini Anda dapat memiliki firefox.css, ie.css, opera.css, etc.

Anda dapat melakukan hal serupa di Javascript itu sendiri, meskipun Anda mungkin tidak menganggapnya bersih.

Saya telah melakukan hal yang sama dengan memiliki default.cssyang mencakup all common styles and then specific style sheetsditambahkan ke override, atau meningkatkan default.

— Kekoa
sumber
Itu beberapa menyukai pendekatan yang bagus dan stabil & mdash; terima kasih & mdash; meskipun itu masih tergantung pada sniffing browser. Saya lebih suka menggunakan sesuatu yang tergantung pada kemampuan, seperti aturan CSS khusus-Gecko atau sesuatu. Saya memang menggunakan pendekatan dasar yang sama: gaya default dan add-on khusus browser.
— avdgaag
1
@avdaag: Deteksi kemampuan lebih disukai dalam banyak kasus, tetapi ketika Anda mencoba menyuntikkan peretasan untuk "memperbaiki" bug mesin rendering tertentu, kemudian menargetkan agen pengguna, secara teori, adalah solusi optimal. Anda tidak membeda-bedakan browser yang tidak dikenal; dan bidang agen-pengguna seharusnya memberi tahu Anda mesin rendering apa yang digunakan browser, jadi bahkan jika browser Gecko langka datang, itu masih akan diperbaiki. Yang mengatakan, banyak browser sekarang memalsukan string agen pengguna mereka karena penggunaan deteksi browser yang tidak tepat. Jadi dalam praktiknya mungkin tidak berhasil dengan baik.
— Lèse majesté
6

Sekarang Firefox Quantum 57 keluar dengan perbaikan substansial - dan berpotensi melanggar - untuk Gecko secara kolektif dikenal sebagai Stylo atau Quantum CSS, Anda mungkin menemukan diri Anda dalam situasi di mana Anda harus membedakan antara versi lama Firefox dan Firefox Quantum.

Dari jawaban saya di sini :

Anda dapat menggunakan @supportsdengan calc(0s)ekspresi bersamaan @-moz-documentuntuk menguji Stylo - Gecko tidak mendukung nilai waktu dalam calc()ekspresi tetapi Stylo tidak:

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

Inilah bukti konsep:

body::before {
  content: 'Not Fx';
}

@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}
Luaskan cuplikan

Menargetkan versi lawas dari Firefox sedikit rumit - jika Anda hanya tertarik pada versi yang mendukung @supports, yaitu Fx 22 ke atas, @supports not (animation: calc(0s))yang Anda butuhkan:

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

... tetapi jika Anda perlu mendukung versi yang lebih lama, Anda harus menggunakan kaskade , seperti yang diperlihatkan dalam bukti konsep di atas.

— BoltClock
sumber
3

Satu-satunya cara untuk melakukan ini adalah melalui berbagai peretasan CSS, yang akan membuat halaman Anda lebih mungkin gagal pada pembaruan peramban berikutnya. Jika ada, itu akan KURANG daripada menggunakan sniffer js-browser.

— jvenema
sumber
0

Kode berikut cenderung untuk memberikan peringatan Style lint:

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

Alih-alih menggunakan 

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

Bantu aku! Dapatkan solusi untuk peringatan lint gaya dari sini

— Kailas
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.