Разные CSS файлы для разных браузеров - PullRequest
1 голос
/ 10 ноября 2009

Я хочу использовать разные CSS-файлы для разных типов браузеров. Есть ли какой-нибудь простой HTML-код, который может обнаруживать различные типы браузеров и соответственно включать файлы CSS?

Ответы [ 10 ]

5 голосов
/ 10 ноября 2009

Не используйте CSS-хаки, Javascript для переключения таблиц стилей или что-то в этом роде.

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

Это не нужно. Условные комментарии полезны, может быть, для IE6 и ниже для исправления PNG, но, если исходить из этого, если вы знаете CSS и различные ошибки браузера, вы можете легко без проблем кодировать XHTML и CSS для IE 5.5.

3 голосов
/ 10 ноября 2009

Это вещь типа javascript. Javascript очень хорош для выбора браузера. Просто используйте обнаружение браузера, чтобы указать на другой файл CSS.

Положите что-то подобное в голову:

<script type="text/javascript">
var browser=navigator.appName;
if browser == "Microsoft Internet Explorer" {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"IE.css\">");
}
else if browser == "Firefox" {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"FF.css\">");
}
else {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"generic.css\">");
}
</script>

Я не могу подтвердить JS, но это соответствует тому, что вам нужно сделать.

2 голосов
/ 10 ноября 2009

Вы должны использовать серверную часть, чтобы сделать это во всех браузерах. Если вы выберете способ на стороне сервера, вам придется проанализировать заголовок User-Agent и добавить действительный CSS из этого анализа. Я советую вам не делать этого , потому что анализ User-Agent является утомительной задачей и есть более элегантный способ справиться с особенностями браузера.

Стоит отметить, что если вас интересует только добавление специальных CSS-правил (файлов) для Internet Explorer, существует специальный синтаксис:

<!--[if lte IE 6]>

для IE 6 и выше

Также обратите внимание, что есть некоторые CSS-фреймворки, которых следует избегать в соответствии с правилами браузера. На мой взгляд, самая большая из них - YUI 3 Grid . Это даст вам одинаковый внешний вид во всех браузерах при правильном использовании.

1 голос
/ 10 ноября 2009

Существует несколько различных методов для зависящих от браузера таблиц стилей:

1) Как уже было сказано, вы можете использовать условные операторы для определения версий IE, например,

2) Если вы используете серверный язык, такой как PHP, Ruby и т. Д., Вы можете обнаружить браузер на основе серверной переменной HTTP_USER_AGENT, например,

if(preg_match('/^Mozilla\/.*?Gecko/i',$agent)){
    print "Firefox user."; $firefox = true;
    // process here for firefox browser
}

Этот метод является мощным, потому что вы можете обнаружить практически любой браузер, и на основе этого вы можете включить (или распечатать, если быть точным) любой необходимый файл .css в шаблон PHP. Э.Г.

if ($firefox) print '<link rel="stylesheet" href="http://site.com/firefox.css">';

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

3) И, конечно, вы можете определить версию браузера с помощью javascript, для этого требуется всего пара переменных, например,

var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);

Но следует использовать код, анализирующий значения этих переменных, как в в этом примере .

1 голос
/ 10 ноября 2009

Я знаю только для то есть:

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

также js обнаружение

0 голосов
/ 04 ноября 2013

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

<script type="text/javascript">

var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var nameOffset,verOffset,ix;

// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
 browserName = "Opera";
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
 browserName = "Microsoft Internet Explorer";
}
// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
}
// In Safari, the true version is after "Safari" or after "Version" 
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
}
// In Firefox, the true version is after "Firefox" 
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
}
// In most other browsers, "name/version" is at the end of userAgent 
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < 
          (verOffset=nAgt.lastIndexOf('/')) ) 
{
 browserName = nAgt.substring(nameOffset,verOffset);
 fullVersion = nAgt.substring(verOffset+1);
 if (browserName.toLowerCase()==browserName.toUpperCase()) {
  browserName = navigator.appName;
 }
}

 if (browserName == "Microsoft Internet Explorer") {
 document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/ms.css\">");
 }
 else if (browserName == "Firefox") {
 document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/ff.css\">");
 }
 else {
 document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/other.css\">");
 }

</script>
0 голосов
/ 20 марта 2012
<head>

<link rel="stylesheet" type="text/css" href="generic.css" />

<![if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]>

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

</head>
0 голосов
/ 10 ноября 2009

Вы должны изменить свое желание использовать разные таблицы стилей для разных браузеров.

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

Это то, что я использовал на веб-сайте нашей компании. Мне не нужно было ничего менять, чтобы заставить его работать, когда вышел IE 8. :)

Обратите внимание, что правильный тип документа имеет решающее значение для согласованного поведения в разных браузерах. Без него IE эмулирует большинство ошибок рендеринга из IE 4, включая некорректную модель бокса .

0 голосов
/ 10 ноября 2009

Условные комментарии HTML работают, если вы пытаетесь включить файлы CSS, специфичные для Internet Explorer. См. эту статью о причудливом режиме для получения дополнительной информации.

Для других браузеров вам придется либо использовать JavaScript, либо на стороне сервера определить, какой браузер использует посетитель, и в зависимости от результата включить подходящий файл CSS. Еще одна замечательная статья о причудливом режиме об этом здесь .

0 голосов
/ 10 ноября 2009

Обычно проще использовать «хаки» в одной таблице стилей.

Это не потворствует их использованию (поскольку я не хочу, чтобы евангелисты подавляли его):

http://www.webmonkey.com/tutorial/Browser-Specific_CSS_Hacks

http://www.dynamicsitesolutions.com/css/filters/support-chart/

http://ajaxian.com/archives/css-browser-hacks

http://www.456bereastreet.com/archive/200411/the_underscore_hack/

Для различных версий IE (обычно наиболее важных) существует условный IE 'if', который может обрабатывать лотов параметров: http://www.quirksmode.org/css/condcom.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...