Weitere Features
- Schon eingespielt: CSS3 und HTML 5
- reset.css
- Weitere Features
- Modernizr per CSS nutzen
Der Browser Opera, der dieses Feature bereits unterstützt, überprüft beim Absenden des Formulars, ob im Feld eine E-Mail- Adresse eingetragen wurde, und gibt andernfalls eine Fehlermeldung aus. Das leere Input-Feld wird im Beispieldokument mit einem Slash geschlossen - was sonst eigentlich der...
Der Browser Opera, der dieses Feature bereits unterstützt, überprüft beim Absenden des Formulars, ob im Feld eine E-Mail- Adresse eingetragen wurde, und gibt andernfalls eine Fehlermeldung aus. Das leere Input-Feld wird im Beispieldokument mit einem Slash geschlossen - was sonst eigentlich der XHTML-Syntax entspricht. Aber HTML 5 ist auch in diesem Punkt weniger streng und erlaubt diese Schreibweise ebenfalls in der HTML-Variante. Die neue Version 1.1.x des Frameworks zeigt zusätzlich eine Zeichnung mit dem neuen canvas-Element, die dank excanvas.js-Skript auch im Internet Explorer funktioniert.Außerdem findet sich ein Beispiel für die vereinfachte Einbindung von Videos über das HTML-5-video-Element, die auf der "Video for Everybody"-Lösung basiert, die dank Quicktime und Flash-Fallbacklösungen browserübergreifend funktioniert. Dieses Beispiel dürfte zukunftsweisend sein, denn angesichts von iPhone und iPad, die kein Flash-Plug-in besitzen, wird immer klarer, dass browserübergreifend funktionierende Videos sich nicht auf Flash verlassen dürfen.Abschließend lässt sich sagen, dass das Framework ein gut geschnürtes Bündel der Dateien bereithält, die man für ein HTML-5-/CSS3-Projekt braucht, und zeigt, wie man ein HTML-5-/CSS3-Projekt sinnvoll angeht. Aber natürlich kann das Framework nicht zaubern - runde Ecken bei Formularfeldern sind nur in den Browsern zu sehen, die die Eigenschaft border-radius unterstützen, in den anderen nicht.Für wichtige Features wie per canvas erstellte Zeichnungen oder das video-Element existieren hingegen in Version 1.1.x schöne Fallbacklösungen. Es gibt noch ein paar kleinere Fehler in der Beispielseite, die der Validator zu Recht anmahnt und die man leicht korrigieren kann, was die Leistung des Frameworks nicht schmälert.
Modernizr - moderne Zeiten
Eine Javascript-Bibliothek, die ebenfalls in die Version 1.1.x des 52Frameworks Eingang gefunden hat, wurde noch nicht erwähnt: Modernizr.js. Diese ist jedoch überaus praktisch und man kann sie auch ohne das Framework nutzen, sodass sich eine separate und ausführliche Betrachtung lohnt.Prinzipiell gibt es zwei Wege zu überprüfen, ob ein Browser ein Feature unterstützt: Der Weg, der besonders in den 90er-Jahren beliebt war, aber auch heute immer noch nicht ganz aus dem Web verschwunden ist, ist das "Browser Sniffing". Man ermittelt beispielsweise über die navigator.userAgent-Eigenschaft, wie der Browser heißt, und kann weitere Details wie Version etc. feststellen.Darauf basierend erhält der Browser dann den für ihn passenden Code. Diese Methode hat mehrere Nachteile und ist deswegen auch inzwischen verpönt:
- Auch bei identischen Versionen kann es Unterschiede geben bei dem, was die Browser bereits können.
- Der userAgent-String kann gefälscht werden.
- Diese Methode ist nicht zukunftskompatibel, weil sie davon ausgeht, dass man weiß, was zukünftige Browser können und in welche Kategorie man sie stecken muss.
Die andere und bessere Methode ist es zu überprüfen, ob ein Browser eine bestimmte Eigenschaft oder ein Feature unterstützt. Diese Technik, die Feature Detection, wird intensiv von Modernizr eingesetzt.Modernizr testet 20 unterschiedliche HTML 5- und CSS3-Features. Dann generiert er ein Javascript-Objekt, über das sich über Javascript die Unterstützung der einzelnen Features abfragen lässt. Außerdem ergänzt er im html-Element Klassen, die die Unterstützung der einzelnen Features wiedergeben. Somit lassen sich die Ergebnisse der Überprüfung durch Modernizr im CSS-Code und über Javascript nutzen.Um Modernizr zu verwenden, binden Sie das Skript zuerst im head-Bereich Ihres Dokuments ein - bei HTML 5 könnten Sie auch den MIME-Typ weglassen:
<script type="text/Javascript" src= "modernizr-1.1.min.js"></script>Einen ersten Eindruck dessen, was Modernizr gemacht hat, erhalten Sie bei einem Blick in den per Javascript erzeugten Quellcode. Mit der Webdeveloper Toolbar sehen Sie diesen über Quelltext/Generierten Quelltext anzeigen.Hier erkennen Sie, dass Modernizr eine große Anzahl von Klassen dem html- Element hinzugefügt hat. Bei Firefox sieht das beispielsweise folgendermaßen aus:
<html class=" canvas canvastext geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface" xmlns="https://www. w3.org/1999/xhtml">Das heißt, beim Aufruf des Dokuments hat Modernizr den Browser automatisch auf alle von ihm unterstützten Features überprüft, und je nachdem, ob das betreffende vom aktuellen Browser unterstützt wird eine entsprechende Klasse hinzufügt: Im Beispiel bedeutet es, dass Firefox canvas, canvastext, geolocation und dergleichen unterstützt, hingegen beispielsweise nicht cssanimations, denn hier lautet die Klasse no-cssanimations.
Wenn Sie sich wundern, was für einen seltsame style-Angabe Sie außerdem in dem so erzeugten Quellcode sehen: Hierüber überprüft Modernizr, ob die @font-face- Deklaration unterstützt wird, indem es über DataURL ein Testzeichen einfügt und die Länge misst. Aber selbstverständlich ist Modernizr nicht dafür gedacht, dass Sie das Skript unter verschiedenen Browsern laufen lassen, um die Unterstützung zu ermitteln, sondern damit Sie diese Klassen bei der Erstellung der Website benutzen können.
Modernizr per CSS nutzen
Nehmen wir an, Sie wollen ein Element mit der Klasse transparent einen halbtransparenten Hintergrund über rgba() zuweisen, dann können Sie das dank Modernizr folgendermaßen tun: Hinter rgba() geben Sie hierfür die drei dezimalen Farbwerte an und bestimmen am Schluss den Grad der Transparenz wie folgt.
.rgba .transparent { background-color: rgba(0, 255, 0, 0.5); }Diese Anweisung wird nur von Browsern gelesen, die rgba() unterstützen. Denn nur in diesen Browsern hat das html-Element die Klasse rgba und der Kontextselektor .rgba .transparent verweist auf das entsprechende Element. Für die nicht unterstützenden Browser können Sie dann eine Fallbacklösung schreiben:
.no-rgba .transparent { background-image: url(transparent. png); } .transparent { background-color: rgb(0, 255, 0); }Denn bei Browsern, die kein rgba() unterstützen, erhält das html-Element entsprechend die Klasse no-rgba. Und so sind Sie sicher, dass das transparente PNG wirklich nur von den entsprechenden Browsern geladen wird. Schließlich gibt es über .transparent eine allgemeine Fallbacklösung, wenn Javascript nicht aktiviert ist.
Häufig kann man CSS3-Eigenschaften direkt einsetzen: Die Browser, die sie verstehen, stellen sie dar, von den anderen Browser werden sie einfach ignoriert. Das ist das Standardverhalten bei Browsern gegenüber CSS-Eigenschaften, die sie nicht kennen.Definiert man etwa eine Spiegelung von Seitenelementen über CSS-Reflections, so wird diese von den meisten Browsern ignoriert. Was aber, wenn man zusätzlichen Abstand über margin benötigt, aber nur für den Fall, wenn ein Browser die CSS-Reflections unterstützt? Die Angabe von margin wird von allen Browsern verstanden und angewandt.
