CSS瀏覽器檢測徑向漸變？

我使用徑向漸變作爲網站的背景。它適用於Safari，Chrome和Firefox 3.5+，但Opera和Internet Explorer存在問題。因此，我製作了一個背景圖片，以在這些瀏覽器上展示出相同的外觀。現在，我從用戶代理檢測瀏覽器和版本服務器端，然後包含正確的CSS文件。然而，我覺得必須有更好的方法，而不是必須維護兩個單獨的CSS文件來做基本相同的事情（CSS文件之間的唯一區別是html和body）。CSS瀏覽器檢測徑向漸變？

爲了獲得良好的瀏覽器：

html, body { 
    width: 100%; 
    height: 100%; 
} 
html { 
    background-image: -ms-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%); 
    background-image: -moz-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%); 
    background-image: -o-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%); 
    background-image: -webkit-gradient(radial, center center, 0, center center, 480, color-stop(0, #23395D), color-stop(0.6, #122037), color-stop(1, #0A131F)); 
    background-image: -webkit-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%); 
    background-image: radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%); 
    -moz-box-shadow:inset 0 0 100px #080f1a; 
    -webkit-box-shadow:inset 0 0 100px #080f1a; 
    box-shadow:inset 0 0 100px #080f1a; 
    background-attachment: fixed; 
} 
body { 
    font-family: arial, sans-serif; 
    font-size: 14px; 
    color: #fff; 
    line-height: 22px; 
    text-decoration: none; 
    background: url(/images/portal/checkered_bg.png) repeat; 
}

壞的瀏覽器：

html, body { 
    width: 100%; 
    height: 100%; 
} 
body { 
    font-family: arial, sans-serif; 
    font-size: 14px; 
    color: #fff; 
    line-height: 22px; 
    text-decoration: none; 
    background: #09101b url(/images/portal/big_bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale')"; 
}

來源

2011-09-23 James Simpson

當您嘗試應用CSS瀏覽器不承認，它只是報告什麼都沒有，所以如果你這樣做......

//ommiting document ready for brevity 
if ($("html").css("background-image").indexOf("radial") < 0) { 
    $("html").addClass("no-radial") 
}

然後你可以覆蓋CSS中的類：

.no-radial body { 
    font-family: arial, sans-serif; 
    font-size: 14px; 
    color: #fff; 
    line-height: 22px; 
    text-decoration: none; 
    background: #09101b url(/images/portal/big_bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale')"; 
}

來源

2011-09-23 23:07:52 Duopixel

聽起來像是Modernizr工作。

Modernizr是一個小型JavaScript庫，用於檢測下一代Web技術本地實現的可用性，即源自HTML5和CSS3規範的功能。許多這些功能已經在至少一個主要的瀏覽器中實現（其中大部分都是兩個或更多），Modernizr的功能很簡單，告訴您當前瀏覽器是否具有本地實現的功能。

來源

2011-09-23 22:03:25 vcsjones

而是然後瀏覽器檢測，使用特徵檢測，一個JavaScript的插件，如Modernizr將做的工作非常整齊。

它將類名添加到根元素，所以你可以在你的CSS中檢查它。

來源

2011-09-23 22:06:02

這幾乎可以工作，但是由於Modernizr通常只對CSS漸變進行特徵檢測，所以它一直無法工作。在某些情況下，如Opera 11.5，支持CSS漸變，但徑向漸變不支持。 –

Modernizr是你的朋友？

來源

2011-09-23 22:06:26 simbo

CSS瀏覽器檢測徑向漸變？

回答

相關問題