Soru CSS ile sadece Firefox'u hedefleme


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

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

Bazen yanlış davranan Gecko motoru (Firefox). Sadece Firefox'u CSS kurallarınızla ve başka bir tarayıcıyla değil, hedeflemenin en iyi yolu ne olurdu? Yani, sadece Internet Explorer, sadece Firefox kurallarını göz ardı etmemeli, aynı zamanda WebKit ve Opera da olmalıdır.

Not: 'Temiz' bir çözüm arıyorum. HTML'ime 'firefox' sınıfı eklemek için bir JavaScript tarayıcı sniffer'ı kullanmak bence temiz sayılmıyor. Tarayıcı özelliklerine bağlı bir şey görmek isterim, şartlı yorumlar tıpkı IE için 'özel' gibi…


519
2018-06-04 20:19


Menşei


Bazı benzer sorulara ve ilgili cevaplara bakmak ister ... stackoverflow.com/questions/738831/... - AnonJr
Bir macun makinesinde bir mac makinasında firefox'u hedeflemenin bir yolu var mı? - Kegan Quimby
<! - [eğer Gecko]> ... içerir ... <! [endif] -> - defines


Cevaplar:


Tamam, buldum. Bu muhtemelen orada en temiz ve kolay bir çözümdür ve JavaScript'in açık olduğundan emin değildir.

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

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


1057
2018-06-04 22:43



Muhteşem. Alan adı hakkında çok kötü (ve tabii ki geçersiz (?) CSS, ancak beklenen). - avdgaag
Url-prefix (), "@moz-document" den sonra tam olarak ne ifade eder? sadece merak. - Matt
@Matt, bu, CSS'nin uygulandığı web sitelerini filtrelemenin bir yoludur. Başka bir seçenek kullanmaktır domain() Filtre. Örneğin @-moz-document domain(google.com) {...} Ekteki CSS kurallarını yalnızca google.com alan adında uygular. - Ionuț G. Stan
IE için yaptığınız gibi bunun için tamamen yeni bir CSS belgesi oluşturmak zorunda olmadığınızdan hoşlanıyorum. - JD Isaacks
@JohnIsaacks IE koşullu yorumları için ayrı bir stil sayfasına ihtiyacınız yoktur. Satır içi olabilirler. Bu şekilde yapmak isteyip istemediğiniz başka bir soru. - Dylan


Üç farklı tarayıcıyı ele almak için: 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]-->

77
2018-01-21 09:33



Bunu doğru anlıyorsam, en üstteki krom değil, Firefox ve IE için geçersiz kıldığınız varsayılan davranışı belirtir. - Muhd
Çok kullanışlı. Eski bir Firefox sevgilisi olarak, Firefox'a özel olarak böyle hack yapmak zorunda olduğumu söylüyorum ama işe yaradığı sürece onunla yaşayabilirim. - SpaceBeers
IE algılama için öneri, bir .css dosyasına eklemek istiyorsanız işe yaramıyor. Bununla birlikte stil sayfalarını HTML'ye bölebilirsiniz. Bir CSS dosyasında IE CSS'ye sahip olmak istiyorsanız, buraya bakmanızı öneririz: keithclark.co.uk/articles/... - Biepbot Von Stirling


Güncellenmiş(@Antoine yorumu)

Kullanabilirsiniz @supports

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

Daha fazla @supports  İşte


30
2017-09-08 10:10



Bu, -moz-document url-prefix () örneğinden çok daha hoş bir çözümdür, diğeri de SCSS ayrıştırıcısına sahipken diğeri de iyi değildi. - Alastair Hodgson
Firefox kullanıyorum ve hala beyaz, kullanıyorum sürümünden mi? - Antoine
@Antoine Haklısınız! FF'nin son sürümleri için çalışmadı. Cevabımı güncelledim. Şimdi çalışmalı. Bunu işaret ettiğin için teşekkürler! - laaposto


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

Şimdi çözüm. Zarif olmasını istediniz, bu yüzden ne kadar zarif olduğunu bilmiyorum ama Gecko platformlarını sadece hedef alacaksınız.

Hile sadece JavaScript etkinleştirildiğinde ve Mozilla bağlamaları kullanıldığında çalışır (XBL) Firefox ve diğer tüm Gecko tabanlı ürünler için dahili olarak yoğun şekilde kullanılmaktadır. Bir karşılaştırma için, IE'deki davranış CSS özelliği gibidir, ancak çok daha güçlüdür.

Çözümüme üç dosya dahil:

  1. ff.html: dosyaya stil
  2. ff.xml: Gecko bağlamaları toplayan dosya
  3. 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üncelleştirme: Yukarıdaki çözüm bu kadar iyi değil. Ekleyeceği yeni bir LINK elemanı eklemek yerine daha iyi olurdu. o BODY öğesinde "firefox" sınıfı. Ve sadece yukarıdaki JS'yi aşağıdakilerle değiştirerek mümkündür:

this.className += " firefox";

Çözüm ilham veriyor Dean Edwards'ın moz davranışları.


12
2018-06-04 21:02





Burada sadece Firefox tarayıcısını hedeflemek için bazı tarayıcılar var.

Seçici kesicileri kullanarak.

_:-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 Sorgu Hackleri

Bu işe yarayacak, Firefox 3.6 ve Daha Sonra

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

Daha fazla bilgiye ihtiyacınız varsa, lütfen ziyaret edin browserhacks


12
2017-08-20 05:45



"Seçici korsanları kullanarak" ve özellikle verdiğiniz örneklerin özel olarak nasıl çalıştığını biraz daha açıklayabilir misiniz? Teşekkürler. - jj_
Tamam, anladım: temel olarak, ikinci seçiciyi, ilkini anlamayan diğer tarayıcılara gizlemek. Bu durumda sadece Mozilla anlar _:moz-tree-row(hover) bu yüzden işleyebilecek tek kişi olacak .selector{} sonra geliyor. Bu özel hackler şu anda Firefox'un tüm sürümlerinde çalışır, kontrol edin browserhacks.com Bunun için daha fazlası için. - jj_
Media Query Hack'i kullandım: \ @media ekranı ve (-moz-images-in-menus: 0) {} Bu, \ @ media ekranı ve (-webkit-min-device-pixel-ratio: 0) ile güzel bir şekilde gider. Visual Studio, onu kullanarak uyarı atmıyor. - Dan Randolph
Lütfen dikkat edin: -moz-in-menüler: 0 Firefox 52'de kaldırılmıştır - bugzilla.mozilla.org/show_bug.cgi?id=1302157 - jonathanKingston


-Engine özel kuralları kullanarak etkili tarayıcı hedefleme 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]-->

9
2018-01-13 16:57





Senin fikrin bir varyasyon bir server-side USER-AGENT detector Bu, sayfaya hangi stil sayfasının ekleneceğini anlar. Bu şekilde bir firefox.css, ie.css, opera.css, etc.

Onu temiz olarak kabul etmemekle birlikte, Javascript'te de benzer bir şeyi gerçekleştirebilirsiniz.

Bir şey yaparak benzer bir şey yaptım default.css içerir all common styles and then specific style sheets varsayılanları geçersiz kılmak veya yükseltmek için eklenir.


7
2018-06-04 20:26



Bu bazı hoş ve istikrarlı bir yaklaşım gibi mdash; teşekkürler & mdash; yine de tarayıcı koklama bağlıdır. Bir Gecko sadece CSS kuralı veya bir şey gibi yeteneklere bağlı bir şey kullanmayı tercih ederim. Aynı temel yaklaşımı kullanıyorum: varsayılan stiller ve tarayıcıya özgü eklentiler. - avdgaag
@avdaag: Yetenek tespiti çoğu durumda tercih edilir, ancak belirli bir oluşturma motorunun hatasını "düzeltmek" için bir hack 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, tarayıcının hangi oluşturma motorunu kullandığını size söylemesi gerekir; bu nedenle, nadir bir Gecko tarayıcısı gelse bile, yine de düzeltmenin yapılması gerekir. Bununla birlikte, birçok tarayıcı artık tarayıcı algılamasının uygunsuz kullanımı nedeniyle kullanıcı aracısı dizgilerini uyandırıyor. Yani pratikte çok iyi çalışmayabilir. - Lèse majesté


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


3
2018-06-04 20:22





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

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

Yerine kullanmak

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

Bana yardım etti! Stil tint uyarı için çözüm var İşte 


0
2017-11-29 09:46