verschiedene Web-Dateien für verschiedene Browser erstellt

Question

Es kommt mir vor, dass in den letzten zehn Jahren alle Bücher über HTML/CSS immer über Browser-Inkompatibilitäten und wie man dieses Problem umgehen durch Hinzufügen von mehr "Hacks" zu CSS, JS, oder HTML. Warum haben sie nie geraten, dass der andere Weg, um damit umzugehen (und ich glaube, der beste Weg) ist, Code (php, c, was auch immer) in der ersten Zeile einer HTML-Datei hinzuzufügen, zu erkennen, welcher Browser verwendet wird, dann hinzufügen geeignete CSS/JS-Dateien für diesen Browser?

Answer 1

Es ist wegen der Server/Client teilen. Es ist nicht möglich, Clienteinstellungen von Code zu erkennen, der auf dem Server ausgeführt wird.

Es gibt bedingte Kommentare in HTML, mit denen Sie alternative CSS- oder Javascript-Dateien laden können, wenn Sie dies wünschen.

A Quickie reference on Conditional Comments

Answer 2

Denn dann müssen Sie zwei Sätze von CSS und JS-Dateien beibehalten. Das ist nicht wirklich anders als das Hinzufügen von "Hacks" zu einem, außer dass Sie jedes Mal, wenn Sie eine Änderung vornehmen, Änderungen an zwei Dateien vornehmen müssen.

Answer 3

Um weiter, was Matthew Vines sagte, dass die bedingten Kommentare ein bisschen so aussehen ...

<!--[if lte IE 6]><link href="LayoutIE6.css" type="text/css" rel="stylesheet" /><![endif]--> 
<!--[if gte IE 7]><link href="LayoutIE7.css" type="text/css" rel="stylesheet" /><![endif]--> 
<!--[if !IE]><link href="Layout.css" type="text/css" rel="stylesheet" /><![endif]--> 

this helps :)

Answer 4

Es ist, weil (zum größten Teil und 'traditionell' selbst) CSS-Hacker wurden/werden von Frontend-Entwicklern implementiert, die nicht immer Zugriff auf Backend-Skripte haben. Wenn die Web-Entwicklung in den frühen Tagen von Back-End-Entwicklern vorangetrieben worden wäre, hätte ich oft gedacht, dass die Dinge ganz anders aussehen würden.

Ich denke nicht, dass dies übrigens eine schlechte Frage ist (es wurde ursprünglich aus irgendeinem Grund abgelehnt). Und für die Aufzeichnung sind bedingte Kommentare für CSS & ein stabiles JS-Framework wie jQuery definitiv der Weg zu gehen.

Answer 5

In der Vergangenheit wurden Hacks in Ihrem JavaScript hinzugefügt, um zu ermitteln, welchen Browser der Client verwendet, und Code darauf auszuführen. Es scheint, als ob es keine Entscheidung für den besten Weg gegeben hätte, so dass jedes Buch seine eigene Implementierung hatte.

Sie in vielen alten Bücher Code finden Sie den Browser und dann über den gesamten Code bestimmen, würden Sie sehen die Dinge wie:

if (NS4) { 

} elseif (IE) { 

} 

aber weitgehend das ist jetzt veraltet.

Eine weitere große Sache, die wir jetzt haben, sind Frameworks wie JQuery, die aussehen, um einige der wenigen bestehenden Inkompatibilitäten zu abstrahieren, die immer noch da sind. Es scheint mir in der Vergangenheit, dass die Leute nur ihre eigenen JQuery-esq-Frameworks rollen würden, so dass es kein einheitliches gibt, das von der größeren Community akzeptiert wird.

Eines meiner Lieblingszitate über User-Agent-Strings kam mit Chrome veröffentlicht wurde:

„Und so Chrome verwendet WebKit und vorgab Safari zu sein, und WebKit vorgab KHTML zu sein, und KHTML gab vor, Gecko, und alle Browser vorgab zu sein, Mozilla zu sein, und Chrome nannte sich selbst Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525,13 (KHTML, wie Gecko) Chrom/0,2 .149.27 Safari/525.13 und der User-Agent-String war ein voller Chaos, und in der Nähe nutzlos, und jeder gab vor, alle anderen zu sein, und Verwirrung wimmelte „

Es ist eine gute Komödie lesen -. http://webaim.org/blog/user-agent-string-history/

Answer 6

Wenn Sie die reine Browser-Erkennung verwenden, müssen Sie Ihre Liste jedes Mal aktualisieren, wenn ein neuer Browser oder eine neue Browserversion veröffentlicht wird.Dies führt zu lächerlichen Situationen, wie Benutzer einer neuen Version aufgefordert werden, ein Upgrade auf eine ältere Version durchzuführen

Browser-Inkonsistenzen sollten durch Testen auf Funktionen behandelt werden. Wie andere bereits erwähnt haben, gibt es JavaScript-Frameworks wie JQuery, die dies für Sie erledigen. In Bezug auf CSS verwenden Sie bedingte Kommentare für ältere Versionen von Internet Explorer, wie andere bereits erwähnt haben. Versuchen Sie, "Hacks" zu vermeiden, da sie in einer neueren Version behoben werden können, ohne das Problem zu beheben, mit dem Sie umgehen wollten.

Answer 7

Ich denke, es ist eine bessere Lösung:

Einfache Lösung, benutzen Sie einfach diese JS-Bibliothek und Sie können leicht Stile für jeden Browser/os Kombination anwenden:

BrowserClass.js

Damit werden Sie Erhalte einen Klassennamen auf dem Body-Tag mit dem aktuellen Namen und der Version des Browsers auch mit dem verwendeten Betriebssystem.

Nach schließen Sie die Datei:

<script src="js/browserclass.js"></script> 

Zum Beispiel unter Windows 8.1 mit der neuesten Chrom Sie sehen:

<body class="chrome chrome34 win desktop"> 

Und in Ihrem Stil-Datei können Sie beziehen von: (.sass Styling)

body.chrome 
    #example 
    color: blue 

oder

body.win.chrome 
    #example 
    color: red 

Hinweis:

[if IE] seit IE10 veraltet Aussagen so ist dies die Lösung für diese