CSS Custom Functions are coming … and they are going to be a game changer!

Waar gaat de blogpost over?

De blogpost gaat over een nieuwe CSS-functie die in ontwikkeling is: CSS Custom Functions.

Met deze functie is het mogelijk om je eigen CSS-functies te maken die dynamische waarden kunnen berekenen. Dit kan bijvoorbeeld helpen om stijlen automatisch aan te passen aan de light of dark mode van een gebruiker.

Voorbeeld

Een voorbeeld van een CSS Custom Function om de kleur van de achtergrond te veranderen op basis van de mode van de gebruiker:

@function --light-dark(--light, --dark) {
  result: var(--light);

  @media (prefers-color-scheme: dark) {
    result: var(--dark);
  }
}

:root {
  --light: #ffffff;
  --dark: #333333;
  background-color: --light-dark(var(--light), var(--dark));
}

In dit voorbeeld wordt de achtergrondkleur automatisch aangepast op basis van of de gebruiker light of dark mode aan heeft. Als de gebruiker dark mode heeft, wordt de achtergrondkleur donker, anders wordt het licht.

Wat heb ik geleerd?

• Je kunt eigen functies maken in CSS, die berekeningen doen op basis van ingevoerde waarden.
• Met deze functie kun je stijlen maken die reageren op de instellingen van de gebruiker, zoals light of dark mode.
• Dat je hiermee makkelijker stijlen kunt veranderen zonder JavaScript te gebruiken.

Wat vind ik interessant?

• Het idee dat je met CSS-functies flexibele stijlen kunt maken die zich aanpassen aan de omgeving van de gebruiker.
• Het maakt het mogelijk om stijlen dynamisch te veranderen, zonder dat je JavaScript hiervoor nodig hebt.

Wat betekent dit voor mijn ontwikkeling?

• Het maakt het mogelijk om dynamische en flexibele stijlen te schrijven.
• Het helpt me stijlen slimmer en efficiënter toe te passen, zonder het schrijven van JavaScript.