jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose Typisierter CSS attr()-Generator

Generieren Sie typisierte attr()-Ausdrücke mit Typumwandlung für datenattributgesteuertes CSS-Styling.

Tool wird geladen...

Was ist Typisierter CSS attr()-Generator?

The typed CSS attr() function (Chrome 133+) reads an HTML attribute value and uses it in any CSS property, with explicit type casting. Unlike the traditional attr() which only works on the content property of ::before and ::after pseudo-elements and always returns a string, the typed version accepts a type parameter: attr(data-value type(<type>), <fallback>). Supported types include string, number, px, rem, em, percentage, color, deg, s, ms, url, and more. This enables direct data-attribute-driven styling without JavaScript interpolation.

Kurze Antwort

Use typed CSS attr(data-* type(<type>), <fallback>) to read HTML attribute values into any CSS property with type casting. Chrome 133+ only. Supports number, px, rem, em, percentage, color, deg, s, ms, url types. Always provide a fallback value and layer a hardcoded fallback declaration first for cross-browser compatibility.

Einschränkungen

  • Typed attr() requires Chrome 133+ or Edge 133+. Safari and Firefox do not yet support it as of May 2026. The function is effectively Chromium-only, so all non-Chromium browsers will fall back to the initial value or the preceding hardcoded declaration.
  • The attribute value must match the expected type format exactly. A type(px) attribute expecting "300" breaks on "300px", "300 px", or non-numeric strings. There is no built-in sanitization or lenient parsing — the type system enforces strict value formatting.
  • Type conversion failures and parse errors behave differently: a type mismatch triggers the fallback value, but a completely invalid type argument (such as type(foobar)) is a CSS parse error that invalidates the entire declaration. Use only the documented type keywords to avoid invalidating styles.

So nutzt du dieses Tool

  1. Choose an HTML attribute to read — typically a data-* attribute such as data-size, data-color, or data-speed on the target element.
  2. Select the CSS property that will receive the attribute value — any CSS property that accepts the chosen type.
  3. Pick the type for the attr() function that matches your CSS property and expected value format.
  4. Set a fallback value for when the attribute is missing, empty, or the value cannot be parsed into the specified type.

Wofür du es nutzen kannst

  • Build a data-driven progress bar where the width is set by a data-percent attribute using attr(data-percent type(%), 0%) instead of an inline style.
  • Create a configurable animation system where data-duration and data-delay HTML attributes control animation timing via attr(data-duration type(s), 300ms).
  • Design a component color system where data-accent reads a hex color from the HTML and applies it to background, border, or text color through attr(data-accent type(color), #333).

Anwendungsfalle

Praxisbeispiele

Beispiel

Data-driven progress bar width

A progress bar component uses a data-value attribute on the element. Use width: attr(data-value type(%), 0%) in CSS to set the width directly from the HTML attribute. The attribute value like data-value="75" drives the bar width to 75% without inline styles or JavaScript. The fallback hides the bar when the attribute is absent.

Beispiel

Configurable animation timing

A notification component needs a variable display duration set per-instance in the HTML. Use animation-duration: attr(data-duration type(s), 3s) to read data-duration="5" and get a 5-second duration. Each notification element on the page can have its own timing without creating multiple CSS classes.

Haufige Fehler

  • Using typed attr() without a fallback — if the attribute is missing or the value cannot be coerced into the specified type, the declaration becomes invalid and the property falls back to its initial value. Always provide a sensible fallback as the second argument.
  • Expecting typed attr() to work in browsers that do not support it — Chrome 133+ is required. Older browsers ignore the entire declaration when they encounter the typed attr() syntax. Use a hardcoded fallback value before the attr() declaration as a progressive enhancement strategy.
  • Mixing units and values incorrectly for the type — attr(data-width type(px)) expects the attribute value to be a bare number ("300"), not a unit-included string ("300px"). The type specifies the unit. A value of "300px" on an attribute typed as px causes the type conversion to fail and triggers the fallback.

Überprüfung

  1. Open Chrome DevTools, inspect an element with the typed attr() declaration, and verify the computed style shows the expected resolved value derived from the HTML attribute, not the fallback.
  2. Change the data-* attribute value using the DevTools Element panel and confirm the rendered style updates in real time without a page reload or JavaScript intervention.

FAQ

Fragen zu Typisierter CSS attr()-Generator

What is the difference between typed attr() and the old attr()?

The old attr() only works in the content property on ::before and ::after pseudo-elements. It always returns a string value. The typed attr() works in any CSS property that accepts the target type, uses proper type casting with the type() parameter, and supports a fallback value. The typed version also checks type compatibility at parse time — an attr(data-width type(color)) used on the width property is a parse error and invalidates the declaration.

Which browsers support typed attr() as of 2026?

Typed attr() is supported in Chrome 133+, Edge 133+, and Opera 119+. Safari and Firefox do not yet ship typed attr() as of May 2026. This means typed attr() is Chromium-only for the near future. Use it as a progressive enhancement by declaring a fallback value first (such as width: 300px) and then overriding with the attr() version so Chromium browsers get the dynamic behavior while others use the fallback.

Can I use typed attr() on any HTML attribute or only data-* attributes?

Typed attr() works on any HTML attribute, not just data-* attributes. You can read standard attributes like href, src, alt, width, height, or custom data-* attributes. However, consider performance implications: reading from data-* attributes is generally the cleanest practice for styling hooks, as standard attributes carry semantic meaning that may collide with other scripts or browser behaviors. Use data-* attributes for styling hooks and reserved the typed attr() function for that purpose.

Does typed attr() re-evaluate when the attribute changes?

Yes. Typed attr() is a live CSS function — when the attribute value changes in the DOM (via setAttribute or a framework), the browser re-evaluates the CSS declaration and updates the rendered style. This means you can change data-* attribute values dynamically and the CSS automatically responds without any additional JavaScript beyond the attribute update itself.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren