Transparente Grafiken im neuen dark mode und Problem mit Apple Safari Browser

[Bertie]

Von Bertie gefundener Hack für eine CSS Browserweiche ist keine gangbare Lösung:

/* Safari-spezifische Styles für hellen Hintergrund bei SVGs im dark mode,
   weil Safari beim Einbinden per img das SVG intern nicht in den dark mode
   umschaltet */
@supports (hanging-punctuation: first)
      and (font: -apple-system-body) 
      and (-webkit-appearance: none) {
  /* nur fuer img, wenn der Dateiname auf .svg endet */
  img[src$=".svg"] {
    background-color: white;
  }
}

Edit Rolf B: CSS als Code markiert und Zeilenumbrüche eingefügt

Prüfung durch Rolf:

Dein Vorschlag mit @supports hat einen Nachteil. Damit fragen wir nach den Features A,B,C, um daraus zu schließen, dass wir einen Workaround für Feature X brauchen, das aber logisch von A, B und C komplett unabhängig ist. Die einzige Abhängigkeit ist, dass A, B und C aktuell nur von Safari erfüllt werden.

Und das heißt: Es ist keine Feature-Query, sondern eine CSS Browserweiche. Feature A ist dazu noch instabil, weil hanging-punctuation jederzeit von anderen Browsern eingebaut werden kann. Ein Apple-Systemfont ist schon etwas besser.

Grundsätzlich ist die Idee gut, einen Mechanismus zu haben, der zentral wirkt und nicht bei jedem Bild extra gesetzt werden muss. Ich fürchte nur, es wird noch Jahre dauern, bis Apple das fixt und wir den Workaround herausnehmen können.

kleiner Test: @supports (font: irgendwas) schlägt auf meinem Chrome unter Windows immer fehl, ganz gleich, ob ich für irgendwas -apple-system-body oder Arial hinschreibe. Das liegt ziemlich sicher daran, dass die font-Eigenschaft eine Sammeleigenschaft ist, in der font-size und font-family Pflicht sind.

Eine @support-Abfrage auf (font-family:Arial) meldet hingegen Erfolg. Die Abfrage (font-family: NotInstalledFont) aber leider auch. Und (-webkit-appearance:none) ebenfalls - die webkit-Präfixe gibt es in Safari und in Chrome. Heißt also: hanging-punctuation ist das einzige, was Chrome daran hindern würde, einen weißen Hintergrund zu setzen. Bis zu dem Tag, wo er dieses Feature unterstützt - und der ist absehbar, denn caniuse.com schreibt, dass alle Hersteller an der Implementierung arbeiten würden.

Also, leider, auch als Workaround ist das kein gangbarer Weg.

Vorschlag Rolf: Meine Idee war einmal, im SVG Replacer auf Darkmode abzufragen und dann der Bild-URL ein #dark anzuhängen. Das könnte man im SVG als zweiten Darkmode-Schalter nutzen (via #dark:target). Das mache ich jetzt schon für die Icons am rechten Rand.