Zum Inhalt springen

Modernizr: HTML5 und CSS3 geschickt nutzen

Als PHP-Entwickler schreibt man nicht nur am Backend, sondern muss auch eine optisch-ansprechende Oberfläche bieten. Inzwischen sind viele Effekte die unter HTML 5 und CSS 3 zusammengefasst werden können in den verschiedenen Browsern implementiert. Die Browser-Hersteller haben zum Teil eigene Feature implementiert, zum Teil Working Drafts umgesetzt und somit haben wir den Zustand, dass eine einheitliche CSS oder JavaScript nicht überall gleich aussieht bzw läuft.

Wenn man nun die Features dennoch nutzen möchte, so kann man oftmals auf Fallback-Lösungen zurückgreifen. Farbverläufe lassen sich bspw. durch einfache Farben ausdrücken oder möglicherweise durch Bilder ersetzen.

Um den verschiedenen Methoden einer Implementierung Rechnung zu tragen, müsste man die in den Urzeiten des Internets beliebten Banner „optimiert für Browser XY“ einbauen, oder eine automatische Browserweiche nutzen. Eine ausgefeilte Art ist heutzutage eine Feature-Weiche. Das bedeutet, dass nicht nur nach Browser und Version unterschieden wird, sondern je nach implementierten Feature. Das heißt, ist ein Feature durch eine neue Version eines Browsers verfügbar, sieht die Seite – falls entsprechend umgesetzt – direkt besser aus.

Eine sehr gute Bibliothek, die eine Überprüfung der angebotenen Feature auf CSS- und JavaScript-Ebene bietet ist der Modernizr. Die Bibliothek umfasst nur 3.7kb und lässt sich leicht in eine bestehende Seite integrieren. Danach findet man im HTML-Tag eine ganze Reihe CSS-Klassen. Diese repräsentieren die einzelnen Features und zeigen ebenfalls ob das entsprechende Feature genutzt werden kann.

Der oben genannte Farbverlauf zum Beispiel wird durch die cssgradients Klasse ausgedrückt. Wenn der Browser dieses Feature nicht unterstützt, dann findet sich die Klasse no-cssgradients im HTML-Tag. In der CSS Datei kann man dies dann verwerten.

Möchte man Features nutzen, die im JavaScript Bereich Anwendung finden, wie bspw. Webworker, Websockets u.ä., so kann man auch auf eine Property des Modernizr Objekts zugreifen. Im Farbverlauf-Beispiel wäre dies Modernizr.cssgradients.

Zu beachten ist, dass Modernizr keine neuen Funktionen in einen Browser einbaut, sondern nur eine Schnittstelle liefert.

Den Modernizr baut man wie bei JavaScript üblich im Header der Seite ein:

<html>
<head>
...
<script src="mordernizr-1.7.min.js" type="text/javascript"></script>
...
</head>
...
</html>

Die vielfach angesprochenen Farbverläufe sehen dann im css bspw. so aus:

.no-cssgradients #nav {
    background-color:#E7F9FF;
}
.cssgradients #nav {
    background-image: -moz-linear-gradient(center bottom, #E7F9FF 25%, #FFFFFF 100%);
    background-image: -o-linear-gradient(bottom, #E7F9FF, #FFFFFF);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.25, #E7F9FF), color-stop(1.0, #FFFFFF));
}

Tip für die Blogger:
Es gibt auch ein WordPress-Plugin, das den Modernizr sehr einfach einbindet.

Published inAllgemein

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close