Wöchentliche Plattform-Nachrichten: Bilder mit dem <picture>-Element am Laden hindern, das Web, das wir wollen, SVG-Stile sind nicht beschränkt

In der dieswöchigen Zusammenfassung von Browser-Nachrichten gibt es einen Trick, um Bilder bedingt mit dem <picture>-Element zu laden, Ihre Chance, Browser-Anbietern mitzuteilen, welches Web Sie sich wünschen, und die Stile, die auf Inline-SVG-Elemente angewendet werden, sind, nun ja, nicht nur auf dieses SVG beschränkt.

Wenden wir uns den Schlagzeilen zu…

Bilder mit dem <picture>-Element am Laden hindern

Sie können das <picture></picture>-Element verwenden, um zu verhindern, dass ein Bild geladen wird, wenn eine bestimmte Media Query mit der Umgebung des Benutzers übereinstimmt (z. B. wenn die Viewport-Breite größer oder kleiner als ein bestimmter Längenwert ist). [Probieren Sie die Demo aus

Siehe den Stift
voZENR von Šime Vidas (@simevidas)
auf CodePen.

<picture>
  <!-- show 1⨯1 transparent image if viewport width ≤ 40em -->
  <source media="(max-width: 40em)" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

  <!-- load only image if viewport width > 40em -->
  <img src="product-large-screen.png">
</picture>

(via Scott Jehl)

Das Web, das wir wollen

The Web We Want (webwewant.fyi) ist eine neue Zusammenarbeit zwischen Browser-Anbietern, die darauf abzielt, Feedback von Webentwicklern zum aktuellen Zustand des Webs zu sammeln. Sie können auf der Website eine Funktionsanfrage einreichen („Was wollen Sie?“) und haben die Chance, diese auf einer Veranstaltung (An Event Apart, Smashing Conference usw.) vorzustellen.

(via Aaron Gustafson)

In anderen Nachrichten

• Firefox unterstützt einen nicht standardmäßigen booleschen Parameter für die Methode location.reload, der verwendet werden kann, um die Seite hart neu zu laden (wodurch der HTTP-Cache des Browsers umgangen wird) [via Wilson Page]
• Wenn Sie Inline-<svg></svg>-Elemente verwenden, die selbst Inline-CSS-Code (in <style>-Elementen) enthalten, beachten Sie, dass diese *Stile nicht auf das SVG-Element beschränkt* sind, sondern global, sodass sie auch andere SVG-Elemente beeinflussen [via Sara Soueidan]
• XSS-Auditor, eine Chrome-Funktion, die Cross-Site-Scripting-Schwachstellen erkennt, wurde als unwirksam eingestuft und wird in einer zukünftigen Version aus Chrome entfernt. Sie sollten möglicherweise weiterhin den HTTP-Header X-Xss-Protection: 1; mode=block für ältere Browser setzen [via Scott Helme]

---

Lesen Sie mehr Nachrichten in meiner neuen, wöchentlichen Sonntagsausgabe. Besuchen Sie webplatform.news für weitere Informationen.