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…
Jawaban:
Oke, saya sudah menemukannya. Ini mungkin solusi paling bersih dan mudah di luar sana dan tidak bergantung pada JavaScript yang dihidupkan.
Ini didasarkan pada ekstensi CSS khusus Mozilla lainnya. Ada daftar lengkap untuk ekstensi CSS ini di sini: Mozilla CSS Extensions .
sumber
domain()
filter. Misalnya@-moz-document domain(google.com) {...}
akan menerapkan aturan CSS terlampir hanya di domain google.com.Diperbarui (dari komentar @Antoine)
Kamu bisa menggunakan
@supports
Lebih banyak di
@supports
sinisumber
Berikut cara mengatasi tiga browser berbeda: IE, FF dan Chrome
sumber
Berikut ini beberapa peretas peramban untuk menargetkan hanya peramban Firefox,
Menggunakan hack selector.
JavaScript Hacks
Media Query Hacks
Ini akan berfungsi, Firefox 3.6 dan Nanti
Jika Anda memerlukan informasi lebih lanjut, Silakan kunjungi browser
sumber
_: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.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:
ff.html
ff.xml
ff.css
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:
Solusi ini terinspirasi oleh perilaku moz Dean .
sumber
Menggunakan aturan khusus mesin memastikan penargetan browser yang efektif.
sumber
Variasi pada ide Anda adalah memiliki
server-side USER-AGENT detector
yang akan mengetahui style sheet apa yang akan dilampirkan ke halaman. Dengan cara ini Anda dapat memilikifirefox.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.css
yang mencakupall common styles and then specific style sheets
ditambahkan ke override, atau meningkatkan default.sumber
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 :
sumber
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.
sumber
Dukungan CSS mengikat javascript, sebagai catatan.
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
sumber
Kode berikut cenderung untuk memberikan peringatan Style lint:
Alih-alih menggunakan
Bantu aku! Dapatkan solusi untuk peringatan lint gaya dari sini
sumber