Picture – Tag und CSS-Anweisungen

Interessant ist der Umgang von Browsern mit CSS-Anweisungen, die sich auf das Picture – Tag beziehen:

<picture>
	<source media="(min-width: 1025px)" style="display: none !important;" srcset="//someimage.net/somefile_big.jpg">
	<source media="(min-width: 726px) and (max-width: 1024px)">
	<source media="(min-width: 481px) and (max-width: 725px)" srcset="//someimage.net/somefile_medium.jpg">
	<source media="(max-width: 480px)" srcset="//someimage.net/somefile_small.jpg">
	<img src="//someimage.net/somefile_fallback.jpg" alt="some text" >
</picture>

Hier wird die CSS-Anweisung display: none ignoriert.

Die Begruendung dafuer:

Der Browser nimmt das erste source-Element, dessen media-Attribut zutrifft

www.mediaevent.de/xhtml/picture.html