Popover-API und color-mix()

Zwei Frontend-Neuerungen, die einen Blick über den Contao-Tellerrand lohnen — eine Fortsetzung von :has(), Subgrid und Responsive Video.

Das HTML-Popover-Attribut

Passend zum Dialog-Element — das zum Beispiel bei der Anzeige des SOLO-Installationsvideos zum Einsatz kommt — gibt es das Popover-Attribut, das seit Firefox 125 von allen modernen Browsern unterstützt wird.

Im Gegensatz zum Dialog-Element ist Popover vor allem für Inhalte gedacht, die den darunter liegenden Bildschirminhalt nicht sperren sollen. Ein Popover eignet sich also zum Beispiel für Hinweise wie „Produkt wurde in den Warenkorb gelegt".

Außerdem ist es kein Element, sondern ein Attribut und kann dadurch mit beliebigen Elementen kombiniert werden. Denkbar ist es damit auch für das Ein- und Ausblenden von mobilen Menüs in Contao-Themes.

Mehr über popover erfahren (MDN)

Farbabstufungen mit color-mix()

Wer mit Sass arbeitet, kennt die Farb-Funktionen lighten() und darken(), um eine Farbe aufzuhellen oder abzudunkeln. Beim Umstieg auf Custom Properties fehlte lange ein natives CSS-Pendant dafür.

Mit color-mix() lassen sich inzwischen relativ einfach Abstufungen einer Farbe erzeugen (siehe Browser-Support):

--color-red: #f00;
--color-red-dark: color-mix(in srgb, var(--color-red), #000 20%);

Gerade für Themes ist das praktisch: Nutzer:innen müssen weniger Farbabstufungen selbst definieren, um zum Beispiel Hover-Effekte anzupassen.

Mehr über color-mix() erfährst du hier: Simplify Your Color Palette With CSS Color-Mix()