Neue Technologien machen die Webentwicklung spannender als je zuvor. HTML5 und CSS3 bieten eine doppelte Dosis moderner Praktiken, die absolut erfrischend und kraftvoll sind. Leider kann die Verwendung dieser Technologien Ihre Suche nach Cross-Browser-Kompatibilität erheblich erschweren.
Woher wissen Sie, welche Techniken jetzt sicher angewendet werden können und welche Alternativen Sie entweder anbieten oder ganz vermeiden sollten? Kommen Sie zu uns und werfen Sie einen Blick auf eine Handvoll unserer bevorzugten Ressourcen, mit denen Sie schnell und einfach fundierte Entscheidungen über die Implementierung von HTML5 und CSS3 in der realen Welt treffen können.
Einfach unwiderstehlich
Cross-Browser-Kompatibilität war vor einigen Jahren schwierig genug, bevor wir uns mit neuen Technologien wie HTML5 und CSS3 beschäftigten. Jetzt, da diese Tools an die Spitze unserer Entwicklungsmethoden treten, kann dies ein regelrechtes Durcheinander sein.
Die Vorteile von HTML5 und CSS3 sind klar und unbestreitbar. Sie sind so voll mit Leckereien und Spaß, dass sich kaum einer von zehn Entwicklern widersetzen kann, zumindest einen Zeh in das Wasser zu tauchen. Um diesen Hype weiter voranzutreiben, erstellen Autoren wie ich ständig neue, großartige Tutorials, in denen Sie die Besonderheiten dieser Technologien kennenlernen, und damit Ihren Wunsch wecken, sie so schnell wie möglich in die Praxis umzusetzen.
Rauschen wir voran?
Während die meisten von uns die neusten und besten Trends in der Webentwicklung nutzen, bittet uns ein paar rationalere Seelen, langsamer zu werden. Neue Spielzeuge sind alle gut und gut, aber vieles davon befindet sich noch im Aufbau, und der Rest wurde in allen wichtigen Browsern nicht gut implementiert.
Also wer hat recht Wie können Sie als praktischer, realer Entwickler wissen, ob Sie sich in den Hype einkaufen und mit dem Neuen arbeiten oder den Skeptikern vertrauen und bei den bewährten Methoden der vergangenen Jahre bleiben?
Stoppen Sie die Vermutung
Das Einzige, was Sie tun können, um zu entscheiden, ob Sie persönlich mit der Implementierung neuer Web-Technologien beginnen können, ist, sich über die Unterstützung zu informieren, die Sie für jedes neue Element in den verschiedenen Browsern erwarten können, die für Ihr Publikum am wichtigsten sind.
Das hört sich nach viel Arbeit an, nicht wahr? Es gibt unzählige Blogposts, Bücher und Websites, die Ihnen dieses Zeug beibringen, genug, um ein ganzes Leben lang mehr zu verbrauchen. Die Menge an Material ist so überwältigend, dass Sie das Lernen einfach aus Einschüchterung vermeiden können.
Glücklicherweise gibt es einige sehr einfache und unkomplizierte Möglichkeiten, um sicherzustellen, dass das, was Sie tun, für verschiedene Browser gut funktioniert. Sie müssen nicht jedes Mal kilometerlange Blogbeiträge sortieren oder einen Stapel Bücher lesen, wenn Sie einen Schatten werfen möchten. Sie brauchen nur einen kurzen Überblick über einige ausgewählte Ressourcen, um Sie in Gang zu setzen.
Browserkompatibilitätsdiagramme: Der beste Freund eines Entwicklers
Als Erstes empfehle ich Ihnen, herauszufinden, welche neuen Technologien Sie heute implementieren können, indem Sie ein oder zwei robuste Browserkompatibilitätsdiagramme mit einem Lesezeichen versehen.
Diese Ressourcen sind von unschätzbarem Wert und können Ihnen endlose Forschungsstunden ersparen. Sie dienen als schnelle Referenz, mit der Sie sofort erkennen können, welche Browser dies tun, und die Techniken, die Sie implementieren möchten, nicht unterstützen. Einige der besseren Auswahlmöglichkeiten helfen sogar, die älteren Browser zum Spielen zu bringen.
Wann kann ich verwenden?
Caniuse.com ist sicherlich nicht die schönste Option für Browserkompatibilitätskarten, aber es ist eine der hilfreichsten und gründlichsten Optionen.
Die Organisation hier ist sehr einfach und einfach zu bedienen: Klicken Sie einfach auf ein Element aus einer der fünf Kategorien (CSS, HTML5, SVG, JS API und Andere) und Sie werden zu einem Diagramm mit der Unterstützung verschiedener Browser geführt. Auch die Suche bietet sofortige Ergebnisse Während Sie tippen, sind Antworten auf alle Fragen Ihres Browsers immer nur ein paar Tastatureingaben entfernt.
Nehmen wir zum Beispiel an, Sie lesen meinen letzten Artikel über: Vorher und Nachher und möchten meine Angaben zur Browserkompatibilität für das Pseudoelement Pseudoelement (immer doppelt überprüfen) überprüfen. Alles, was Sie tun müssen, ist Typ. nach dem? In die Suchleiste und die unten stehende Tabelle wird eingeblendet.
Hier gibt es eine Menge toller Informationen, die Sie nutzen können. Die Tabelle zeigt uns, dass wir generell großartige Unterstützung für aktuelle Browser (auch für IE) haben, aber zwei Versionen vor IE7 und früher hatten Probleme.
Neben der Kompatibilitätsübersicht finden Sie zwei weitere wertvolle Elemente: eine Browser-Vergleichsfunktion und eine Liste mit hilfreichen Ressourcen.
Letzteres enthält oft sehr gute Links. Wenn Sie beispielsweise nach neuen CSS3-Funktionen wie Farbverläufen suchen, erhalten Sie möglicherweise einen Link für einen Generator, der die Arbeit für Sie erledigt. Im obigen Fall haben wir einen Link für eine ausführliche Anleitung erhalten, in der die Verwendung von CSS-generierten Inhalten unter Verwendung von Pseudoelementen erläutert wird.
In der Browserkompatibilitätsübersicht können Sie zwei Browser auswählen und eine Übersicht über die Unterstützung für die Elemente in einer der fünf zuvor genannten Kategorien anzeigen.
FindMeByIP
Wenn Sie alle Funktionen der vorherigen Website zugunsten einiger einfacher, umfangreicher Browserkompatibilitätsdiagramme, die Sie mit einem Lesezeichen versehen und referenzieren können, aufgeben möchten, besuchen Sie die HTML5- und CSS3-Support-Seite unter FindMeByIP.
Wie Sie sehen, sind die Charts hier sehr ansprechend und sehr gut lesbar. Diese sind perfekt für den Fall, dass Sie schnell etwas überprüfen müssen, um einen Überblick über die Browserunterstützung zu erhalten.
Sollten Sie es verwenden?
Browserkompatibilitätsdiagramme sind großartig, um Sie wissen zu lassen, ob ein bestimmter Browser das unterstützt, was Sie implementieren möchten, aber sie geben Ihnen nur die Möglichkeit, Entscheidungen zu treffen. Sie müssen die Informationen dennoch interpretieren und entscheiden, ob Sie fortfahren können.
Wenn Sie ein neuer Entwickler sind, kann dies einschüchternd wirken. Um Ihnen weiterzuhelfen, lesen Sie bitte HTML5 Please. Dieses Community-bezogene Projekt zeigt Ihnen, ob Sie eine bestimmte Technik anwenden oder nicht, und gibt Empfehlungen für das weitere Vorgehen. Du solltest niemals etwas blindlings folgen, aber wenn du auf dem Zaun bist, kann dir das sicher helfen, den Anruf zu tätigen.
Wie bei Wann kann ich verwenden?Die Suchleiste bietet sofortige Ergebnisse während der Eingabe. Angenommen, Sie möchten wissen, ob CSS-Übergänge sicher implementiert werden können, geben Sie einfach "Übergänge" ein. und die Ergebnisse werden nach folgenden Kriterien gefiltert:
Sofort erhalten wir eine Anwendungsempfehlung, die in der oberen rechten Ecke des Ergebnisses angezeigt wird:
Verwenden Sie mit Fallback? ist der Rat, den wir für CSS-Übergänge geben. Dies ist mit kurzen und unkomplizierten Informationen verbunden, aus denen hervorgeht, dass Übergänge sicher sind, wenn sie für eine nutzbare Erfahrung nicht erforderlich sind, und dass alle für die Interaktion wichtigen Übergänge mit einer Alternative für andere Browser unterstützt werden sollten. Die erforderlichen Browser-Präfixe für die Implementierung werden ebenfalls bereitgestellt. Für viele Elemente werden empfohlene Polyfills bereitgestellt, um Ihre Implementierung so crossbrowser-kompatibel wie möglich zu machen.
Modernizr hat deinen Rücken
Die letzte Ressource, die Sie bei Ihrer Suche nach Cross-Browser-kompatiblem CSS3 und HTML5 kennenlernen müssen, ist Modernizr. Sie haben zweifellos schon davon gehört, aber es ist Zeit, es herunterzuladen und auszuprobieren.
Der Grund, warum Modernizr so großartig ist, besteht darin, dass es automatisch erkennen kann, ob ein Browser eine bestimmte Funktion unterstützt oder nicht, und anschließend JavaScript-Zauber liefert. Dadurch können Sie eine beeindruckend große Anzahl von Umständen berücksichtigen und JavaScript-Fallbacks und Polyfills für ältere Browser mit sehr geringem Aufwand bereitstellen.
Modernizr testet Support für über 40 Next-Gen-Funktionen, stellt unterwegs Informationen zur Verfügung, was unterstützt wird und welche nicht unterstützt werden, und bietet die besten Lösungen, um auf etwaige Supportlücken zu reagieren.
Fazit
Die oben genannten Ressourcen sollen Ihnen helfen, fundierte Entscheidungen darüber zu treffen, ob eine bestimmte HTML5- oder CSS3-Technik implementiert werden soll oder nicht.
Browserkompatibilitätsdiagramme geben einen schnellen Überblick darüber, wie Sie erwarten können, dass jeder Browser auf eine bestimmte Technik reagiert. HTML5 Bitte geben Sie solide und ehrliche Empfehlungen, ob Sie fortfahren möchten oder nicht. Modernizr hilft Ihnen dabei, die Funktionslücken in a zu ermitteln und zu schließen spezielles Design.
Diese Ressourcen bringen Sie nicht aus dem Haken, um tiefer in das Verständnis darüber einzutauchen, wie Sie diese Funktionen richtig implementieren können, aber sie sind eine großartige Starthilfe, wie und wann Sie fortfahren sollen.
Hinterlassen Sie einen Kommentar und teilen Sie uns Ihre bevorzugten Ressourcen in diesem Bereich mit. Verwenden Sie eine der oben aufgeführten Websites? Welche anderen Tools sind für Ihren Workflow von unschätzbarem Wert?