Modernizr 2

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.

Startklar für HTML5 und CSS3

© Internet Magazin

Startklar für HTML5 und CSS3

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.

internet, webdesign, modernizr, css3, html5, javascript,browser

© Internet Magazin

Vor dem Download wählen Sie die Features aus, auf die Modernizr testen soll.

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.
internet, webdesign, modernizr, css3, html5, javascript,browser

© Internet Magazin

Modernizr fügt je nach Browserunterstützung unterschiedliche Klassen beim html- Element hinzu, die Sie sich beispielsweise über den Firebug ansehen können.

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;
}
}

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".