กำหนดเป้าหมายเฉพาะ Firefox ด้วย CSS

616

การใช้ความคิดเห็นแบบมีเงื่อนไขทำให้ง่ายต่อการกำหนดเป้าหมาย Internet Explorer ด้วยกฎ CSS เฉพาะเบราว์เซอร์:

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

บางครั้งมันเป็นเอ็นจิ้นตุ๊กแก (Firefox) ที่ทำงานผิดปกติ อะไรจะเป็นวิธีที่ดีที่สุดในการกำหนดเป้าหมายเฉพาะ Firefox ด้วยกฎ CSS ของคุณและไม่ใช่เบราว์เซอร์อื่น ๆ นั่นคือไม่เพียง แต่ Internet Explorer ควรละเว้นกฎ Firefox เท่านั้น แต่ควรใช้ WebKit และ Opera

หมายเหตุ:ฉันกำลังมองหาโซลูชัน 'สะอาด' การใช้ดมกลิ่นเบราว์เซอร์ JavaScript เพื่อเพิ่มคลาส 'firefox' ลงใน HTML ของฉันไม่ถือว่ามีคุณสมบัติที่ดีในความคิดของฉัน ฉันอยากจะเห็นบางสิ่งที่ขึ้นอยู่กับความสามารถของเบราว์เซอร์ความคิดเห็นตามเงื่อนไขเป็นเพียง 'พิเศษ' สำหรับ IE ...

css firefox css-hack

— avdgaag
แหล่งที่มา

อาจต้องการดูคำถามที่คล้ายกันและคำตอบที่เกี่ยวข้องของพวกเขา ... stackoverflow.com/questions/738831/…

— AnonJr

3

มีวิธีการกำหนดเป้าหมาย firefox บนเครื่อง windows กับ mac หรือไม่

— Kegan Quimby

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 ส่วนขยาย

— Ionuț G. Stan
แหล่งที่มา

17

url-prefix () หมายถึงอะไรหลังจาก "@ -moz-document"? แค่สงสัย.

— Matt

17

@Matt เป็นวิธีการกรองเว็บไซต์ที่ใช้ CSS นั้น อีกทางเลือกหนึ่งคือการใช้domain()ตัวกรอง ตัวอย่างเช่น@-moz-document domain(google.com) {...}จะใช้กฎ CSS ที่แนบมากับโดเมน google.com เท่านั้น

— Ionuț G. Stan

10

ฉันชอบวิธีที่คุณไม่ต้องสร้างเอกสาร CSS ใหม่ทั้งหมดเช่นนี้เช่นเดียวกับที่ทำกับ IE

— JD Isaacks

7

@JohnIsaacks คุณไม่จำเป็นต้องมีสไตล์ชีทแยกต่างหากสำหรับความคิดเห็นตามเงื่อนไข IE พวกเขาสามารถอินไลน์ ไม่ว่าคุณต้องการจะทำเช่นนั้นเป็นคำถามอื่น

— Dylan

4

เป็นที่น่าสังเกตว่าวิธีแก้ปัญหานี้ใช้ไม่ได้กับ Firefox 59, วางจำหน่ายมีนาคม 2561: bugzilla.mozilla.org/show_bug.cgi?id=1035091

— Jordan Gray

105

อัปเดต (จากความคิดเห็น @Antoine)

คุณสามารถใช้ได้ @supports

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

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

ขยายตัวอย่างข้อมูล

เพิ่มเติมเกี่ยวกับ@supports ที่นี่

— laaposto
แหล่งที่มา

11

นี่เป็นโซลูชันที่ดีกว่าตัวอย่างเช่น @ -moz-url-prefix () มันยังเล่นได้ดีกับตัวแยกวิเคราะห์ SCSS ในขณะที่อีกตัวหนึ่งไม่ได้

— Alastair Hodgson

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

— Waqas Ali Khan Puar
แหล่งที่มา

66

หากฉันเข้าใจสิ่งนี้อย่างถูกต้องสิ่งอันดับต้น ๆ ไม่ใช่ Chrome แต่เพียงระบุพฤติกรรมเริ่มต้นที่คุณแทนที่สำหรับ Firefox และ IE

— Muhd

3

มีประโยชน์มาก. ในฐานะที่เป็นอดีตคนรักของ Firefox ฉันเสียใจมากที่ฉันต้องทำแฮ็ก Firefox ที่เฉพาะเจาะจงเช่นนี้ แต่ตราบใดที่ทำงานได้ฉันก็สามารถอยู่กับมันได้

— SpaceBeers

คำแนะนำสำหรับการตรวจหา IE ไม่ทำงานหากคุณต้องการเพิ่มลงในไฟล์. css คุณสามารถรวมสไตล์ชีทเข้ากับ HTML ได้ หากคุณต้องการมี IE CSS ในไฟล์ CSS ฉันขอแนะนำให้ดูที่นี่: keithclark.co.uk/articles/ …

— Biepbot Von Stirling

16

นี่คือบางเบราว์เซอร์ที่แฮ็คเพื่อกำหนดเป้าหมายเฉพาะเบราว์เซอร์ Firefox

ใช้ตัวเลือก hacks

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

นี่จะใช้งานได้กับ Firefox 3.6 และใหม่กว่า

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

หากคุณต้องการข้อมูลเพิ่มเติมกรุณาเยี่ยมชมbrowserhacks

— Hbirjand
แหล่งที่มา

1

คุณสามารถอธิบายเพิ่มเติมเกี่ยวกับ "การใช้ selector hacks" อีกเล็กน้อยและดูว่าตัวอย่างที่คุณให้นั้นทำงานเป็นพิเศษได้อย่างไร ขอบคุณ

— jj_

1

เอาตัวเองเอาเอง: โดยพื้นฐานแล้วสิ่งที่ซ่อนตัวเลือกที่สองไว้กับเบราว์เซอร์อื่นที่ไม่เข้าใจตัวแรก ในกรณีนี้มีเพียง Mozilla เท่านั้นที่เข้าใจ_:moz-tree-row(hover)ดังนั้นจะเป็นหนึ่งเดียวที่จะสามารถดำเนินการตาม.selector{}มาได้ ปัจจุบันแฮ็คเฉพาะทางนี้ใช้งานได้กับ Firefox ทุกรุ่นตรวจสอบbrowserhacks.comเพื่อดูข้อมูลเพิ่มเติม

— jj_

1

ฉันใช้หน้าจอ Media Query Hack: \ @media และ (-moz-images-in-menu: 0) {} สิ่งนี้ไปได้ดีกับหน้าจอ \ @media และ (-webkit-min-device-อัตราส่วนพิกเซล: 0) และ Visual Studio ไม่ส่งสัญญาณเตือนเมื่อใช้งาน

— Dan Randolph

1

โปรดทราบ -moz-images-in-menu: 0 ถูกลบใน Firefox 52 - bugzilla.mozilla.org/show_bug.cgi?id=1302157

— jonathanKingston

13

ก่อนอื่นข้อจำกัดความรับผิดชอบ ฉันไม่ได้สนับสนุนวิธีการแก้ปัญหาที่ฉันนำเสนอด้านล่าง CSS เฉพาะเบราว์เซอร์เฉพาะที่ฉันเขียนมีไว้สำหรับ IE (โดยเฉพาะ IE6) แต่ฉันก็หวังว่ามันจะไม่เป็นเช่นนั้น

ตอนนี้การแก้ปัญหา คุณขอให้มันดูสง่างามดังนั้นฉันจึงไม่รู้ว่ามันสง่างามแค่ไหน แต่มันแน่นอนว่าจะกำหนดเป้าหมายไปที่แพลตฟอร์มของตุ๊กแกเท่านั้น

เคล็ดลับนี้ใช้ได้เฉพาะเมื่อเปิดใช้งาน 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" ชั้นในองค์ประกอบร่างกาย และเป็นไปได้เพียงแค่แทนที่ JS ข้างต้นด้วยสิ่งต่อไปนี้:

this.className += " firefox";

การแก้ปัญหาคือแรงบันดาลใจจากคณบดีเอ็ดเวิร์ด moz-พฤติกรรม

— Ionuț G. Stan
แหล่งที่มา

11

การใช้กฎเฉพาะ -engine ช่วยให้มั่นใจได้ว่าการกำหนดเป้าหมายเบราว์เซอร์ที่มีประสิทธิภาพ

<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การแทนที่หรือเพิ่มค่าเริ่มต้น

— Kekoa
แหล่งที่มา

นั่นเป็นวิธีที่ดีและมั่นคง & mdash; ขอบคุณ & mdash; แม้ว่ามันจะยังคงขึ้นอยู่กับการสูดดมเบราว์เซอร์ ฉันควรใช้สิ่งที่ขึ้นอยู่กับความสามารถเช่นกฎ CSS แบบตุ๊กแกเท่านั้นหรือบางสิ่งบางอย่าง ฉันใช้วิธีการพื้นฐานเดียวกัน: สไตล์เริ่มต้นและส่วนเสริมเฉพาะเบราว์เซอร์

— avdgaag

1

@avdaag: การตรวจจับความสามารถเป็นที่ต้องการในกรณีส่วนใหญ่ แต่เมื่อคุณพยายามฉีดแฮ็กเพื่อ "แก้ไข" บั๊กของเอ็นจินการเรนเดอร์เฉพาะแล้วการกำหนดเป้าหมายตัวแทนผู้ใช้คือในทางทฤษฎีแล้วทางออกที่ดีที่สุด คุณไม่ได้เลือกปฏิบัติกับเบราว์เซอร์ที่ไม่รู้จัก และฟิลด์ตัวแทนผู้ใช้ควรจะบอกคุณว่าเอ็นจิ้นการแสดงผลที่เบราว์เซอร์กำลังใช้งานอยู่ถึงแม้ว่าเบราว์เซอร์ Gecko ที่หายากจะมาพร้อมมันจะยังคงได้รับการแก้ไข ที่กล่าวไปแล้วเบราว์เซอร์จำนวนมากในขณะนี้ปลอมสตริงผู้ใช้ตัวแทนของพวกเขาเนื่องจากการใช้การตรวจสอบเบราว์เซอร์ที่ไม่เหมาะสม ดังนั้นในทางปฏิบัติมันอาจไม่ได้ผลดีนัก

— Lèsemajesté

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-browser ดมกลิ่น

— jvenema
แหล่งที่มา

1

การสนับสนุน CSSมีผลผูกพันกับจาวาสคริปต์เป็นบันทึกย่อด้านข้าง

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

ช่วยฉันออกไป! เตรียมพร้อมวิธีแก้ปัญหาการเตือนเศษผ้าสไตล์จากที่นี่

— Kailas
แหล่งที่มา