So verwalten Sie Assets für moderne/alte Browser

Question

Mit neuen Browsererweiterungen wie CSS3-Animationen, Farbverläufen, SVG-Hintergründen usw. wird es für neuere Browser überflüssig, älteren CSS-Code herunterladen zu müssen Laden Sie den erweiterten CSS-Code herunter. Also wie könnten Sie auf HTTP-Ebene (kein serverseitiger Programmieransatz) mit einem solchen Problem umgehen? Sollten Sie eine base.css-Datei haben, die an beide Gruppen von Browsern geliefert wird und danach eine zusätzliche CSS-Datei geliefert bekommen, abhängig davon, welche Browsergruppe sie anfordert? Gibt es eine Möglichkeit, eine CSS-Datei einzufügen, die den Browser einfach an die browsergruppenspezifische Neuschreibung weiterleitet? Oder ist das etwas, das zuerst auf der Clientseite ermittelt und heruntergeladen werden sollte?

Answer 1

Ich habe festgestellt, dass es drei Möglichkeiten gibt, dies zu tun.

1. eine große Datei für jeden der Sheet verwenden und Vermögenswerte JavaScript und dann so etwas wie modernizr und Funktion auszusondern verwenden Schnüffeln, welcher Browser, was der Fall ist. Oder lassen Sie alle Browser dasselbe machen. Dies ist besser für Entwicklungseingaben und Tests.

2. Verwenden Sie zwei Dateien (eine mit der Bezeichnung ancient.css und eine andere mit der Bezeichnung modern.css), und verwenden Sie eine serverseitige HTTP-Sniffer-Operation, um die Version des Browsers anzuzeigen und die entsprechende Datei bereitzustellen. Setzen Sie das HTTP-Caching in der fernen Zukunft ab, um zu verhindern, dass es jedes Mal auf den Server zugreift, um zu prüfen, welche Datei heruntergeladen werden soll. Um die Dateien zu generieren, erstellen Sie einfach eine Datei mit allen wichtigen Komponenten, die von allen Browsern gemeinsam genutzt werden, und einer anderen mit dem emulierten Zeug für die älteren Browser. Der Vorteil ist, dass Sie alle neuen CSS3- und HTML5-JavaScript-Sachen verwenden können, aber der Nachteil ist, dass Sie testen müssen, um sicherzustellen, dass der Code-Code des modernen Browsers genauso funktioniert wie das alte Zeug.

3. Haben Sie zwei Asset-Dateien (modern + alt) und haben Sie einen modernen Download zuerst. Dann lassen Sie den Browser sehen, ob er etwas über modernizr unterstützt, und wenn nicht, dann laden Sie die alte Datei herunter. Der Vorteil hier ist, dass Sie keine zusätzlichen serverseitigen Sachen entwickeln müssen, aber der Nachteil ist, dass Ihre Website langsamer rendert und Sie mehrere Downloads derselben Ressource zur gleichen Zeit haben können.

Answer 2

Wenn Sie die Konzepte von graceful degradation und progressive enhancement vollständig umsetzen, können Sie dieselbe css für alle Zielbrowser verwenden - kurz gesagt, wenn ein Browser keine abgerundeten css3-Ecken unterstützt - geben Sie ihm die Regel mit dem Hersteller; Wenn es das auch nicht unterstützt - kein Problem, die Seite wäre immer noch mit eckigen Ecken verwendbar. Der Overhead des Herunterladens von Regeln mit herstellerspezifischen Präfixen sowie Standard-Downloads wäre im Vergleich zu einer zusätzlichen http-Anfrage minimal und würde die Wartbarkeit verbessern sowie Ihnen Ärger ersparen, da Sie sich nicht auf die Browser-Erkennung verlassen müssen.

Layout-spezifische Hacks müssten normalerweise nur auf die IE-Familie angewendet werden, auf die HTML-bedingte Kommentare abzielen.