使用jQuery，如何找出瀏覽器本機是否支持CSS選擇器「input [type = text]」？

在我的CSS我有必須使用CSS3選擇器input[type=text]被應用到所有文本字段（規則。使用jQuery，如何找出瀏覽器本機是否支持CSS選擇器「input [type = text]」？

我也用jQuery。如Internet Explorer 6某些瀏覽器不支持這種形式的CSS選擇器。所以，我的解決方法是添加一個額外的類名在CSS：

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

而且通過jQuery然後添加CSS類：

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

的問題是：如何確保這個規則只爲INV當CSS3選擇器不是本機支持的時候發起的？

來源

2009-09-09 Jesper Rønn-Jensen

只是想讓我知道'[attr = val]'不是CSS3選擇器，它是2.1，並且受到所有現代瀏覽器的支持。 CSS3中有什麼新東西是'[attr^= val]'和類似的正則表達式選擇器。 – peirix 2009-09-09 11:31:41

所有，但ie6！是的 – vvo 2009-09-09 11:36:33

@Vincent：我說現代，沒有我：p – peirix 2009-09-09 11:37:31

我結束了在我的JavaScript文件中使用條件註釋。這樣我可以解決IE6和應用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. 
    /*@[email protected] (@_jscript_version <= 5.6) 
    $('input[type=text],input[type=password],input[type=radio],input[type=checkbox]'). 
     each(function() { $(this).addClass('type_' + this.type); }); 
    @[email protected]*/ 

});

這樣，我結束了對所有表單字段添加的類名：

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

來源

2009-09-09 11:57:43

真的，當你不能使用某些css選擇器時，這樣做實際上比爲所有瀏覽器的元素添加類要糟糕。另外，在ie6中更多的javascript意味着更低的性能...... :) – vvo 2009-09-09 13:14:37

文森特，你錯過了一個重要的觀點：我不需要額外的工作，也不需要執行我的樣式的開發人員執行額外的不必要的步驟。開發人員應該專注于思考：「我需要一個文本字段......」而不必記得添加額外的'class =「type_text」'或類似的東西。我已經看到那麼多次出錯了。 – 2009-09-11 09:55:54

另一件讓我贊成這個想法的事情是，現有領域絕對沒有修改。絕對沒有辦法忘記設置類名。 – 2009-09-11 10:00:00

爲什麼不設置一些無用的CSS樣式並檢查樣式是否被應用。只將變通方法類添加到未應用此樣式的元素。

唯一的問題是我不能拿出一個「無用」的風格，你可以用:-)

來源

2009-09-09 11:23:52

我認爲IE6的@conditional評論可以做到這一點。（請參閱下面我自己的答案）。這樣，這些樣式只能應用於所有文本字段 - 只有當瀏覽器本身不支持。在IE6真正被淘汰的8-10年後，可以刪除@conditional的評論。 – 2009-09-11 09:58:57

這似乎像你所說的納入了一句：

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

來源

2009-09-09 11:24:38

有一個看看http://www.geocities.com/seanmhall2003/css3/detect.html。你應該爲每個屬性做這件事。

來源

2009-09-09 11:31:29

有沒有簡單的方法知道「這個瀏覽器是否支持CSS3選擇器」。你所能做的只是檢測瀏覽器和瀏覽器版本。

Modernizr不會幫助你，因爲你無法檢測到特定的CSS選擇器是否在.css文件中工作。（或者你必須檢查你的CSS選擇器是否應用了一個特定的CSS屬性，這真的很難看！）

但是！這裏最簡單的方法就是在.css文件中忘記CSS 2.1選擇器，如[attr =]，因爲它不被廣泛支持。如果你必須爲不支持它們的瀏覽器（比如Internet Explorer 6）編寫代碼，那麼你就不能使用它們。

所以，爲每個人添加一個類。你的代碼會更容易理解，否則你會一直添加不必要的JavaScript代碼。

我明白我不回答你，但這是b-a-d！

來源

2009-09-09 11:34:49 vvo

爲什麼不只是有

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

然後將workaround_classname添加到標記中的所有文本輸入中。

您可以使用選擇器（我認爲第二個可能是一個，這將是最容易理解它是什麼選擇別人讀碼）

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

則不需要檢測和你將不會依靠JavaScript來添加類名稱。

來源

2009-09-09 12:01:41

使用jQuery，如何找出瀏覽器本機是否支持CSS選擇器「input [type = text]」？

回答

相關問題