Иногда вы можете использовать префиксные свойства, чтобы каждый браузер применял свои собственные свойства на основе своих префиксов и игнорировал другие.Следующий код заполняет фон CSS3-градиентом:
background-color: green;
background-image: url(my-img.png);
background-image: -webkit-linear-gradient(top right, #b51111, #eeeeee);
background-image: -moz-linear-gradient(top right, #b51111, #eeeeee);
background-image: -ms-linear-gradient(top right, #b51111, #eeeeee);
background-image: -o-linear-gradient(top right, #b51111, #eeeeee);
background-image: linear-gradient(top right, #b51111, #eeeeee);
В этом коде:
- -webkit- предназначен для браузеров на основе WebKit (Chrome и Safari)
- -moz- для Firefox
- -ms- для Internet Explorer
- -o- для Opera
Но, вообще говоря, браузерсниффинг - не лучший способ, потому что он может легко потерпеть неудачу в новых браузерах.Таким образом, вы должны получить строку браузера User Agent и проанализировать ее.Затем примените конкретные правила CSS для каждого браузера на основе его поддерживаемых функций.Если строка User Agent браузера изменится в более новых версиях, вы должны изменить код своего браузера.Представьте, что вы хотите поддерживать несколько браузеров, и каждый из них может выпустить несколько новых версий за один год!Вы можете запросить браузер, если он поддерживает данную функцию.например, HTML5 видео:
if(!!document.createElement('video').canPlayType === true) {
// run some code that relies on HTML5 video
} else {
// do something else
}
Существует библиотека обнаружения объектов с именем Modernizr , написанная на основе JavaScript.Вы можете скачать его и включить с помощью html-страницы.Также вы должны добавить класс no-js к вашему элементу.Modernizer запускает все свои тесты обнаружения признаков и и некоторые классы для элемента;примерно так:
<html lang="en-gb" class=" js no-flexbox no-flexbox-legacy canvas canvastext
webgl no-touch geolocation postmessage websqldatabase no-indexeddb
hashchange history draganddrop no-websockets rgba hsla multiplebgs
backgroundsize borderimage borderradius boxshadow textshadow opacity
cssanimations csscolumns cssgradients no-cssreflections csstransforms
no-csstransforms3d csstransitions fontface generatedcontent video audio
localstorage sessionstorage webworkers applicationcache svg inlinesvg
smil svgclippaths">
Итак, вы можете применять правила CSS выборочно.Например, вы хотите применить анимированное трехмерное преобразование в поддерживающих браузерах или отобразить что-то в других.Рассмотрим следующий код:
#my-div:hover {
transform: rotateY(90deg);
}
для случая по умолчанию и ниже для альтернативы:
.no-csstransforms3d #my-div:hover {
position: relative;
right: 200px;
}
Это хорошая статья , описывающая понятие.