CSS Quiz

[Bertie]

Salü zusammen

Wer kann das lesen und sich vorstellen, was es bedeutet?

:is(html, img, video) { filter: invert() hue-rotate(180deg) }

Viel Spass 😀

Ich staune immer wieder, was mit modernem CSS möglich ist.

Gruss, Bertie

Lösung: Die Kurzfassung der Anweisungen dieses Beispiels in der Quelltext-Anzeige.

[Bertie]

Ups, eigentlich geht's auch ohne :is:

html, img, video { filter: invert() hue-rotate(180deg) }

[Rolf B]

Hallo Bertie,

es gibt ein paar Unterschiede.

h1:hover, h1:flying { color: red; }

:is(h2:hover, h2:flying) { color: green; }

1. :is() ist fehlerverzeihend. Die erste Regel wird komplett verworfen, weil es :flying nicht gibt. Die zweite Regel hingegen wird h2 Überschriften beim Hover erröten lassen, weil nur h2:flying ignoriert wird.

2. :is() bildet das Maximum der enthaltenen Selektoren. :is(#foo, p) hat die Spezifität eines ID-Selektors, selbst wenn nur ein schnöseliges p ohne jede ID gestyled wird und id="foo" im ganzen Dokument nicht vorhanden ist. Willst Du das nicht, nimm :where(). Das schüttet die Spezifität allerdings gleich ganz in die Tonne.

Rolf

[Rolf B]

Hallo Bertie,

ich kann das lesen, weil ich schon fleißig dazu im Wiki getippt habe, und ich kann mir darunter eine irreversible Operation vorstellen. hue-rotate() wird nämlich durch ein entgegengesetztes hue-rotate() nicht vollständig neutralisiert, weil – wie man hier findet – die Farbrotation die physiologischen Effekte des menschlichen Sehens berücksichtigen will und deshalb grün viel stärker transformiert als blau (und ja, hue-rotate(180deg) ist entgegengesetzt zu sich selbst, weil 180° und -180° auf dem Farbkreis identisch sind).

Die Narzisse im Wiki-Beispiel sieht nach doppelter Filterung nicht so aus wie vorher. Leider. Und leider wirkt der Filter auf das gerenderte Bild des Elements, d.h. wenn ich das html-Element filtere, werden gnadenlos alle Kindelemente mitgefiltert, ich kann das img-Element also nicht explizit von der Filterung ausnehmen. Ich müsste schon die inverse Matrix zu hue-rotate(180deg) bestimmen und einen Farbmatrixfilter anwenden, um es korrekt zurückzurechnen. Dazu muss ich aber einen SVG-Filter konstruieren und anwenden, ein Äquivalent zu feColorMatrix gibt's in CSS nicht.

Rolf

[Bertie]

Salü Rolf

Danke für Deine Präzisierung. Beim Beispiel habe ich einen entsprechenden Hinweis mit Bildvergleich ergänzt.

Gruss, Bertie

[Gunnar Bittersmann]

@@Bertie

Wer kann das lesen und sich vorstellen, was es bedeutet?

:is(html, img, video) { filter: invert() hue-rotate(180deg) }

Ein eigener dark mode oder light mode für eine Website, die sowas nicht implementiert hat.

Wie dieses Forum, weshalb ich

@media (prefers-color-scheme: dark) {
  html, img { filter: invert(100%) }
}

In meinem Nutzerprofil zu stehen habe.

video braucht man fürs Forum nicht. Dass Blau und Orange vertauscht sind, damit kann ich leben.

🖖 Live long and prosper

[Bertie]

Salü Gunnar

Wenn Du in Deinem Nutzerprofil hue-rotate(180deg) ergänzt, würden Blau und Orange wieder grob zurück getauscht.

Gruss, Bertie