Chỉ nhắm mục tiêu Firefox với CSS

616

Sử dụng các nhận xét có điều kiện, thật dễ dàng để nhắm mục tiêu Internet Explorer với các quy tắc CSS dành riêng cho trình duyệt:

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

Đôi khi, chính công cụ Gecko (Firefox) hoạt động sai. Điều gì sẽ là cách tốt nhất để chỉ nhắm mục tiêu Firefox với các quy tắc CSS của bạn chứ không phải một trình duyệt khác? Đó là, không chỉ Internet Explorer bỏ qua các quy tắc chỉ dành cho Firefox, mà cả WebKit và Opera cũng nên.

Lưu ý: Tôi đang tìm kiếm một giải pháp 'sạch'. Sử dụng trình duyệt JavaScript sniffer để thêm lớp 'firefox' vào HTML của tôi không đủ điều kiện theo quan điểm của tôi. Tôi muốn thấy một cái gì đó phụ thuộc vào khả năng của trình duyệt, giống như các nhận xét có điều kiện chỉ là 'đặc biệt' đối với IE mộc

css  firefox  css-hack 
— avdgaag
nguồn
Có thể muốn xem xét một số câu hỏi tương tự và câu trả lời liên quan của họ ... stackoverflow.com/questions/738831/iêu
— AnonJr
3
Có cách nào để nhắm mục tiêu firefox trên máy Windows vs mac không?
— Kegan Quimby
4
<! - [if Gecko]> ... bao gồm ... <! [endif] ->
— xác định

Câu trả lời:

1252

OK, tôi đã tìm thấy nó. Đây có lẽ là giải pháp sạch và dễ dàng nhất hiện có và không phụ thuộc vào JavaScript được bật.

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}
<h1>This should be red in FF</h1>
Mở rộng đoạn trích

Nó dựa trên một phần mở rộng CSS cụ thể khác của Mozilla. Có một danh sách toàn bộ các phần mở rộng CSS này ngay tại đây: Phần mở rộng CSS của Mozilla .

— Ionuț G. Stan
nguồn
17
Chính xác thì url-prefix () có nghĩa là gì sau "@ -moz-document"? chỉ tò mò thôi.
— Matt
17
@Matt, đó là một cách để lọc các trang web mà CSS được áp dụng. Một lựa chọn khác là sử dụng domain()bộ lọc. Ví dụ: @-moz-document domain(google.com) {...}sẽ chỉ áp dụng các quy tắc CSS kèm theo trên tên miền google.com.
— Ionuț G. Stan
10
Tôi thích cách bạn không phải tạo một tài liệu CSS hoàn toàn mới cho việc này giống như bạn làm với IE.
— JD Isaacks
7
@JohnIsaacks Bạn không cần một biểu định kiểu riêng cho các nhận xét có điều kiện của IE. Họ có thể được nội tuyến. Cho dù bạn muốn làm theo cách đó là một câu hỏi khác.
— Dylan
4
Điều đáng chú ý là cách giải quyết này không còn hoạt động kể từ Firefox 59, được phát hành vào tháng 3 năm 2018: bugzilla.mozilla.org/show_orms.cgi?id=1035091
— Jordan Gray
105

Đã cập nhật (từ bình luận @Antoine)

Bạn có thể dùng @supports

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}
<h1>This should be red in FF</h1>
Mở rộng đoạn trích

Thêm vào @supports đây

— laaposto
nguồn
11
Đây là một giải pháp đẹp hơn nhiều so với ví dụ @ -moz-document url-prefix (), nó cũng hoạt động tốt với trình phân tích cú pháp SCSS trong khi cái kia thì không.
— Alastair Hodgson
1
Tôi đang sử dụng Firefox và nó vẫn còn màu trắng, có phải vì phiên bản tôi đang sử dụng không?
— Antoine
3
@Antoine Bạn nói đúng! Nó không hoạt động cho các phiên bản FF mới nhất. Tôi cập nhật câu trả lời của tôi. Nó nên hoạt động ngay bây giờ. Thanx đã chỉ ra nó!
— laaposto
83

Dưới đây là cách khắc phục ba trình duyệt khác nhau: IE, FF và 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
nguồn
66
Nếu tôi hiểu điều này một cách chính xác, thì cái trên cùng không phải là chrome, mà chỉ xác định hành vi mặc định mà bạn ghi đè cho Firefox và IE.
— Muhd
3
Rất hữu ích. Là một người yêu thích Firefox cũ, tôi cho rằng tôi phải thực hiện các bản hack cụ thể của Firefox như thế này nhưng miễn là nó hoạt động tôi có thể sống với nó.
— SpaceBeer
Đề xuất phát hiện IE không hoạt động nếu bạn muốn thêm nó vào tệp .css. Bạn có thể bao gồm các bảng định kiểu với nó theo cách đó trong HTML. Nếu bạn muốn có CSS ​​CSS trong một tệp CSS, tôi khuyên bạn nên xem tại đây: keithclark.co.uk/articles/ mẹo
— Biepbot Von Stirling
16

Dưới đây là một số hack trình duyệt để chỉ nhắm mục tiêu trình duyệt Firefox,

Sử dụng hack chọn.

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

Tấn công JavaScript

var isFF = !!window.sidebar;

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

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

Truy vấn phương tiện truyền thông

Điều này sẽ hoạt động trên, Firefox 3.6 và sau đó

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

Nếu bạn cần thêm thông tin, vui lòng truy cập trình duyệt

— Hbirjand
nguồn
1
Bạn có thể giải thích thêm một chút về "sử dụng hack chọn" và về cách ví dụ bạn cung cấp cụ thể hoạt động không? Cảm ơn.
— jj_
1
Được rồi, bản thân tôi đã hiểu: về cơ bản những gì nó làm là ẩn bộ chọn thứ hai cho các trình duyệt khác không hiểu cái đầu tiên. Trong trường hợp này chỉ có Mozilla hiểu _:moz-tree-row(hover)nên nó sẽ là người duy nhất có thể xử lý .selector{}tiếp theo. Bản hack cụ thể này hiện đang hoạt động trên tất cả các phiên bản Firefox, hãy kiểm tra browserhacks.com để biết thêm về điều này.
— jj_
1
Tôi đã sử dụng màn hình Media Query Hack: \ @media và (-moz-hình ảnh trong menu: 0) {} Điều này diễn ra tốt đẹp với màn hình \ @media và (-webkit-min-device-pixel-ratio: 0) và Visual Studio không đưa ra cảnh báo bằng cách sử dụng nó.
— Dan Randolph
1
Xin lưu ý -moz-hình ảnh trong menu: 0 đã bị xóa trong Firefox 52 - bugzilla.mozilla.org/show_orms.cgi?id=1302157
— jonathanKingston
13

Trước hết, từ chối trách nhiệm. Tôi không thực sự ủng hộ cho giải pháp tôi trình bày dưới đây. CSS cụ thể của trình duyệt duy nhất tôi viết là dành cho IE (đặc biệt là IE6), mặc dù tôi ước nó không phải như vậy.

Bây giờ, giải pháp. Bạn đã yêu cầu nó phải thanh lịch để tôi không biết nó thanh lịch như thế nào nhưng chắc chắn sẽ chỉ nhắm mục tiêu vào nền tảng Gecko.

Thủ thuật này chỉ hoạt động khi JavaScript được kích hoạt và sử dụng các ràng buộc Mozilla ( XBL ), được sử dụng nhiều trong nội bộ Firefox và tất cả các sản phẩm dựa trên Gecko khác. Để so sánh, đây giống như thuộc tính CSS hành vi trong IE, nhưng mạnh hơn nhiều.

Ba tập tin liên quan đến giải pháp của tôi:

  1. ff.html: tệp theo kiểu
  2. ff.xml: tệp chống lại các ràng buộc Gecko
  3. ff.css: Kiểu dáng cụ thể của 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;
}

Cập nhật: Giải pháp trên không tốt. Sẽ tốt hơn nếu thay vì phụ thêm một yếu tố LINK mới nó sẽ thêm rằng lớp "firefox" trên phần tử BODY. Và điều đó là có thể, chỉ bằng cách thay thế JS ở trên bằng cách sau:

this.className += " firefox";

Giải pháp được lấy cảm hứng từ các hành vi moz của Dean Edwards .

— Ionuț G. Stan
nguồn
11

Sử dụng quy tắc cụ thể -engine đảm bảo nhắm mục tiêu trình duyệt hiệu quả.

<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
nguồn
7

Một biến thể trong ý tưởng của bạn là có một server-side USER-AGENT detectorcái sẽ tìm ra biểu định kiểu nào sẽ đính kèm vào trang. Bằng cách này bạn có thể có một firefox.css, ie.css, opera.css, etc.

Bạn có thể thực hiện một điều tương tự trong chính Javascript, mặc dù bạn có thể không coi nó là sạch.

Tôi đã làm một điều tương tự bằng cách có một default.csscái bao gồm all common styles and then specific style sheetsđược thêm vào để ghi đè hoặc tăng cường mặc định.

— Kekoa
nguồn
Đó là một số thích một cách tiếp cận tốt đẹp và ổn định & mdash; cảm ơn & mdash; mặc dù nó vẫn phụ thuộc vào trình duyệt đánh hơi. Tôi muốn sử dụng một cái gì đó phụ thuộc vào khả năng, như quy tắc CSS chỉ dành cho Gecko hoặc thứ gì đó. Tôi sử dụng cùng một cách tiếp cận cơ bản: kiểu mặc định và các tiện ích bổ sung dành riêng cho trình duyệt.
— avdgaag
1
@avdaag: Phát hiện khả năng được ưu tiên trong hầu hết các trường hợp, nhưng khi bạn đang cố gắng tiêm hack để "sửa" lỗi của một công cụ kết xuất cụ thể, thì về mặt lý thuyết, nhắm mục tiêu vào tác nhân người dùng là giải pháp tối ưu. Bạn không phân biệt đối xử với các trình duyệt không xác định; và trường tác nhân người dùng có nghĩa vụ phải cho bạn biết công cụ kết xuất nào mà trình duyệt đang sử dụng, vì vậy ngay cả khi trình duyệt Gecko hiếm gặp xuất hiện, nó vẫn sẽ được khắc phục. Điều đó nói rằng, rất nhiều trình duyệt hiện giả mạo chuỗi tác nhân người dùng của họ do sử dụng phát hiện trình duyệt không phù hợp. Vì vậy, trong thực tế nó có thể không hoạt động tốt như vậy.
— Lèse majesté
6

Giờ đây, Firefox Quantum 57 đã ra mắt với những cải tiến đáng kể - và có khả năng phá vỡ đối với Gecko được gọi chung là Stylo hoặc Quantum CSS, bạn có thể thấy mình trong tình huống phải phân biệt giữa các phiên bản kế thừa của Firefox và Firefox Quantum.

Từ câu trả lời của tôi ở đây :

Bạn có thể sử dụng @supportsvới một calc(0s)biểu thức kết hợp với @-moz-documentđể kiểm tra Stylo - Gecko không hỗ trợ các giá trị thời gian trong các calc()biểu thức nhưng Stylo thì có:

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

Đây là một bằng chứng về khái niệm:

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

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

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}
Mở rộng đoạn trích

Nhắm mục tiêu các phiên bản kế thừa của Firefox hơi khó khăn - nếu bạn chỉ quan tâm đến các phiên bản hỗ trợ @supports, từ Fx 22 trở lên, @supports not (animation: calc(0s))là tất cả những gì bạn cần:

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

... nhưng nếu bạn cần hỗ trợ ngay cả các phiên bản cũ hơn, bạn sẽ cần sử dụng tầng , như đã trình bày trong bằng chứng về khái niệm ở trên.

— BoltClock
nguồn
3

Cách duy nhất để làm điều này là thông qua các bản hack CSS khác nhau, điều này sẽ khiến trang của bạn có nhiều khả năng bị lỗi hơn trong các bản cập nhật trình duyệt tiếp theo. Nếu có bất cứ điều gì, nó sẽ an toàn hơn so với sử dụng trình duyệt js-browser.

— jvenema
nguồn
0

Các mã sau đây có xu hướng đưa ra các cảnh báo Style lint:

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

Thay vì sử dụng 

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

Giúp tôi ra! Có giải pháp cho cảnh báo lint phong cách từ đây

— Kailas
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.