HTML5 und CSS3 auch für ältere Browser mit Modernizr!


Man stelle sich die folgende Situation vor: ein neues Projekt hat gerade begonnen und die Umsetzung der HTML-Templates aus den Grafikvorlagen steht bevor. Schöne Buttons mit Glanzeffekt, ein gestreifter Hintergrund und abgerundete Ecken. Und sofort fällt dem versierten Webentwickler für jede Anforderung eine Lösung ein, die unmittelbar mit HTML5 und/oder CSS3 zusammenhängt.

Doch danach kommt der Frust: ein Blick in die Piwik-Statistiken vergleichbarer Projekte macht unmissverständlich klar, dass es immernoch eine nicht ignorierbare Menge an Benutzern gibt, die keine aktuelle Software (im Speziellen: Internetbrowser) verwenden.

Die Argumente für die Verwendung aktueller Browser (u.A. Sicherheit beim Benutzer, aber auch deutlich weniger Beißabdrücke auf den Tischplatten der Webentwickler in den Agenturen) brauchen wir hier nicht weiter ausführen. Dem wurde schon anderenorts mehrfach Genüge getan.

Oftmals wurde auf die tollen CSS3-Features verzichtet, da letzten Endes so oder so mit Hintergrundgrafiken gearbeitet werden musste, um z.B. die Shiny Buttons auch in alten Browsern darzustellen. Doch mit Modernizr gibt es eine Lösung, die ein sorgenfreies Arbeiten mit HTML5 und CSS3 ermöglicht und eine gute Möglichkeit mitbringt, Fallback-Lösungen für ältere Browser zu implementieren.

Modernizr ist eine kleine JavaScript-Bibliothek, die in den Quellcode der Website eingebunden wird. Beim Aufruf der Website untersucht das Script den gerade verwendeten Browser auf Unterstützung der verwendeten HTML5- und CSS3-Funktionen.

Abhängig vom Ergebnis erhält der <html>-Tag zusätzliche Klassen, über die dann die gewünschten Zuweisungen sowie Fallbacks für nicht unterstützte Features implementiert werden können.

Die Bibliothek kann auf der Projektseite heruntergeladen werden, und für den Einstieg findet man dort eine detaillierte Dokumentation. 

Bis die alten Browser aus dem Netz verschwinden, bietet Modernizr jedenfalls eine gute Möglichkeit, modernes Webdesign umzusetzen, ohne viele Verluste bei den Besucherzahlen in Kauf nehmen zu müssen. 

HTML5 und CSS3 bei werkraum - Ihre moderne TYPO3-Agentur in Karlsruhe!

Kategorien

  TYPO3

Hat dir der Artikel gefallen?

Werkraum News: