Gibt es eine Möglichkeit, eine andere CSS-Datei für einen bestimmten Browser zu laden?Verschiedene CSS für jeden Browser?
wie (schlecht Pseudo-Code):
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" />
Ideale Lösung Sie möchte nicht existieren:
Leider ist ein Cross-Browser-Lösung nicht vorhanden ist, wenn Sie es auf die versuchen zu tun HTML selbst Es wird jedoch für die meisten Versionen von IE funktionieren. Wie so:
<!--[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]-->
So ist die beste Lösung:
Wie über eine Javascript-Lösung wie solche: Browser Detection. Lesen Sie ein wenig über diese Klasse besser zu verdeutlichen, was diese Datei im Grunde tut, ist einfach das Konzept wie solche:
var browser = navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ? 'chrome' : 'other';
Offensichtlich tut es mehr als nur Art des Browsers erkennen. In der Tat kennt es die Version, das Betriebssystem und viele weitere Details, über die Sie in diesem Link lesen können. Aber, es geht und prüft alle Arten von Browsern durch Ersetzen von "Chrome" durch "Mozilla", "Explorer" und so weiter ...
Dann zum Hinzufügen Ihrer CSS-Dateien, folgen Sie einfach mit bedingten Anweisungen wie folgt :
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" />');
}
Viel Glück und hoffe das hilft!
Bedingte Kommentare funktionieren nur für Internet Explorer (und nur bis zu einer bestimmten Version, ich denke, 8 ist die letzte, die es unterstützt). Das OP möchte verschiedene Dateien an Nicht-IE-Browser übermitteln. – cimmanon
@cimmanon: Ich habe es aktualisiert. – bluejamesbond
Und es ist immer noch eine schlechte Antwort. UA-Sniffing war nie gut für das Bereitstellen von Inhalten. – cimmanon
Sie können bedingte Kommentare verwenden, um auf IE-Browser zu zielen. Schau dir das an: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/. Um auf Firefox zu zielen, können Sie diese Antwort überprüfen: https://stackoverflow.com/a/953491/1941910. Aber ich denke, es ist nicht notwendig, Firefox, Chrome oder Safari als Ziel zu wählen, sie alle machen einen guten Job mit CSS.
können Sie dies auf der Server-Seite tun.
if(Request.UserAgent is chrome){
//here output chrome stylesheet
}
Ja,
<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" />
Woher hast du gelesen, dass es ein 'browser' Attribut gibt? Es gibt nicht einen, laut [der HTML5-Spezifikation] (http://www.w3.org/TR/html5/document-metadata.html#the-link-element) oder sogar [der HTML4-Spezifikation] (http://www.w3.org/TR/html4/struct/links.html#h-12.3). –
Doppel Post ... finden Sie in http://stackoverflow.com/a/2644080/1100536 – bluejamesbond
Welchen Grund haben Sie zu jedem spezifischen Stylesheets zum Servieren diese Browser? – cimmanon