Обнаружение браузером CSS радиального градиента?

Question

Я использую радиальный градиент в качестве фона для сайта.Он отлично работает на Safari, Chrome и Firefox 3.5+, но у Opera и Internet Explorer есть проблемы.Итак, я сделал фоновое изображение для отображения в этих браузерах, чтобы выглядеть одинаково.Прямо сейчас я определяю браузер и версию на стороне сервера от агента пользователя, а затем включаю правильный файл CSS.Тем не менее, я чувствую, что должен быть лучший способ, чем поддерживать два отдельных CSS-файла, чтобы делать по существу одно и то же (единственное отличие между CSS-файлами - это html и body).

Для хороших браузеров:

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')";
}

Answer 1

Похоже на работу для Modernizr .

Modernizr - это небольшая библиотека JavaScript, которая обнаруживает наличие собственных реализаций для веб-технологий следующего поколения, то есть функций, которые вытекают изспецификации HTML5 и CSS3.Многие из этих функций уже реализованы, по крайней мере, в одном крупном браузере (большинство из них в двух или более), и то, что делает Modernizr, очень просто говорит вам, имеет ли данный браузер встроенную функцию или нет.

Answer 2

Когда вы пытаетесь применить 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')";
}

Answer 3

Вместо обнаружения в браузере используйте функцию обнаружения , плагин JavaScript, такой как Modernizr , сделает работу очень аккуратно.

Itдобавляет имена классов к корневому элементу, чтобы вы могли проверить его, как в вашем css.

Answer 4

Modernizr твой друг ...