Sử dụng jQuery, cách tìm hiểu xem bộ chọn CSS "đầu vào [loại = văn bản]" có được hỗ trợ bởi trình duyệt không?

Question

Trong CSS của tôi, tôi có một quy tắc đó phải được áp dụng cho tất cả các lĩnh vực văn bản (bằng cách sử dụng selector CSS3 input[type=text].

tôi cũng sử dụng jQuery. Một số trình duyệt như Internet Explorer 6 không hỗ trợ mà hình thức cho selector CSS. Vì vậy, tôi Cách giải quyết là thêm một classname thêm trong CSS:

input[type=text], .workaround_classname{ 
    /* css styling goes here */ 
} 

Và qua jQuery sau đó thêm các lớp CSS:

$('input[type=text]').addClass('workaround_classname'); 

các Câu hỏi là: làm thế nào để đảm bảo quy tắc này chỉ là inv được chấp nhận khi bộ chọn CSS3 không được hỗ trợ nguyên bản?

Answer 1

Tôi đã kết thúc bằng cách sử dụng nhận xét có điều kiện trong tệp javascript của mình. Bằng cách này, tôi có thể giải quyết IE6 và áp dụng các lớp CSS

$(function(){ 
    //add css class to input[type=text] fields if the selector is not natively supported 
    // IE6 hack: Since some CSS selectors are not working, we simulate with class names. 
    /*@cc_on@if (@_jscript_version <= 5.6) 
    $('input[type=text],input[type=password],input[type=radio],input[type=checkbox]'). 
     each(function() { $(this).addClass('type_' + this.type); }); 
    @end@*/ 

}); 

Bằng cách này, tôi kết thúc với tên lớp bổ sung cho tất cả các lĩnh vực hình thức:

.type_text{} 
.type_radio{} 
.type_checkbox{} 
.type_password{} 

Answer 2

Tại sao không đặt một số kiểu css vô dụng và kiểm tra xem kiểu đã được áp dụng hay chưa. Chỉ thêm lớp workaround vào các phần tử không áp dụng kiểu này.

Chỉ có vấn đề là tôi không thể tìm ra một phong cách "vô dụng", bạn có thể sử dụng :-)

Answer 3

Điều này dường như kết hợp một cái gì đó như bạn nói về:

http://www.w3avenue.com/2009/07/02/detect-support-for-css3-html5-with-modernizr/

Answer 4

Có một xem http://www.geocities.com/seanmhall2003/css3/detect.html. Bạn nên làm điều này cho mỗi tài sản.

Answer 5

Không có cách nào dễ dàng để biết "trình duyệt này có hỗ trợ bộ chọn CSS3" không. Tất cả những gì bạn có thể làm là phát hiện phiên bản trình duyệt và trình duyệt.

Modernizr sẽ không giúp bạn vì bạn không thể phát hiện xem bộ chọn CSS cụ thể có hoạt động trong tệp .css hay không. (Hoặc bạn phải kiểm tra xem một thuộc tính CSS cụ thể từ bộ chọn CSS của bạn có được áp dụng không và đây thực sự là xấu!)

NHƯNG! Ở đây, cách dễ nhất là quên các bộ chọn CSS 2.1 như [attr =] trong các tệp .css vì nó không được hỗ trợ rộng rãi. Và nếu bạn phải viết cho các trình duyệt không hỗ trợ chúng (như Internet Explorer 6), bạn không thể sử dụng chúng.

Vì vậy, hãy thêm lớp học cho mọi người. Mã của bạn sẽ dễ hiểu hơn, nếu không bạn sẽ luôn thêm mã JavaScript không cần thiết.

Tôi hiểu tôi không trả lời bạn, nhưng đây là b-a-d!

Answer 6

Tại sao không chỉ có

input.workaround_classname{ 
    /* css styling goes here */ 
} 

sau đó thêm workaround_classname vào tất cả các đầu vào văn bản trong đánh dấu của bạn.

Các selectors bạn có thể sử dụng được (Tôi nghĩ thứ hai có lẽ là một trong đó sẽ là dễ nhất để hiểu những gì nó đã được lựa chọn cho người khác đọc mã)

$('input:text') 
// or 
$('input:text.workaround_classname') 
// or 
$('input.workaround_classname') 

Sau đó, không phát hiện là cần thiết và bạn sẽ không dựa vào JavaScript để thêm tên lớp.