Yalnızca CSS ile Firefox'u hedefleme

616

Koşullu yorumları kullanarak Internet Explorer'ı tarayıcıya özgü CSS kurallarıyla hedeflemek kolaydır:

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

Bazen yanlış davranan Gecko motorudur (Firefox). Başka bir tarayıcıyla değil, yalnızca CSS kurallarınızla Firefox'u hedeflemenin en iyi yolu nedir? Yani, Internet Explorer yalnızca Firefox kurallarını göz ardı etmekle kalmaz, aynı zamanda WebKit ve Opera'yı da göz ardı etmelidir.

Not: 'Temiz' bir çözüm arıyorum. HTML'ye bir 'firefox' sınıfı eklemek için bir JavaScript tarayıcı sniffer kullanmak bence temiz değil. Çok koşullu yorumlar IE için sadece 'özel' gibi tarayıcı yeteneklerine bağlı bir şey görmek istiyorum…

css firefox css-hack

— avdgaag
kaynak

Bazı benzer sorulara ve ilgili cevaplara bakmak isteyebilirsiniz ... stackoverflow.com/questions/738831/…

— AnonJr

3

bir Mac vs Windows makinede firefox hedeflemek için herhangi bir yolu var mı?

— Kegan Quimby

4

<! - [Gecko eğer]> ... dahil ... <[endif] ->

— tanımlar

1252

Tamam, buldum. Bu muhtemelen en temiz ve kolay çözümdür ve JavaScript'in açık olmasına güvenmez.

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

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

Snippet'i genişlet

Mozilla'ya özgü başka bir CSS uzantısına dayanıyor. Bu CSS uzantıları için tam bir liste var: Mozilla CSS Uzantıları .

— Ionuț G. Stan
kaynak

17

"@ -Moz-document" sonrasında url-prefix () tam olarak ne anlama geliyor? sadece merak.

— Matt

17

@Matt, bu CSS'nin uygulandığı web sitelerini filtrelemenin bir yoludur. Başka bir seçenek de domain()filtreyi kullanmaktır . Örneğin @-moz-document domain(google.com) {...}, ekteki CSS kurallarını yalnızca google.com alan adına uygular.

— Ionuț G. Stan

10

IE için yaptığınız gibi bunun için tamamen yeni bir CSS belgesi oluşturmanıza gerek yok.

— JD Isaacks

7

@JohnIsaacks IE koşullu yorumları için ayrı bir stil sayfasına ihtiyacınız yoktur. Satır içi olabilirler. Bunu bu şekilde yapmak isteyip istemediğiniz başka bir soru.

— Dylan

4

Bu geçici çözümün Mart 2018'de yayınlanan Firefox 59'dan itibaren artık işe yaramadığını belirtmek gerekir : bugzilla.mozilla.org/show_bug.cgi?id=1035091

— Jordan Gray

105

Güncellendi (@Antoine yorumundan)

Kullanabilirsiniz @supports

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

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

Snippet'i genişlet

Burada daha fazlası@supports

— laaposto
kaynak

11

Bu @ -moz-document url-prefix () örneğinden çok daha hoş bir çözümdür, SCSS ayrıştırıcısıyla da güzel oynar, diğeri ise değil.

— Alastair Hodgson

1

Firefox kullanıyorum ve hala beyaz, kullandığım sürümden dolayı mı?

— Antoine

3

@Antoine Haklısın! En son FF sürümlerinde çalışmadı. Cevabımı güncelledim. Şimdi çalışmalı. İşaret ettiğin için teşekkürler!

— laaposto

83

Üç farklı tarayıcıyla nasıl baş edeceğiniz aşağıda açıklanmıştır: IE, FF ve 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
kaynak

66

Bunu doğru anlarsam, en üstteki krom değildir, ancak Firefox ve IE için geçersiz kıldığınız varsayılan davranışı belirtir.

— Muhd

3

Çok kullanışlı. Eski bir Firefox sevgilisi olarak, Firefox'a özel hack'leri böyle yapmak zorunda olduğum için bağırıyorum ama işe yaradığı sürece onunla yaşayabilirim.

— SpaceBeers

Bir .css dosyasına eklemek istiyorsanız IE algılama önerisi çalışmaz. Bununla birlikte, HTML sayfalarına stil sayfalarını da bu şekilde ekleyebilirsiniz. Bir CSS dosyasında IE CSS olmasını istiyorsanız, buraya bakmanızı

— Biepbot Von Stirling

16

İşte yalnızca Firefox tarayıcısını hedeflemek için bazı tarayıcı saldırıları,

Seçici kesmek kullanma.

_:-moz-tree-row(hover), .selector {}

JavaScript Hack'leri

var isFF = !!window.sidebar;

var isFF = 'MozAppearance' in document.documentElement.style;

var isFF = !!navigator.userAgent.match(/firefox/i);

Medya Sorgusu Hack'leri

Bu üzerinde çalışacak, Firefox 3.6 ve sonrası

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

Daha fazla bilgiye ihtiyacınız varsa, lütfen tarayıcı korsanlarını ziyaret edin

— Hbirjand
kaynak

1

"Seçici hack'leri kullanma" ve sağladığınız örneğin özellikle nasıl çalıştığı hakkında biraz daha ayrıntılı bilgi verebilir misiniz? Teşekkürler.

— jj_

1

Tamam kendim anladım: temelde yaptığı şey ikinci seçiciyi ilkini anlamayan diğer tarayıcılara gizlemek. Bu durumda sadece Mozilla anlar, _:moz-tree-row(hover)bu yüzden gelecek olanları işleyebilecek tek kişi olacaktır .selector{}. Bu özel saldırılar şu anda tüm Firefox sürümlerinde çalışıyor, bunun hakkında daha fazla bilgi için browserhacks.com adresini ziyaret edin .

— jj_

1

Media Query Hack: \ @media ekranını ve (-moz-images-in-menus: 0) {} Bu, \ @media ekranı ve (-webkit-min-device-pixel oranı: 0) ile uyumludur ve Visual Studio bunu kullanarak uyarı atmaz.

— Dan Randolph

1

Lütfen unutmayın: menülerdeki menüler: 0, Firefox 52'de kaldırıldı - bugzilla.mozilla.org/show_bug.cgi?id=1302157

— jonathanKingston

13

Her şeyden önce, bir feragatname. Aşağıda sunduğum çözümü gerçekten savunmuyorum. Tarayıcıya özgü tek CSS yazdığım IE (özellikle IE6) için olsa da, durum böyle olmasaydı.

Şimdi, çözüm. Zarif olmasını istedin, bu yüzden ne kadar zarif olduğunu bilmiyorum ama sadece Gecko platformlarını hedefleyeceğinden eminim.

Hile yalnızca JavaScript etkinleştirildiğinde çalışır ve Firefox'ta ve diğer tüm Gecko tabanlı ürünlerde dahili olarak kullanılan Mozilla bağlarını ( XBL ) kullanır . Karşılaştırma için bu, IE'deki davranış CSS özelliği gibidir, ancak çok daha güçlüdür.

Çözümümde üç dosya yer alıyor:

ff.html: stil verilecek dosya
ff.xml: Gecko bağlantılarını içeren dosya
ff.css: Firefox'a özgü stil

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

Güncelleme: Yukarıdaki çözüm o kadar iyi değil. Yeni bir LINK öğesi eklemek yerine bu "firefox" sınıfını BODY öğesine ekleyecekse daha iyi olur . Ve sadece yukarıdaki JS'yi aşağıdaki ile değiştirerek mümkündür:

this.className += " firefox";

Çözüm, Dean Edwards'ın moz davranışlarından ilham alıyor .

— Ionuț G. Stan
kaynak

11

-Motor'a özel kurallar kullanmak etkili tarayıcı hedeflemesi sağlar.

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

7

Fikrinizdeki bir varyasyon, server-side USER-AGENT detectorsayfaya hangi stil sayfasının ekleneceğini anlayacak bir şeye sahip olmaktır. Bu şekilde bir firefox.css, ie.css, opera.css, etc.

Benzer bir şeyi Javascript'te başarabilirsiniz, ancak temiz olarak görmeyebilirsiniz.

Ben default.cssdahil etmek all common styles and then specific style sheetsiçin bir içerir ekleyerek benzer bir şey yaptım geçersiz kılmak veya artırmak için.

— Kekoa
kaynak

Bu hoş ve istikrarlı bir yaklaşım gibi bazı & mdash; teşekkürler & mdash; yine de tarayıcı koklamaya bağlıdır. Sadece Gecko CSS kuralı gibi bir yeteneğe bağlı bir şey kullanmayı tercih ederim. Aynı temel yaklaşımı kullanıyorum: varsayılan stiller ve tarayıcıya özgü eklentiler.

— avdgaag

1

@avdaag: Yetenek algılama çoğu durumda tercih edilir, ancak belirli bir oluşturma motorunun hatasını "düzeltmek" için bir saldırı enjekte etmeye çalıştığınızda, kullanıcı aracısını hedeflemek teorik olarak en uygun çözümdür. Bilinmeyen tarayıcılara karşı ayrımcılık yapmıyorsunuz; ve kullanıcı aracısı alanının size tarayıcının hangi oluşturma motorunu kullandığını söylemesi gerekir, bu nedenle nadir bir Gecko tarayıcısı olsa bile, düzeltmeye devam edilir. Bununla birlikte, birçok tarayıcı artık tarayıcı algılamanın uygunsuz kullanımı nedeniyle kullanıcı aracısı dizelerini taklit ediyor. Yani pratikte çok iyi sonuç vermeyebilir.

— Lèse majesté

6

Artık Firefox Quantum 57, toplu olarak Stylo veya Quantum CSS olarak bilinen Gecko için önemli ve potansiyel olarak kırılma geliştirmeleriyle bittiğine göre, kendinizi Firefox ve Firefox Quantum'un eski sürümlerini ayırt etmeniz gereken bir durumda bulabilirsiniz.

Cevabım burada :

Stylo'yu test etmek için @supportsbir calc(0s)ifadeyle birlikte kullanabilirsiniz @-moz-document- Gecko calc()ifadelerde zaman değerlerini desteklemez, ancak Stylo şunları yapar:
@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}
İşte bir kavram kanıtı:
body::before {
  content: 'Not Fx';
}

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

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}
Snippet'i genişlet
Firefox'un eski sürümlerini hedeflemek biraz zordur - yalnızca @supportsFx 22 ve üstü sürümleri destekleyen sürümlerle ilgileniyorsanız , ihtiyacınız olan tek şey @supports not (animation: calc(0s))budur:
@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}
... ancak daha eski sürümleri bile desteklemeniz gerekiyorsa , yukarıdaki kavram kanıtında gösterildiği gibi , kaskattan yararlanmanız gerekir .

— BoltClock
kaynak

3

Bunu yapmanın tek yolu, sayfanızın bir sonraki tarayıcı güncellemelerinde başarısız olma olasılığını artıracak çeşitli CSS saldırılarıdır. Bir şey varsa, bir js-tarayıcı dinleyicisi kullanmaktan daha az güvenli olacaktır.

— jvenema
kaynak

1

CSS desteğinin yan not olarak javascript'e bağlanması vardır.

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

Snippet'i genişlet

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

— NVRM
kaynak

0

Aşağıdaki kod Stil tiftik uyarılarını atma eğilimindedir:

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

Bunun yerine

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

Bana yardım etti! Buradan stil tiftik uyarısı için çözüm var

— Kailas
kaynak