Bỏ qua bộ chọn CSS dành riêng cho Webkit trong Firefox

Question

Tôi đang làm việc trên một chủ đề jQuery bao gồm tạo kiểu cho nhiều phần tử biểu mẫu nhất có thể. Ban đầu nó được phát triển cho Webkit (Chrome). Bây giờ tôi muốn làm cho nó hoạt động với Firefox.

Vấn đề là; Firefox có vấn đề với một số cú pháp cụ thể của Webkit.

Ví dụ:

input[type="range"]::-webkit-slider-thumb, 
input[type=radio], 
input[type=checkbox] { 
    -webkit-appearance: none !important; 
    -moz-appearance: none; 
    width: 1.2em; 
    height: 1.2em; 
    border: 1px solid black; 
    background: #666666 url(images/ui-bg_highlight-soft_50_666666_1x100.png) 50% 50% repeat-x; 
} 

Vấn đề là các bit input[type="range"]::-webkit-slider-thumb,. Hủy bỏ nó và Firefox hoạt động tốt. Nó cũng làm điều này cho cú pháp khác như ::-webkit-file-upload-button, ::selection và tất cả những thứ khác bằng cách sử dụng nhãn ::-webkit-.... Nó nhận ra đó là nhãn ::-moz-... riêng của mình, như là ::-moz-selection.

Webkit dường như chỉ bỏ qua nhãn ::-moz-.

Có cách nào thuận tiện để làm cho Firefox bỏ qua nhãn ::-webkit-... hoặc xử lý vấn đề này mà không phải duy trì nhiều bản sao của mỗi khối CSS?

Sử dụng phiên bản Chrome và Firefox mới cập nhật.

Answer 1

Thật không may, nó không phải là có thể mà không sao chép các khối khai, như CSS spec stipulates mà các trình duyệt phải cư xử theo cách này khi gặp phải selectors không được công nhận trong các quy tắc CSS:

Bộ chọn bao gồm tất cả mọi thứ lên đến (nhưng không bao gồm) dấu ngoặc nhọn trái đầu tiên ({). Công cụ chọn luôn đi cùng với khóa {}. Khi tác nhân người dùng không thể phân tích cú pháp công cụ chọn (nghĩa là, nó không phải là CSS3 hợp lệ), nó cũng phải ignore khóa {}.

Trong trường hợp này, trình duyệt của một nhà cung cấp không thể nhận ra tiền tố của nhà cung cấp khác, do đó, nó phải bỏ qua quy tắc.

Answer 2

tôi phải đọc một chút để trả lời câu hỏi này, sau đây là một số tài nguyên tốt, Gecko Style EngineFurther Reading on the Engine Implementation, Still tôi đã không thấy bất kỳ con trỏ như lý do tại sao nó sẽ thả nó, nhưng tôi có thể cung cấp cho bạn đoán tốt nhất của tôi, tôi nghĩ rằng động cơ đang thả toàn bộ bộ chọn, giả sử rằng mozilla thực hiện bộ chọn giả -moz-slider-thumb và cố gắng sử dụng nó với -webkit- và nó cũng sẽ bị loại bỏ.

Tôi đã thấy hành vi này trước đây trong tất cả các trình duyệt và tôi nghĩ rằng nó đang được sử dụng như một bản hack để nhắm mục tiêu một số trình duyệt đôi khi.

này sẽ làm việc

input[type=radio], 
input[type=checkbox] { 
    -webkit-appearance: none !important; 
    -moz-appearance: none; 
    width: 1.2em; 
    height: 1.2em; 
    border: 1px solid black; 
} 

này sẽ không

input[type="range"]::-webkit-slider-thumb, 
input[type=radio], 
input[type=checkbox] { 
    -webkit-appearance: none !important; 
    -moz-appearance: none; 
    width: 1.2em; 
    height: 1.2em; 
    border: 1px solid black; 
} 

hay này

input[type="range"]::-moz-slider-thumb, 
input[type=radio], 
input[type=checkbox] { 
    -webkit-appearance: none !important; 
    -moz-appearance: none; 
    width: 1.2em; 
    height: 1.2em; 
    border: 1px solid black; 
} 

Tôi nghĩ rằng bạn sẽ phải viết lại các thuộc tính-giá trị trên hai hoặc nhiều hơn bộ chọn, điều này sẽ chỉ ảnh hưởng đến kích thước của các kiểu heet như các công cụ sẽ tiếp tục thả các bộ chọn mà họ không sở hữu.

Tôi thực sự hy vọng điều này đã giúp ích ít nhất một chút.

EDIT:

Theo ghi nhận của người sử dụng @BoltClock trong các ý kiến ​​phỏng đoán của tôi là đúng đây là một liên kết đến spec w3.org/TR/css3-syntax/#rule-sets

Answer 3

FYI, tôi đã kết thúc đi kiếm một giải pháp khác nhau.

Vì sản phẩm cuối cùng của tôi là biểu định kiểu, tôi quyết định sử dụng trình biên dịch CSS để tạo tệp .CSS dựa trên tệp nguồn. Cho đến nay nó hoạt động tốt.

Tôi đã sử dụng LessPHP vì định dạng .less là khá phổ biến và tôi quen với PHP, nhưng bất kỳ cái nào khác cũng sẽ làm.

Lưu ý rằng tôi đang sử dụng LessPHP chỉ để biên dịch tệp .CSS tĩnh, do đó, nó sẽ không là yêu cầu đối với người dùng cuối của dự án này trừ khi họ muốn tự thay đổi tệp nguồn .less.