使用Javascript檢測CSS功能

是否可以使用Javascript檢測CSS支持？使用Javascript檢測CSS功能

例如，是否有可能檢測瀏覽器是否支持這樣的屬性選擇器？

input[type='text'] { }

來源

2011-08-18 nickf

怎麼會變成這樣有用嗎？你必須運行JavaScript來檢查，所以你可能只需運行JavaScript [添加對它的支持]（http://selectivizr.com/）。 – thirtydot

@ thirtydot，是的，我知道你在說什麼，但我猜想瀏覽器在Javascript中所做的工作越少越好。如果CSS引擎可以處理它，爲什麼浪費寶貴的週期？ ;） – nickf

因爲CSS引擎（在IE6-8）*不能*處理它。如果瀏覽器不是IE6-8（唯一不支持此功能的常見瀏覽器），Selectivizr會立即退出。否則，它會運行並添加對一堆可愛選擇器的支持。 – thirtydot

document.querySelectorAll("input[type='text']")

但失敗對舊版瀏覽器，自然。

除此之外，您可以使用style屬性來檢查是否已應用某個CSS屬性。

和

if (myInputElem.style.backgroundRepeat == "no-repeat") { 
    // selector is supported 
}

來源

2011-08-18 15:16:26 Tomalak

任何支持qSA的支持'[attr]'選擇器 – gnarf

@gnarf：這可能是真的。檢查該功能的存在可能也是一種暗示，儘管這並不是所要求的。 – Tomalak

Modernizr的是用來檢測瀏覽器功能，並很可能能夠在這種情況下提供幫助。 http://www.modernizr.com/

來源

2011-08-18 15:17:08

只有真正檢測到新東西......'[attr]'選擇器無處不在（IE6除外） – gnarf

Modernizr適用於HTML4 - > 5過渡編碼，而不是用於檢查傳統瀏覽器功能的通用工具包。這個庫不好（和imo，不正確）。不管HTML5支持如何，都可以使用它來確保您可以使用「畫布」和其他新元素，而不是驗證瀏覽器中是否存在舊功能。 – Brian

這有點推測作爲我沒有測試出來，但相信有可能經由JS添加style元件接着是它對的效果的元素，然後測試該值：

投機未經測試的代碼，可能會或可能無法正常工作（jQuery的用於縮寫）：

$('<style type="text/css" id="foo">input[type="text"]{ width: 10px; }</style>').appendTo('head'); 
$('<input type="text" id="bar">').appendTo('body'); 
if ($('#bar').width() == 10) 
{ 
    //attr selector supported 
} 
$('#foo, #bar').remove();

來源

2011-08-18 15:22:24 zzzzBov

+1，因爲它可能是您能夠檢測到它的唯一方法。 – gnarf

贊同@gnarf在這一個短 - 一個試圖趕上querySelector或其他一些黑客... – Brian

使用Javascript檢測CSS功能

回答

相關問題