Responsive Webdesign – Grundlagen

Modernizr

Testen Sie unsere 1983 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Setzt man fortgeschrittene Layout-Features und Komponenten ein, steht man häufig vor dem Problem, dass ältere Browser nicht mitspielen. Eine schöne Lösung dafür kommt über das Skript Modernizr.

Transkript

Manchmal braucht man Sonderangaben, wenn ein Browser ein bestimmtes Feature unterstützt oder eben nicht unterstützt. Und genau für solche Fälle gibt es ein Tool, ein ganz entscheidendes Tool, und das ist "Modernizr". Was hat man früher gemacht? Früher ist folgendermaßen vorgegangen. Man hat sich angeschaut, wie der Browser behauptet zu heißen, und je nach dem, was dabei herauskommt, unterschiedliche Aktionen durchgeführt. Das ist aber sehr problematisch. Erst einmal funktioniert das natürlich nur bei Browsern, die bereits erschienen sind. Weil Sie können ja nicht in die Zukunft sehen, und Sie wissen ja nicht, wie sich ein neuer Browser verhalten wird. Und außerdem ist das Erkennen von Browsern sowieso gar nicht so einfach. Wenn wir ehrlich sind, interessiert uns ja auch nicht, wie ein Browser heißt, sondern wir wollen eigentlich nur wissen, was er kann und was er nicht kann, um entsprechend reagieren zu können. Und damit sind wir bei "Modernizr" und "Feature detection". Also wir wollen rausfinden, was ein Browser kann. Wie funktioniert "Modernizr"? Hier lade ich mir erstmal eine Version herunter, gehe hier auf "Development built". Das sind jetzt alles Sachen, die überprüft werden. Und dann gehe ich auf "BUILT", und kann das direkt hier auch in die Zwischenablage abspeichern oder herunterladen. Das habe ich jetzt schon einmal gemacht. Und dann, Sie sehen diese Datei hier, die habe ich jetzt schon abgespeichert unter dem Namen "modernizr-custom.js". Und damit "Modernizr" etwas tun kann, muss ich ihn natürlich einbinden. "Modernizr" ist eine JavaScript-Datei, deswegen binde ich ihn so ein, wie ich JavaScript-Dateien einbinde. Im Beispiel befindet sich das Dokument im selben Verzeichnis. So, sehen wir uns einmal an, was dann geschieht, wenn ich "Modernizr" so eingebunden habe. Ich bin auf dieser Webseite und Sie sehen jetzt, ich habe die Entwicklertools aufgerufen. Es gibt jetzt ganz viele Klassen beim HTML-Starttag. Diese Klassen standen nicht da, in meinem ursprünglichen Dokument. Diese wurden von "Modernizr" hinzugefügt. Sehen wir uns das ein bisschen genauer an. "HTML bearbeiten". Sie sehen, hier stehen ganz viele Klassen. Und Sie sehen, die Klassen haben manchmal ein "no" davor. Das bedeutet, dass das Feature nicht unterstützt wird, und wenn kein "no" davor ist, bedeutet es, dass das Feature unterstützt wird. Was können wir jetzt damit machen? Wir können das verwenden um unterschiedliche Angaben zu machen, je nach dem, ob ein Feature implementiert ist im Browser, der gerade verwendet wird oder nicht. Es gibt zum Beispiel die CSS3-Eigenschaft "Shapes". Mit der können Sie Elemente umfließen lassen, die nicht eckig sind. Und im Beispiel unterstützt der Firefox das noch nicht, aber der Chrome unterstützt es. Je nach dem, wie es mit der Unterstützung ausschaut, wird beim HTML-Starttag entweder die Klasse ".shapes" oder die Klasse ".no-shapes" hinzugefügt. Und dann kann ich hingehen und sagen, wenn die Klasse ".shapes" im HTML-Starttag ergänzt wurde, dann möchte ich mein Element, mit der Klasse ".eins", gelb einfärben. Wenn hingegen die Klasse ".no-shapes" heißt, dass heißt, das Feature wird nicht unterstützt, dann lasse ich mein Element orange einfärben. Sehen wir uns das jetzt einmal an. Wenn ich das im Firefox anschaue, da wird das Feature nicht unterstützt, deswegen ist mein Element orange. Im Chrome hingegen ist es Gelb. Das war natürlich jetzt ein Beispiel, was nur bedingt sinnvoll ist. Das sollte das Grundprinzip zeigen. Jetzt wollen wir uns ein echtes Beispiel anschauen. Gehe dazu nochmal auf "Modernizr". Wie benutzt man "Modernizr"? Ich hatte eben "Modernizr" vollständig herunter geladen, dass heißt mit allen Tests. Im echten Einsatz sollten Sie hingegen nur die Tests integrieren, die für Sie auch wichtig sind. Dafür klicken Sie auf "Add your detects", und dann können Sie sagen auf was Sie testen möchten. Ich möchte einmal testen auf "textshadow". Hier ist diese Eigenschaft, diese wähle ich jetzt aus. Das ist das Zeichen, dass die ausgewählt ist. Jetzt aktiviere ich das noch und gehe dann auf "BUILT". Kann das dann wieder direkt in die Zwischenablage kopieren oder herunterladen. Und das habe ich auch schon gemacht. Sehen wir uns das einmal an. Das ist diese Datei hier, und diese habe ich jetzt hier eingebunden. Also, damit habe ich die JavaScript-Datei eingebunden, die jetzt testen ob "text-shadow" unterstützt wird oder nicht "Text-shadow" ist eine schöne Eigenschaft um Schatten hinzuzufügen. In vielen Fällen können Sie sie direkt einsetzen, und müssen sich nicht darum kümmern, was passiert, wenn ein Browser das nicht unterstützt. In diesem Beispiel gehe ich aber einmal davon aus, dass ich gerne, wenn diese Eigenschaft nicht unterstützt wird, die Schrift fett machen möchte, damit die auch hervorgehoben ist. Aber diese fette Schrift soll natürlich nur fett sein, wenn es nicht "Text-shadow" gibt. Genau das ist ein schöner Fall für "Modernizr", weil diese "font-weight: bold;" kann ich ja nicht global machen, sonst habe ich das immer. Jetzt kann ich sagen, also, ich ergänze meinen Schatten, und wenn "text-shadow" nicht unterstützt wird, dann mache ich die Schrift fett. Sehen wir uns das einmal im Firefox an. Dort wird "text-shadow" unterstützt. Und ich habe hier meinen Textschatten, und die Schrift ist nicht fett. Jetzt wollen wir das Ganze im Internet Explorer betrachten. Ich lade das einmal neu, und muss die geblockten Inhalte zulassen weil ich das hier lokal mache. Und ich möchte jetzt eine andere Version von Internet Explorer simulieren. Und wähle hier einmal nicht den Internet Explorer 11, sondern den Internet Explorer 9. Und der kann nämlich "text-shadow" nicht. Und in diesem Browser möchte ich dann, dass der entsprechende Text fett ist, und das funktioniert auch. Sie sehen hier, der Absatz ist fett. Und Sie sehen auch ganz deutlich, dem HTML-Element wurde die Klasse "no-textshadow" zugewiesen. Wir hatten uns jetzt angesehen, wie man die CSS-Schnittstelle von "Modernizr" nutzt. Sie haben in "Modernizr" auch eine JavaScript-Schnittstelle. Sie können die beispielsweise dann folgendermaßen nutzten. Hier überprüfe ich, ob "Modernizr.textshadow" also, wenn diese Eigenschaft "textshadow" existiert, dann wird "text-shadow unterstützt", und sonst wird das "nicht unterstützt". Im Beispiel lasse ich eine Meldung mit "alert" ausgeben. Im echten Einsatz könnten Sie natürlich eine beliebige, andere Aktion durchführen. Sehen wir uns das einmal im Firefox an. Und Sie sehen "text-shadow" wird unterstützt. Sie haben in diesem Film "Modernizr" kennengelernt. Das ist das entscheidende Tool, wenn Sie besondere Angaben machen wollen für Browser, die ein bestimmtes Feature nicht unterstützen. Sie können sich Ihre Version von "Modernizr" zusammenstellen, müssen es einbinden, und dann ergänzt Ihnen "Modernizr" automatisch Klassen. Und über diese Klassen, können Sie unterschiedliche Formatierungen durchführen, je nach dem, ob ein Browser ein Feature unterstützt oder nicht.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!