Facebook
Twitter
Google+
Kommentare
0
Willkommen bei "the web hates me". Mittlerweile hat unser Team ein tolles neues Monitoringtool für Agenturen gelauncht. Unter dem Namen koality.io haben wir einen Service geschaffen, der er Agenturen ermöglicht mit sehr geringen Kosten alle Ihre Webseiten zu überwachen.

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.

flattr this!

Über den Autor

php monkeys

Link erfolgreich vorgeschlagen.

Vielen Dank, dass du einen Link vorgeschlagen hast. Wir werden ihn sobald wie möglich prüfen. Schließen