Startklar für HTML5 und CSS3
Wer heute CSS3 oder HTML5 verwenden möchte, kommt an dem nützlichen Tool Modernizr nicht vorbei. Die neue Version kombiniert Feature Detection mit der Möglichkeit, Javascript-Dateien nach Bedarf zu laden. Damit lassen sich HTML5- und CSS3-Features einfacher browserübergreifend einsetzen.
Die Fülle an neuen CSS3- und HTML5- Features ist geradezu überwältigend. Gleichzeitig ist die Browserunterstützung durchwachsen: Jede neue Browserversion bessert nach, aber die alten Browser sind weiterhin in Benutzung. Deswegen wäre es eine Sisyphusarbeit, wollte man die verschiedenen Versione...
Die Fülle an neuen CSS3- und HTML5- Features ist geradezu überwältigend. Gleichzeitig ist die Browserunterstützung durchwachsen: Jede neue Browserversion bessert nach, aber die alten Browser sind weiterhin in Benutzung. Deswegen wäre es eine Sisyphusarbeit, wollte man die verschiedenen Versionen je nach Browser und Browserversion bereitstellen - und außerdem wäre das nicht zukunftskompatibel, denn man müsste mit jedem neu erscheinenden Browser das eigene Vorgehen überprüfen.Der bessere Weg ist deswegen Feature Detection: Fragen Sie den Browser nicht, wie er heißt, sondern was er kann. Und genau auf Feature Detection ist Modernizr spezialisiert. Das Ergebnis, welche Eigenschaften und Features im aktuell aufrufenden Browser unterstützt werden, können Sie dann in Ihren CSS- oder Javascript-Dateien berücksichtigen.Die neue Version von Modernizr bringt neben anderen Verbesserungen zwei große Neuerungen: Das Download-Paket lässt sich jetzt genau konfigurieren. Ein weiteres großes Plus: Sie können Modernizr nutzen, um Javascript-Dateien nach Bedarf zu laden - eben wenn ein Browser ein bestimmtes Feature nicht unterstützt.
Download mit Optionen
Um mit Modernizr zu arbeiten, müssen Sie es erst einmal herunterladen. Beim Download-Paket können Sie auswählen, welche Features Modernizr testen soll. Indem Sie Ihre Auswahl auf die wirklich benötigten Features beschränken, halten Sie die Datei klein. Für erste Experimente ist es aber sinnvoll, die Developer-Version zu benutzen oder sich ein Gesamtpaket mit allen inkludierten Features zu schnüren.
Die Auswahlkästchen sind in vier Rubriken unterteilt: Den Anfang machen CSS3-Eigenschaften wie box-shadow oder border-radius, gefolgt von HTML5- Features wie Canvas oder Drag-und- Drop. Unter Misc (Sonstiges) finden sich weitere attraktive neue Techniken wie die Geolocation API oder SVG. Unter Extra können Sie das genaue Verhalten von Modernizr steuern. Die Auswahl der Optionen ist intelligent, das heißt, dass mögliche Abhängigkeiten zwischen bestimmten Features berücksichtigt werden.Ein Klick auf Generate erstellt den modifizierten Modernizr-Code, der dann in einem Textfeld zum Kopieren erscheint oder sich über den entsprechenden Button herunterladen lässt. Um Modernizr zu benutzen, binden Sie es im head- Bereich des Dokuments ein, am besten nach den Stylesheets:
<link rel="stylesheet" href=
"einstylesheet.
css" /><script src=
"modernizr.js"></script>Zwar ist es im Allgemeinen aus Performance-Gründen sinnvoller, Javascript-Dateien am Ende des Dokuments einzubinden, aber für Modernizr empfiehlt sich trotzdem die Einbindung am Anfang, um einen so genannten Fouc (Flash of Unstyled Content) zu verhindern, also das kurzzeitige Erscheinen einer ungestylten Website. Das Einbinden von Modernizr im Kopfbereich ist ebenfalls wichtig, wenn Sie HTML5 Shim ausgewählt haben, das ein Stylen der neuen HTML5- Elemente auch im IE < 9 ermöglicht.
CSS-Schnittstelle von Modernizr
Standardmäßig ist bei Extra der Punkt Add CSS Classes ausgewählt. Damit ergänzt Modernizr automatisch Klassen beim html-Start-Tag. An diesen Klassen lässt sich erkennen, ob ein Feature unterstützt wird oder nicht. Werden beispielsweise CSS-Transitions unterstützt, so erhält das html-Start-Tag die Klasse csstransitions. Werden CSS-Transitions nicht unterstützt, lautet die entsprechende Klasse no-csstransitions. Das ist praktisch, um gezielt in Abhängigkeit davon, was unterstützt wird und was nicht, bestimmte Formatierungen vorzunehmen. Zugriff darauf haben Sie über die sogenannten Kontextselektoren.
.csstransitions a {}gibt Formatierungen vor, wenn Transitions unterstützt werden. Wenn Transitions nicht unterstützt werden, greift der folgende Selektor:
.no-csstransitions a {}Bei den so angegebenen Formatierungen sollten Sie aber berücksichtigen, dass Javascript auch deaktiviert sein kann. Damit Formatierungen auch in solchen Fällen greifen, benutzen Sie am besten den Selektor ohne Klassenangabe für die Fallbacklösung.
a { /* allgemeine Formatierungen,
treffen immer zu */ }
.csstransitions a { /*
Formatierungen, wenn Javascript
aktiviert und Feature unterstützt
*/ }Tipp: Bei Bedarf schreiben Sie beim html-Start-Tag die Klasse no-js. Diese wird dann, sofern Javascript unterstützt wird und Modernizr tätig werden kann, durch js ersetzt.Beispiele für den sinnvollen Einsatz von Modernizr sind etwa die Folgenden:
- Wenn box-shadow (Klasse boxshadow) nicht unterstützt wird, können Sie einen Rahmen mit border ergänzen.
- Für Browser, die mehrfache Hintergrundbilder (Klasse multiplebgs) nicht implementiert haben, können Sie ein anderes Hintergrundbild bereitstellen.
- Werden die neuen Farbangaben mit integrierter Alphatransparenz (Klasse rgba) nicht implementiert, können Sie auf ein PNG-Bild zurückgreifen.
- Anstelle des Farbverlaufs per CSS (css-gradients) können Sie ein passendes Hintergrundbild anzeigen lassen.
Nicht immer müssen Sie für Sonderangaben je nach Situation auf Modernizr zurückgreifen. Wollen Sie als Fallbacklösung für eine Farbangabe über rgba() oder hsla() eine Farbe ohne Transparenz spezifizieren, so genügt Folgendes:
p {
background: rgb(0, 0, 250); /* immer
gelesen */
background: rgba(0, 0, 250, 0.5);
}Wenn ein Browser rgba() nicht interpretiert, wird er die zweite Angabe ignorieren und nur die erste nehmen. Wichtig ist dann allerdings die Reihenfolge: Die Codezeile mit rgba() muss nach der allgemeinen Angabe stehen.
Javascript-Schnittstelle
Viele der HTML5-Neuerungen gehen Hand in Hand mit Javascript und auch bei mangelnder Unterstützung für manche CSS3-Features kann man gut per Javascript nachbessern. Deswegen stellt Modernizr die Ergebnisse der Feature-Tests auch als Javascript-API bereit. Ein Objekt mit Namen Modernizr wird erzeugt, das die überprüften Features als Eigenschaften enthält. Ein Beispiel: Wenn box-shadow unterstützt wird, erhält Modernizr.boxshadow den Wert true, ansonsten false.Für Nachbesserungen gibt es sogenannte Polyfills. Der Begriff Polyfill taucht bei Modernizr immer wieder auf und wird folgendermaßen erläutert: "Javascript shim that replicates the standard API for older browsers", es ist also ein Javascript- Schnipsel (shim heißt so viel wie Klemmstück, Scheibe, Keil), das eine Standard- API für ältere Browser nachbildet.
Media Queries browserübergreifend
Eines dieser Polyfills ist bereits bei Modernizr dabei, nämlich die Javascript- Datei respond.js, die dafür sorgt, dass Media Queries in älteren Browsern funktionieren. Hierfür müssen Sie allerdings unter Extra ein Häkchen bei MQ Polyfill machen.Wenn Sie Modernizr mit aktivierter Option MQ Polyfill nutzen, können Sie ganz normal mit Media Queries arbeiten, beispielsweise bei einer verlinkten Datei spezifizieren, für welche Viewportweiten sie gedacht ist:
<link rel="stylesheet" href="mq.css"
media="all and (min-width: 600px)" />Oder auch innerhalb eines Stylesheets mit @media-Regeln arbeiten:
@media screen and (min-width: 600px)
{
body {
background-color: red;
}
}
