Responsive Grafiken mit HTML

Progressive Enhancement: Nachhilfe ist optional

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Browser, die die neuen Elemente und Attribute nicht verstehen, bekommen in jedem Fall die per <img> servierte Fallback-Grafik. Nachhilfe ist also optional.

Transkript

Browser, die die neuen Möglichkeiten mit "srcset w", "sizes" und dem "picture-Element" nicht verstehen, die können per JavaScript ein bisschen Nachhilfe bekommen, aber wie Sie sehen werden, ist das optional. Zunächst einmal ein Blick hier bei caniuse.com. Wie sieht es aus mit "srcset w"? Und zwar in leuchtend grün ist die Unterstützung der erweiterten Syntax mit "srcset w", Werte und "sizes" und Sie sehen hier: Das ist 22.46% im Augenblick und für "picture" sieht das ganz genauso aus. 22.46% hier für das "picture"-Element. Das ist nicht weiter überraschend, denn beides wird in der "picture"-Spezifikation definiert, die eigentlich als Namen Responsive-Grafiken-Spezifikation verdient hätte, aber sie heißt nunmal "picture"-Spezifikation. Da kann man nicht viel dran drehen. Was passiert denn jetzt mit Browsern, die das nicht verstehen? Dazu erst einmal hier nochmal Opera, der genau wie Chrome auf der Rendering-Engine Blink basiert und das deswegen gut versteht. Ein kleiner Blick in den Quelltext. So. <figure. Image, und hier sehen Sie "srcset w" mit "sizes". Das heißt also, die Grafiken sollten sich verändern. Ich fange mal ganz klein an hier. 500-Pixel Viewport hier, kleiner wird es gar nicht. Da. Und größer jetzt. Jetzt kommt gleich bei 600 Pixel wird es geändert auf "small", weil dann nur noch hier 50 vw erforderlich sind und bei 800 müsste er wieder rüberspringen auf "medium". So bekommt also der Browser immer die optimale Grafik nach Wunsch geliefert. Was passiert jetzt in einem Browser wie dem Firefox, der das nicht versteht? Hier ist dieselbe Seite. Auch hier zeige ich einmal den Quelltext. So. Da unten, das bekommt der Browser. "minwidth", und der Firefox versteht es zwar, aber die Funktion ist noch nicht aktiviert. Das heißt also, er versteht es nicht, genau genommen. So, und was passiert? Wie Sie sehen, sehen Sie nichts. Hier bleibt "small" als Grafik dabei. Das heißt also, das ist eigentlich gar nicht weiter schlimm. Das ist genau wie ein Schwarz-Weiß-Fernseher, der eine Sendung in Farbe nicht in Farbe darstellt, aber die Zuschauer können trotzdem etwas sehen. Diese Nachhilfe per JavaScript, die möglich ist, ist also optional und zwar bekommt jeder Browser ein Bild, auch ohne JavaScript. Wir haben überhaupt noch nichts nachgeholfen. Responsive Grafiken mit "srcset w" oder "picture", wie gesehen 22.46% im Augenblick Browserunterstützung, Tendenz steigend. Browser, die es verstehen, bekommen optimale Grafiken. Browser, die es nicht verstehen, bekommen <img. Also die Fallback-Grafik von <img. Progressive Enhancement nennt man das und Untertitel: "So ist das Web". Jeder Browser bekommt mit <img ein Bild und Enhancement, also die Verbesserung, die schrittweise Verbesserung. Moderne Browser bekommen das optimale Bild. Es gibt also eigentlich keinen Grund hier ganz viel dran zu drehen. Das liegt ein bisschen im Ermessen. Halten wir also fest: Die Nachhilfe per JavaScript ist komplett optional.

Responsive Grafiken mit HTML

In diesem Video-Training lernen Sie, wie Sie mit Attributen und Elementen wie srcset, sizes und responsive Grafiken per HTML einbinden können.

1 Std. 39 min (25 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!