Veröffentlicht: 6. März 2025
Am 25. Februar hat Chrome eine Intent To Ship-Ankündigung für @function veröffentlicht und Feedback erhalten, in dem eine längere Testphase gefordert wurde. Die Testphase war zwar insgesamt nicht kurz, aber es gab in letzter Zeit einige wichtige Änderungen an den Spezifikationen, die mehr Zeit für Tests erforderten.
Wir hoffen und freuen uns, dass diese verlängerte Testphase zu mehr Community-Experimenten führen wird.
Testaufruf
Jetzt ist es an der Zeit, eine Kopie von Canary zu erstellen, experimentelle Webplattformfunktionen zu aktivieren, CSS @function zu testen und alle gefundenen Fehler zu melden. Wir haben jetzt mehr Zeit für Tests und sollten das nutzen.
Hier sind einige Beispiele, die Ihnen den Einstieg erleichtern sollen:
- Pontus Horn – Schaltflächenvarianten
- Nils Riedemann – Schriftgrößen
- Bramus – Eine Funktion für hell und dunkel für mehr als nur Farbe
Das folgende CSS ist ein kurzes, aber nützliches Beispiel:
@function --light-dark(--light, --dark) {
result: var(--light);
@media (prefers-color-scheme: dark) {
result: var(--dark);
}
}
Möchtest du mehr über @function erfahren?
Bramus hat eine Reihe von Demos erstellt und CSS Tricks hat sich auch sofort an die Arbeit gemacht.
Argumente?! Rückgabewerte?! Das ist es wert, dass ich meinen Kaffee ausspucke! Ich musste mehr über sie erfahren und zum Glück ist die Spezifikation klar formuliert.