Как определить браузер пользователя и применить определенный файл CSS?

Мне нужно обнаружить браузер и применить соответствующий файл CSS.

Я создал 3 css-файла: _ _ ie.css, ff.css, opera.стиль CSS. Теперь мне нужно обнаружить браузер, чтобы включить хороший.

Я знаю 

<!--[if IE]>
     <link rel="stylesheet" href="css/ie.css" type="text/css"/>
<![endif]-->

но как мне сделать то же самое с Firefox и Opera/Chrome?

10
css user-agent

6 ответов

Если вам нужно обнаружить браузеры только для применения CSS, то вы можете переосмыслить CSS, прежде чем переходить к таблицам стилей браузера. Все, что требуется для одного браузера, чтобы имитировать строку агента пользователя другого или новую версию, которая будет выпущена, и все ломается. Используйте текущие стандарты и проверьте свой код (http://validator.w3.org/), и вам придется беспокоиться о гораздо меньшем количестве проблем с кросс-браузером. Даже просто используя <!--[if IE]><![endif]--> без номера версии может сломать макет в более поздних версиях.

это, как говорится, если вы хотите, чтобы стиль страницы по-разному на основе того, какие функции CSS доступны, взгляните на Modernizr. Таким образом, вы проверяете только функции, которые не будут нарушены, если будет выпущена новая версия браузера.

Если все остальное не удается, и вам действительно нужно обнаружить браузер посетителя, попробуйте jquery.browser. Он встроен в jQuery и прост в использовании. http://api.jquery.com/jQuery.browser/.

8

Если вам нужно обнаружить браузер для Firefox, Opera и Chrome, то вы делаете что-то неправильно. Тот же CSS должен работать во всех из них.

есть исключения из этого, конечно, - все браузеры имеют недостающие функции и ошибки, которые не появляются в других браузерах. Примером может служить text-overflow:ellipsis который не поддерживается Firefox.

однако, если вы придерживаетесь часто используемых функций, эти случаи немногочисленны и далеки друг от друга, и в вообще, вам действительно не нужно делать обнаружение браузера в эти дни, за исключением различных версий IE.

Если вы не уверены, поддерживаются ли функции, которые вы хотите использовать, большинством браузеров, вы можете узнать по адресуCanIUse.com или Quirksmode.

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

3

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

ниже приведен пример использования свойства transform для вертикального центрирования. Если браузер не поддерживает преобразование, то мы не хотим корректировать его позиционирование:

@supports (transform: translateY(-50%)) {
    .foo {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
}

поддержка браузеров для Запросы

3

может быть, я опоздал, но. Лучшее решение-использовать Определитель браузера CSS/JS (4кб сокращен). отказ от ответственности: это коммерческий продукт что я продаю.

чтобы разделить файлы CSS и JS, передайте этот код в свой <html> tag:

<head><script src="js/cssjs-browser-determiner.min.js"></script>

<!-- Old Browsers -->
<script>
browser.is_old && document.writeln(
  '<link href="styles/old-browser.css" rel="stylesheet">'
);
</script>

этот файл будет загружен только для старых браузеров (по умолчанию те, которые не поддерживают переход CSS3). Если вы хотите разделить файлы для каждого конкретного браузер вы можете сделать то же самое, но изменить browser.is_old to browser.chrome или browser.webkit etc...

затем напишите CSS для определенного браузера внутри старого браузера.css (или любой другой файл CSS):

.opera9 .my-el { ... }
.firefox1_5 .my-el { ... }
.ie8- .el { ... } // IE8 or less
.ios .el { ... } // iPhone, iPad, iPod
etc...
3

нет никаких условных комментариев для браузеров, кроме IE.

но вы можете сделать это с помощью javascript:http://www.quirksmode.org/js/detect.html

1

иногда вы можете использовать префиксные свойства, которые каждый браузер применяет свои собственные свойства на основе своих префиксов и игнорирует другие. Следующий код заполняет фон градиентом 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);

в этом коде:

  • The-webkit-предназначен для браузеров на базе WebKit (Chrome и Safari)
  • The-moz-для Firefox
  • The-ms-Is для Internet Explorer
  • The-o-is for Opera

но в целом говоря, нюхают браузер не лучший способ, потому что он может легко потерпеть неудачу в новых браузерах. Таким образом, вы должны получить строку агента пользователя браузера и проанализировать ее. Затем примените определенные правила css для каждого браузера на основе его поддерживаемых функций. Если строка агента пользователя браузера изменяется в более новых версиях, необходимо изменить нюхательный код браузера. Представьте, что вы хотите поддерживать несколько браузеров, и каждый из них может выпустить несколько новых версий в год! Вы можете запросить браузер, который если он поддерживает данную функцию. например, 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 выборочно. Например, вы хотите примените анимированное 3D-преобразование в поддерживающих браузерах или отобразите что-то в других. Рассмотрим следующий код:

#my-div:hover {
  transform: rotateY(90deg);
}

для случая по умолчанию, и ниже альтернативные:

.no-csstransforms3d #my-div:hover {
  position: relative;
  right: 200px;
}

это хорошо статьи описание концепции.

1