2 Dinge, die mein Frontend-Entwickler Herz höher schlagen lassen (April 2024)
Moin!
In der heutigen Flaschenpost schaue ich (wie zuletzt im November) ein wenig über den Tellerrand und zeige dir 2 Dinge, mit denen ich mich in den letzten Tagen und Wochen als Frontend-Entwickler beschäftigt habe.
Los geht's:
1. HTML5 Popover-Attribut
Passend zum Dialog-Element (was ich zum Beispiel zur Anzeige des Installationsvideos hier nutze) gibt es auch ein Popover-Attribut, das in Kürze (wenn Firefox 125 draußen ist) 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 könnte also zum Beispiel für Hinweise (Produkt wurde in den Warenkorb gelegt) verwendet werden.
Außerdem ist es kein Element, sondern ein Attribut und kann dadurch mit beliebigen Elementen kombiniert werden. Ich prüfe aktuell, ob es auch für das Ein- und Ausblenden von z. B. mobilen Menüs in unseren Contao Themes sinnvoll sein könnte.
2. Farbabstufungen mit color-mix()
Als Sass-Nutzer habe ich unter anderem die Farb-Funktionen, um eine Farbe aufzuhellen (lighten()) oder abzudunkeln (darken()) geliebt. Als ich dann auf Custom Properties umstieg, war ich ziemlich enttäuscht, dass es dafür keine nativen CSS-Funktionen gab.
Doch Zeiten ändern sich zum Glück (siehe Browser-Support). Mit color-mix() lassen sich (schon eine ganze Weile) relativ einfach Abstufungen einer Farbe erzeugen. Hier ein Beispiel:
--color-red: #f00;--color-red-dark: color-mix(in srgb, var(--color-red), #000 20%);
Auch hier habe ich wieder unsere Contao Themes im Auge, bei denen Nutzer:innen in Zukunft weniger Farbabstufungen definieren müssen, um zum Beispiel Hover-Effekte anzupassen.
Mehr über color-mix() erfährst du hier: Simplify Your Color Palette With CSS Color-Mix()
Und nun zu dir: Welche Entdeckungen lassen dein Entwickler:innen Herz höher schlagen? Setzt du das popover-Attribut oder color-mix() bereits ein? Schreib mir, indem du auf diese Mail antwortest.
Erstma' …
Dennis
PS: Ich bin so alt
PPS: Das Sicherheitsupdate heute hast du auf dem Schirm? Schau dir dazu auch die Sicherheitshinweise an.