Was ist Typisierter CSS attr()-Generator?
Die typisierte CSS-Funktion attr() (Chrome 133+) liest einen HTML-Attributwert und verwendet ihn in jeder CSS-Eigenschaft mit expliziter Typumwandlung. Anders als das traditionelle attr(), das nur auf der content-Eigenschaft von ::before- und ::after-Pseudo-Elementen funktioniert, akzeptiert die typisierte Version einen Typ-Parameter: attr(data-value type(<typ>), <fallback>).
Kurze Antwort
Verwenden Sie typisiertes CSS attr(data-* type(<typ>), <fallback>), um HTML-Attributwerte in jede CSS-Eigenschaft mit Typumwandlung einzulesen. Nur Chrome 133+. Unterstützt number, px, rem, em, percentage, color, deg, s, ms, url. Geben Sie immer einen Fallback an.
Last updated: 2026-05-30
Einschränkungen
- Typisiertes attr() erfordert Chrome 133+ oder Edge 133+. Safari und Firefox unterstützen es Stand Mai 2026 nicht.
- Der Attributwert muss exakt dem erwarteten Typformat entsprechen. Es gibt keine integrierte Bereinigung.
- Typkonvertierungsfehler und Parse-Fehler verhalten sich unterschiedlich - ein Typkonflikt löst den Fallback aus, ein ungültiges Typ-Argument ist ein CSS-Parse-Fehler.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Wählen Sie ein HTML-Attribut zum Auslesen - typischerweise ein data-*-Attribut wie data-size, data-color oder data-speed.
- Wählen Sie die CSS-Eigenschaft, die den Attributwert erhalten soll.
- Wählen Sie den Typ für die attr()-Funktion, der zu Ihrer CSS-Eigenschaft passt.
- Setzen Sie einen Fallback-Wert für den Fall, dass das Attribut fehlt oder der Wert nicht geparst werden kann.
Wofür du es nutzen kannst
- Erstellen Sie eine datengetriebene Fortschrittsanzeige, deren Breite über ein data-percent-Attribut gesteuert wird.
- Bauen Sie ein konfigurierbares Animationssystem mit data-duration- und data-delay-Attributen.
- Entwerfen Sie ein Komponenten-Farbsystem, bei dem data-accent eine Hex-Farbe aus dem HTML liest.