Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Das HTML5 picture Element - jetzt von allen aktuellen Browsern unterstützt

Freitag, 25. März 2016

iOS 9.3 - die beste Nachricht, und niemand berichtet darüber, niemanden scheint das zu interessieren:
iOS 9.3 unterstützt das HTML5 picture Element. :-)

Demo:

Hier der Alternativtext für Screen Reader - nur ein Alternativtext für alle Größen!
Dunst über einem stillen See
Bild: http://unsplash.com/

Damit wird das picture Element von ALLEN aktuellen Browsern unterstützt.
www.caniuse.com/#search=picture
Ein großer Schritt für RWD (Responsive Web Design).
Ich bin versucht, das ab sofort einzusetzen, und dem IE nur noch zu liefern, was ihm zusteht: ein Fallback img src in Einheitsgröße.

Wenn du oben das folgende Bild siehst, dann unterstützt dein Browser das picture Element (noch) nicht:
Fehlerbild

Hier der Quellcode zu obiger Demo:

<picture>
<source media="(max-width: 639px)" srcset="images/flashlight_240.jpg" >
<source media="(min-width: 640px)" srcset="images/flashlight_600.jpg">
<!– fallback if picture is not supported –>
<img src="images/picture_not_supported.png" alt="Hier der Alternativtext für Screen Reader - nur ein Alternativtext für alle Größen!">
</picture>

Nachtrag 26.03.2016

Das hätte ich jetzt wirklich nicht erwartet: picture kann sogar zusammen mit Fancybox verwendet werden.



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE