Theoretisch ist das Erstellen einer Webseite einfach. Die Hauptaspekte umfassen das Schreiben eines HTML-Codes, das Testen in einem Webbrowser und das Hochladen. HTML und CSS sind Standards, was bedeutet, dass eine Webseite, die in einem bestimmten Browser gut funktioniert, in anderen Browsern möglicherweise nicht sauber angezeigt wird.

Natürlich stellen sich die Dinge in der Praxis nicht so einfach heraus. Es gibt eine Vielzahl von Browsern, wobei jeder Browser HTML und CSS auf unterschiedliche Weise anzeigt.

Um sicherzustellen, dass die Webseiten in allen Webbrowsern einheitlich funktionieren, sollte die Cross-Browser-Codierung von den Webdesignern praktiziert werden. In diesem Beitrag besprechen wir 10 der bewährten Tricks, mit denen Sie eine fehlerfreie und browserübergreifende Website erstellen können.

Eine kurze Einführung in CSS

CSS oder Cascading Style Sheets ist eine Reihe von Webformatierungsanweisungen, die das Erscheinungsbild der Webseiten steuern. Einige Browser, die mit CSS kompatibel sind, sind:

IE
Rand
Feuerfuchs
Chrom
Safari
Oper
iOS-Safari
Oper
Android-Browser
Chrome für Android

Aber bevor Sie zu dem Schluss kommen, dass es Ihnen viel Zeit sparen wird, sollten Sie verstehen, dass die meisten Webbrowser nicht alle seine Funktionen vollständig unterstützen.

CSS fungiert als darstellende Komponente, die die Komponenten einer Webseite charakterisiert. Gleichzeitig steuern die Cascading Stylesheets die Gestaltung verschiedener Seiten gleichzeitig.

Obwohl es kein Geheimnis ist, eine perfekte Cross-Browser-kompatible Website zu kuratieren, die die gewünschte Ästhetik gewährleistet, gibt es einige Aspekte, die beachtet werden können, um Ihre Chancen zu verbessern. Hier sind zehn einfach zu befolgende, aber effektive Tipps zum Codieren einer Cross-Browser-Website.

1 Je einfacher, desto besser

Je komplexer HTML und CSS werden, desto wahrscheinlicher sind sie anfällig für Fehler und Bugs. Versuchen Sie, das Layout in der Designphase elementar zu halten, das heißt: eine Kopfzeile, einige Spalten und eine Fußzeile. Wenn Ihr Design mehrere Sidebar-Boxen hat, wird es mit fortschreitendem Prozess hektisch.

Vermeiden Sie viele verschachtelte Elemente und integrieren Sie nur die erforderlichen Elemente. Verwenden Sie zum Erstellen eines Menüs ul und li anstelle einer Tabelle oder einer Reihe von p-Elementen.

2 Validieren Sie Ihren HTML-, CSS- und RSS-Code

Nichts ärgert einen Designer mehr, als eine Webseite sorgfältig zu gestalten, und wenn es an der Zeit ist, sie zu testen, taucht immer wieder ein unbekannter Fehler auf. In solchen Situationen sollte ein Designer die Nerven bewahren und mit der Markup- und Stylesheet-Validierung beginnen.

Es gibt viele kostenlose und kostenpflichtige Tools im Internet, um zu sehen, ob Ihre HTML- und CSS-Markups legitim sind. Mit Hilfe dieser Tools können Sie sicher sein, dass die Markups perfekt sind und die Webseiten den Inhalt so anzeigen, wie Sie es möchten.

Feuerwanze

Firebug ist ein All-in-One-Debugger und -Editor. Es ermöglicht einem Entwickler, an HTML-, JavaScript- und CSS-Markups zu arbeiten. Sie können die Markups in Echtzeit überwachen, hervorheben und auch entfernen.

HTML-Validator

Während Sie die Seitenquelle validieren, werden die Bugs und Fehler gemeldet. Und wenn Sie nicht herausfinden können, was falsch ist, liefert Ihnen das Tool einige Vorschläge.

Validator.w3.org

Sie müssen die Datei hochladen, die Sie validieren möchten. Der Validator zeigt Ihnen die Ergebnisse in verschiedenen Formaten an, wie zum Beispiel:

mit Empfehlungen
als Gliederung

jigsaw.w3.org

Das Tool überprüft Ihr Markup auf potenzielle Fehler und Bugs. Sie können mehrere CSS-Profile festlegen, um ein bestimmtes Medium für das Stylesheet auszuwählen und die Informationen im Bericht zu steuern.

Relaxed.vse.cz

Dieses Tool verwendet nicht die W3C-Regeln zur Validierung, sondern stützt sich auf die integrierten benutzerdefinierten Protokolle. Sie können aus der HTML-Version auswählen, die Sie verwenden möchten, ob Sie den Quellcode sehen möchten und viele andere Optionen.

3 Arbeiten Sie nicht mit dem Browser-Quirks-Modus

Einige Webbrowser verfügen über einen Quirks-Modus. Dabei schlägt sich der Browser mit seinen oft fehlerbehafteten Vorgängerversionen nieder. Obwohl es ermöglicht, dass eine ältere Website mit den heutigen Webbrowsern kompatibel ist, wird es zu einer ziemlichen Aufgabe, wenn Sie nach standardisierten Webseiten suchen. Denn in einem Quirks-Modus werden die Webseiten nicht standardisiert, sondern auf ihre ganz eigene Weise dargestellt.

Standardmäßig wechselt ein Webbrowser in den Quirks-Modus, wenn Sie die Dokumenttypdeklaration oder den DOCTYPE nicht einschließen. Daher sollten Sie immer daran denken, einen gültigen DOCTYPE am Ende der Webseite hinzuzufügen.

4 CSS-Reset-Regeln üben

Jeder Webbrowser hat seine eigenen Standardwerte für bestimmte Aspekte wie Zeilenhöhe und -breite. Diese Standardwerte stehen oft im Widerspruch zu den benutzerdefinierten CSS-Regeln und verzerren das Gesamtbild der Webseiten.

Um das Dilemma zu vermeiden, jede von Ihnen geschriebene CSS-Regel anzupassen, können Sie all diese Zurücksetzungen am Anfang Ihrer CSS-Datei durchführen. Sobald Sie diese Regeln zu Ihrem Stylesheet hinzugefügt haben, können Sie sicher sein, dass Sie für alle Browser vom selben Punkt aus arbeiten.

5 Verwenden Sie Firefox

Im Allgemeinen testen Entwickler die Webseiten gleichzeitig in einem einzigen Browser. Dann gehen sie zu anderen Browsern und nehmen weitere notwendige Änderungen vor, während sie von einem Browser zum anderen wechseln. Dies ist ein idealer Ansatz, anstatt eine Website auf allen Browsern in einem einzigen Durchlauf zu validieren.

Um Ihre Website zu erstellen, ist Firefox der am meisten bevorzugte Browser, da er es einfacher macht, Kompatibilitätsprobleme gegenüber anderen Browsern zu beheben. Firefox wird mit einer Fülle von Add-Ons geliefert, was es sehr entwicklerfreundlich macht. Wenn die Webseiten in Firefox sauber erscheinen, können Sie sicher sein, dass sie in anderen Browsern gut funktionieren.

6 Testen

Die Webbrowser von heute haben Rendering-Macken, daher liegt es in der Verantwortung des Entwicklers, die Markups auf jedem zu testen, wenn sie vorhanden sind. Hier ist eine Liste der wichtigsten Webbrowser:

Internet Explorer
Feuerfuchs
Safari
Oper (44.0.2510.1218)
Microsoft Edge
UC-Browser

Als schnellen Ansatz können Sie sich für einen Online-Testservice entscheiden. Es gibt viele Websites wie Browsershots, die Screenshots Ihrer Website machen und Ihnen zeigen, wie sie auf verschiedenen Betriebssystemen und Webbrowsern angezeigt werden. Diese Screenshots werden per E-Mail versendet oder einfach zum Download bereitgestellt. Einige der Tools sind kostenpflichtig, aber sie informieren Sie sicherlich im Voraus über die Kompatibilitätsprobleme, mit denen die Webseiten möglicherweise konfrontiert sind.

CSS-Tricks tragen nichts, wenn man sie nicht auf den führenden Webbrowsern testen kann. Hier sind einige nützliche Tools, um die Cross-Browser-Kompatibilität der HTML- und CSS-Markups zu authentifizieren:

Quirksmodus

Dies ist eine einfache, aber effektive Methode, um browserübergreifende Störungen zu finden. Quirksmode interpretiert das CSS und zeigt alle möglichen Bedenken an.

Browsershots

Das Browsershots-Tool macht Screenshots der Webseiten und zeigt Ihnen, wie Ihre Website auf verschiedenen Webbrowsern und Betriebssystemen angezeigt wird.

IE-Tester

Dies ist eine zuverlässige Web-App, mit der Sie das Erscheinungsbild der Webseiten in verschiedenen Versionen von Internet Explorer analysieren können. Das Tool testet die Vorlage auf verschiedenen Versionen von Browsern und Betriebssystemen und zeigt die Ergebnisse in einer Word-ähnlichen Oberfläche an.

7 Verwenden Sie bedingte Kommentare

Es gibt Zeiten, in denen Sie Ihr Bestes geben, aber dennoch mit bestimmten Browsern, insbesondere dem Internet Explorer, nicht die gewünschten Ergebnisse erzielen können. Hier brauchen Sie einige zuverlässige und getestete, um echte Hacks zu sein.

Als einfache Alternative dazu können Sie nur das IE-Markup mit Kommentaren einbinden. Mit diesem einfachen Trick können Sie das zusätzliche HTML oder JavaScript nur für IE verwenden.

8 Machen Sie IE6 mit dem PNG-Format kompatibel

PNG sind erstaunlich. Sie können mehr als 250 Transparenzgrade in einem Bild haben. Um Retina-optimierte Grafiken zu erstellen, können Sie Ihre Designfähigkeiten unter Beweis stellen, indem Sie glatte Ränder und benutzerdefinierte Hintergründe hinzufügen.

Der Internet Explorer ist jedoch nicht in der Lage, transparente PNGs effektiv anzuzeigen und Foulboxen anzuzeigen, wo es transparent sein sollte. Mit ein wenig Optimierung können Sie dafür sorgen, dass PNGs in IE6 nahtlos funktionieren. Dazu müssen Sie keine größeren Änderungen im CSS vornehmen.

Sie können dafür IE PNG Fix verwenden.

9 Fallbacks hinzufügen

Die meisten Webbrowser sind mit Flash und JavaScript kompatibel. Es ist möglich, Fallbacks in Anspruch zu nehmen, falls der Webbrowser eines Besuchers solche Funktionen nicht unterstützt.

Im Fall von Safari auf dem iPhone beispielsweise sind die Flash-Navigationsmenüs nutzlos, da der Browser kein Flash unterstützt.

Hier ist ein kurzer Spickzettel, um Zeit beim Experimentieren mit verschiedenen Mediendateien zu sparen:

Bilder: Fügen Sie jedem img-Tag ein alt-Attribut hinzu, das das Bild beschreibt.
Flash-Filme: Verwenden Sie Flash nicht für primäre Funktionen wie die Navigation.

10 Entscheiden Sie sich für Handcodierung

Dies kann ein Diskussionspunkt unter den Webdesignern sein. Viele Webmaster verwenden heutzutage automatisierte Tools, um Zeit zu sparen. Sie sind besonders praktisch, wenn Sie sich mit HTML nicht auskennen. Es ist jedoch wichtig zu beachten, dass solche Tools nicht mit der Flexibilität und Eleganz eines Designers mithalten können, der die Cross-Browser-HTML-Markups geschickt von Hand codiert.

Das manuelle Kodieren der HTML-, XHTML- und CSS-Markups ist ein langer Weg. Sie haben die volle Kontrolle darüber, was Sie entwickeln, und optimieren das Programm immer gemäß den Anforderungen Ihrer Vorlieben.

Wenn Sie das manuelle Codieren hektisch finden, können Sie einen textbasierten Webseiten-Editor verwenden. Es gibt viele solcher Tools im Internet. Sie können Folgendes ausprobieren:

CKEditor
Kaffeetasse
Atom Erhabener Text
Koda

Einpacken

Hier ist eine kurze Checkliste, die Sie berücksichtigen können, nachdem Sie eine Cross-Browser-Website codiert haben:

Jeder Webbrowser hat eine individuelle Vorgehensweise. Bei der HTML-Codierung in CSS-Dokumenten sollten Sie die Webseiten so kennzeichnen, dass sie auf jedem Browser sauber dargestellt werden.
Um Ihre Website frei von Bugs und Fehlern zu halten, entfernen Sie die ungültigen XHTML-, HTML- oder CSS-Codes, die von den oben genannten Tools hervorgehoben werden können.
Behalten Sie die Browser im Auge, die den maximalen Traffic auf Ihre Website bringen.
Führen Sie eine grundlegende Überprüfung Ihrer Website durch, um die Effektivität in Browsern zu messen.
Erkunden Sie das CSS-Box-Modell, um mehr über die Cross-Browser-Formate zu erfahren.
Setzen Sie die Schattierungspläne und Farbtöne der Textstile gekonnt ein.
Denken Sie daran, Inhaltsverbesserung, Anordnung und Platz zu schaffen.

Etwas mehr Zeit aufzuwenden, damit die Webseiten auf möglichst vielen Browsern einwandfrei funktionieren, zahlt sich immer aus. Sie stellen nicht nur sicher, dass die Website für das maximale Publikum zugänglich ist, sondern sorgen auch dafür, dass die Besucher zufrieden sind, was wichtig ist.