Was muss ich beachten, wenn ich die Cross-Browser-Kompatibilität in meine Designs einbeziehe?

Wenn ich ein Website-Design erstelle, konzentriere ich mich normalerweise auf einen Browser (Chrome) und erstelle es vollständig, bevor ich einen anderen Browser öffne. Sobald ich fertig bin, werde ich es in anderen Browsern testen, während ich die Daumen drücke und hoffe, dass alles in Ordnung aussieht.

Ich bin mir der verfügbaren CSS-Normalisierer bewusst, die die Konsistenz zwischen den Browsern verbessern, aber manchmal verzichte ich lieber auf einen, um unnötiges Aufblähen zu vermeiden.

Ich kümmere mich nur um die neuesten Browser, und pixelgenaue Designs sind keine Notwendigkeit. Welche Designüberlegungen (sowohl visuell als auch unter der Haube) sollten beachtet werden, um mögliche Kopfschmerzen oder "CSS-Hacks" aufgrund von Problemen mit der Cross-Browser-Kompatibilität zu vermeiden?

Wenn Sie nur auf die neuesten Browser abzielen (zum Zeitpunkt des Schreibens von Chrome 37.x, Firefox 32.x und Internet Explorer 11 sollten die neuesten Rendering-Engines abgedeckt sein), können Sie die browserübergreifende Kompatibilität relativ einfach und in den meisten Fällen erreichen - Hack kostenlos, da alle genannten Browser die meisten der neuesten HTML- und CSS-Eigenschaften unterstützen.

Einige Fragen, die Sie sich stellen sollten, bevor Sie beginnen:

1.) Wie kann ich von der Zeit / dem Geld profitieren, die ich aufgewendet habe, damit meine Website wie ein Browser aussieht?

Wenn sich die vielen Stunden, die Sie damit verbracht haben, Ihre Website zu optimieren und sie in allen Browsern gleich aussehen zu lassen, nicht in angemessener Zeit amortisieren, ist es offensichtlich, dass Sie Ihre Zeit damit verschwenden, browserübergreifende Kompatibilität zu erreichen (Beispiel: Ist dies der Fall? Sinn / Auszahlung zur Optimierung einer Intranet-Website für Chrome / Firefox, wenn die Bibliothek, für die Sie arbeiten, einen 10-Jahres-Vertrag mit Microsoft hat, um auf deren Software ausgeführt zu werden?).

2.) Ist es wichtig, dass der Inhalt meiner Website in allen Browsern gleich aussieht (pixelgenau)?

Wenn es keinen bestimmten Grund gibt , warum Sie eine gestrichelte Linie benötigen, um in allen Browsern gleich auszusehen, sollten Sie sich nicht darum kümmern - überlassen Sie es dem Browser, sie anhand der Renderregeln zu rendern. Es wird nicht in jedem Browser gleich aussehen, aber kein gewöhnlicher Benutzer wird jemals überprüfen, ob Ihre Website die gestrichelte Linie in Firefox oder im IE gleich dargestellt hat. Benutzer verwenden in der Regel einen Browser, um den Inhalt zu durchsuchen. Solange alle Funktionen Ihrer Website funktionieren und optisch ansprechend aussehen, können Sie loslegen. Pixel-perfekte Designs werden sehr selten benötigt (Sie möchten sie möglicherweise erreichen, um Ihre Fähigkeiten unter Beweis zu stellen - insbesondere auf Websites für persönliche Entwicklerportfolios).

3.) Kann die Funktionalität meiner Website in jedem Browser funktionieren?

Viele der neuesten HTML / CSS (/ JavaScript) -Techniken funktionieren nicht in allen Browsern, da die neuesten HTML / CSS-Spezifikationen noch lange nicht fertig sind und Browserhersteller häufig entscheiden, Testfunktionen einzuschließen, ohne die Spezifikation zu befolgen ODER die Spezifikation zu ändern , während der Anbieter noch keine neue Version seines Browsers veröffentlicht hat. In diesem Fall haben Sie zwei Möglichkeiten:

• Implementieren Sie eine Polyfüllung, die die gewünschte nicht unterstützte Funktion nachahmt
• bieten einen Fallback. Fallbacks verfügen normalerweise nur über eingeschränkte Funktionen, bieten jedoch die Mindestunterstützung, sodass Ihre Website nicht auseinanderfällt, wenn die Funktion nicht unterstützt wird (selbst die Anzeige der Meldung " Ihr Browser unterstützt diese Funktion nicht " ist besser als die Anzeige einer leeren Seite).

Einige Überlegungen beim Erstellen Ihrer Website:

• Stellen Sie sich Ihre Websites als Module vor . Wenn Sie das Design für ein Modul abgeschlossen haben (z. B. Website-Navigation), testen Sie es in allen Browsern, die Sie gleichzeitig unterstützen möchten. Wenn Sie Probleme feststellen, versuchen Sie, diese zu beheben, bevor Sie mit dem nächsten Modul fortfahren. Es ist einfacher, kleinere Codestücke zu debuggen, als das fertige Design zu debuggen und nicht zu wissen, welcher Teil genau das Problem verursacht.
• Halten Sie Ihren Code auf ein Minimum . Wenn Sie nur ein div ein- / ausblenden müssen, müssen Sie kein Framework eines Drittanbieters implementieren, um dies zu erreichen ( "nicht genug jQuery" ) - einfaches JavaScript kann dies perfekt.
• Refactor früh und Refactor oft . Möglicherweise stellen Sie häufig fest, dass Sie zu viele CSS-Regeln für etwas geschrieben haben, das viel einfacher hätte durchgeführt werden können. Haben Sie keine Angst, Ihren Code umzugestalten. Dies wird Ihr Leben und das Leben des potenziellen Entwicklers, der später an Ihrem Code arbeiten wird, viel einfacher machen, da weniger Code zu lesen ist und somit weniger Spielraum für Fehler besteht.
• Verwenden Sie Herstellerpräfixe . Viele der neuesten CSS-Funktionen erfordern immer noch ein bestimmtes Browserpräfix, um auch in der neuesten Version ausgeführt zu werden. Geben Sie die vom Hersteller vorangestellten Eigenschaftsnamen vor dem regulären CSS-Eigenschaftsnamen an, damit er im gewünschten Browser funktioniert.

Dies wären meine wichtigsten Überlegungen, über die ich nachdenken sollte, bevor ich mit der Arbeit beginne.

Sie müssen sich darüber im Klaren sein, wie kompatibel bestimmte Elemente von HTML, CSS usw. mit verschiedenen Browsern sind. Neuere HTML5-Elemente (und sogar einige Teile von CSS3) funktionieren in einigen Browsern nicht und verursachen Probleme mit Bereichen des Designs.

Sie können dies überprüfen, indem Sie nach vielen möglichen Referenzen suchen ( Mozilla Developer Network , CSStricks , CanIUse , w3schools (siehe auch w3fools )). Diese haben im Allgemeinen einen Abschnitt zur Browserkompatibilität, in dem angezeigt wird, in welchen Browsern ein Element funktioniert und ob Alternativen oder Präfixe zur Unterstützung der Kompatibilität verwendet werden können - zum Beispiel:

Bedingter Code kann auch verwendet werden, um Dinge hinzuzufügen, damit er für einen bestimmten Browser funktioniert - z. B. um Versionen 8 und weniger des IE für die Verwendung von HTML5shiv zu erhalten (damit HTML5-Elemente funktionieren):

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></sc/>
<![endif]-->

Aber es ist auch gut, etwas zu machen, das überhaupt richtig funktioniert.

Ich kümmere mich nur um die neuesten Browser, und pixelgenaue Designs sind keine Notwendigkeit.

Dann sind Sie wahrscheinlich gut zu gehen. Solange Sie auf Standards aufbauen, sollte es keine großen Überraschungen in allen Browsern geben, wenn Sie nur auf die neuesten und besten abzielen. Hängen Sie nur nicht vollständig von einer CSS-Funktion ab, die ohne Fallback-Planung noch nicht allgemein unterstützt wird.