Wat is Getypeerde CSS attr() Generator?
De getypeerde CSS attr() functie (Chrome 133+) leest een HTML-attribuutwaarde en gebruikt deze in elke CSS-eigenschap, met expliciete typecasting. Anders dan traditionele attr() die alleen werkt op content van pseudo-elementen en altijd een string retourneert, accepteert de getypeerde versie een typeparameter: attr(data-value type(<type>), <terugval>).
Snel antwoord
Gebruik getypeerde CSS attr(data-* type(<type>), <terugval>) om HTML-attribuutwaarden in elke CSS-eigenschap te lezen met typecasting. Chrome 133+ alleen. Ondersteunt number, px, rem, em, percentage, color, deg, s, ms, url.
Last updated: 2026-05-30
Beperkingen
- Vereist Chrome 133+. Effectief Chromium-only per mei 2026.
- Attribuutwaarde moet exact overeenkomen met het verwachte type-formaat.
- Type-conversiefouten en parseerfouten gedragen zich verschillend.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Kies een HTML-attribuut zoals data-size of data-color.
- Selecteer de CSS-eigenschap die de waarde ontvangt.
- Kies het type voor attr() dat past bij uw CSS-eigenschap.
- Stel een terugvalwaarde in voor als het attribuut ontbreekt.
Waarvoor je het kunt gebruiken
- Bouw een datagestuurde voortgangsbalk met data-percent.
- Maak een configureerbaar animationsysteem met data-duration.
- Ontwerp een componentkleurensysteem met data-accent.