Вопрос по html, css – Разные CSS для каждого браузера?

8

Есть ли способ загрузить другой файл CSS для конкретного браузера?

вроде (плохой псевдокод):

if firefox
<link rel="stylesheet" type="text/css" href="includes/MyCssFirefox.css" />
if chrome
<link rel="stylesheet" type="text/css" href="includes/MyCssChrome.css" />
if Safari
<link rel="stylesheet" type="text/css" href="includes/MyCssSafari.css" />
Двойной пост ... пожалуйста, обратитесь кstackoverflow.com/a/2644080/1100536 Mathew Kurian
Какая у вас причина для предоставления определенных таблиц стилей каждому из этих браузеров? cimmanon

Ваш Ответ

4   ответа
0

Посмотри на это:http://css-tricks.com/how-to-create-an-ie-only-stylesheet/, Чтобы нацелиться на firefox, вы можете проверить этот ответ:https://stackoverflow.com/a/953491/1941910, Но я думаю, что нет необходимости ориентироваться на Firefox, Chrome или Safari, они все хорошо работают с применением CSS.

-5

Да уж,

<link rel="stylesheet" type="text/css" browser="mozillafirefox" href="includes/firefox.css" />
<link rel="stylesheet" type="text/css" browser="googlechrome" href="includes/chrome.css" />
<link rel="stylesheet" type="text/css" browser="msinternetexpl" href="includes/ie.css" />
Где ты прочитал, что естьbrowser атрибут? Нет, согласноспецификация HTML5или дажеспецификация HTML4. Sergiu Dumitriu
19

Идеального решения, которого вы хотите, не существует:

К сожалению, кросс-браузерное решение не существует, если вы пытаетесь сделать это на самом HTML. Тем не менее, это будет работать для большинства версий IE. Вроде такой:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="includes/myIEGeneralStyle.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="includes/myIE6Style.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="includes/myIE7Style.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="includes/myIE8Style.css" />
<![endif]-->

Итак, лучшее решение:

Как насчет решения Javascript, такого как:Обнаружение браузера, Прочитайте немного об этом классе, чтобы лучше уточнить, что этот файл в основном делает просто так:

var browser = navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ? 'chrome' : 'other';

Очевидно, что он делает больше, чем просто определяет тип браузера. На самом деле, он знает версию, ОС и многое другое, что вы можете прочитать в этой ссылке. Но он проверяет все типы браузеров, заменяя «chrome» на «mozilla», «explorer» и так далее ...

Затем, чтобы добавить свои CSS-файлы, просто выполните условные выражения, например:

if (BrowserDetect.browser.indexOf("chrome")>-1) {
document.write('<'+'link rel="stylesheet" href="../component/chromeCSSStyles.css" />');
} else if (BrowserDetect.browser.indexOf("mozilla")>-1) {
    document.write('<'+'link rel="stylesheet" href="../component/mozillaStyles.css" />');
} else if (BrowserDetect.browser.indexOf("explorer")>-1) {
    document.write('<'+'link rel="stylesheet" href="../component/explorerStyles.css" />');
}

Удачи и надеюсь, что это поможет!

И это все еще плохой ответ. UA сниффинг никогда не был хорош для подачи контента. cimmanon
Условные комментарии работают только для Internet Explorer (и только до определенной версии, я думаю, что 8 является последним, чтобы поддержать его). ОП хочет передать разные файлы в браузеры не IE. cimmanon
@ Cimmanon: я обновил его. Mathew Kurian
теперь это должно быть прилично Mathew Kurian
-1

Вы можете сделать это на стороне сервера.

if(Request.UserAgent is chrome){        
    //here output chrome stylesheet
}

Похожие вопросы