jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Generateur CSS attr() type

Generez des expressions attr() typees avec conversion de type pour le stylage CSS pilote par attributs de donnees.

Chargement de l'outil...

Qu'est-ce que Generateur CSS attr() type ?

La fonction CSS attr() typee (Chrome 133+) lit une valeur d'attribut HTML et l'utilise dans n'importe quelle propriete CSS, avec un cast de type explicite. Contrairement a l'attr() traditionnelle qui ne fonctionne que sur la propriete content des pseudo-elements ::before et ::after et retourne toujours une chaîne, la version typee accepte un parametre de type : attr(data-value type(<type>), <fallback>). Les types pris en charge incluent string, number, px, rem, em, percentage, color, deg, s, ms, url et plus encore.

Réponse rapide

Utilisez le CSS type attr(data-* type(<type>), <fallback>) pour lire les valeurs d'attributs HTML dans n'importe quelle propriete CSS avec un cast de type. Chrome 133+ uniquement. Prend en charge les types number, px, rem, em, percentage, color, deg, s, ms, url. Fournissez toujours une valeur de repli et placez une declaration de repli codée en dur en premier pour la compatibilitéentre navigateurs.

Last updated: 2026-05-30

Limites

  • Attr() typee necessite Chrome 133+ ou Edge 133+. Safari et Firefox ne la prennent pas encore en charge en mai 2026. La fonction est effectivement Chromium uniquement.
  • La valeur de l'attribut doit correspondre exactement au format de type attendu. Un attribut type(px) attendant "300" echoue sur "300px", "300 px" ou des chaînes non numeriques.
  • Les echecs de conversion de type et les erreurs d'analyse se comportent differemment : une incompatibilité de type declenche la valeur de repli, mais un argument de type completement invalide est une erreur d'analyse CSS qui invalide toute la declaration.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Choisissez un attribut HTML a lire -- généralement un attribut data-* tel que data-size, data-color ou data-speed sur l'element cible.
  2. Selectionnez la propriete CSS qui recevra la valeur de l'attribut -- n'importe quelle propriete CSS qui accepte le type choisi.
  3. Choisissez le type pour la fonction attr() qui correspond a votre propriete CSS et au format de valeur attendu.
  4. Definissez une valeur de repli pour le cas ou l'attribut est manquant, vide ou que la valeur ne peut pas etre analysee dans le type specifie.

A quoi il sert

  • Construire une barre de progression pilotee par les donnees ou la largeur est definie par un attribut data-percent en utilisant attr(data-percent type(%), 0%) au lieu d'un style en ligne.
  • Creer un systeme d'animation configurable ou les attributs HTML data-duration et data-delay controlent le timing de l'animation via attr(data-duration type(s), 300ms).
  • Concevoir un systeme de couleurs de composant ou data-accent lit une couleur hexadecimale du HTML et l'applique a l'arriere-plan, la bordure ou la couleur du texte via attr(data-accent type(color), #333).

Cas d'usage

Exemples concrets

Exemple

Largeur de barre de progression pilotee par les donnees

Un composant de barre de progression utilise un attribut data-value sur l'element. Utilisez width: attr(data-value type(%), 0%) en CSS pour definir la largeur directement a partir de l'attribut HTML. La valeur data-value="75" entraine une largeur de barre de 75% sans styles en ligne ni JavaScript.

Exemple

Timing d'animation configurable

Un composant de notification necessite une duree d'affichage variable definie par instance dans le HTML. Utilisez animation-duration: attr(data-duration type(s), 3s) pour lire data-duration="5" et obtenir une duree de 5 secondes.

Erreurs frequentes

  • Utiliser attr() typee sans valeur de repli -- si l'attribut est manquant ou que la valeur ne peut pas etre convertie dans le type specifie, la declaration devient invalide.
  • S'attendre a ce que attr() typee fonctionne dans les navigateurs qui ne la prennent pas en charge -- Chrome 133+ est requis. Les navigateurs plus anciens ignorent toute la declaration.
  • Melanger les unites et les valeurs incorrectement pour le type -- attr(data-width type(px)) s'attend a ce que la valeur de l'attribut soit un nombre brut, pas une chaîne incluant l'unite.

Vérification

  1. Ouvrez Chrome DevTools, inspectez un element avec la declaration attr() typee et verifiez que le style calcule montre la valeur resolue attendue derivee de l'attribut HTML.
  2. Modifiez la valeur de l'attribut data-* en utilisant le panneau Elements de DevTools et confirmez que le style rendu se met a jour en temps reel.

FAQ

Questions sur Generateur CSS attr() type

Quelle est la difference entre attr() typee et l'ancienne attr() ?

L'ancienne attr() ne fonctionne que dans la propriete content sur les pseudo-elements ::before et ::after. Elle retourne toujours une valeur de type chaîne. La attr() typee fonctionne dans n'importe quelle propriete CSS qui accepte le type cible, utilise un cast de type approprié avec le parametre type() et prend en charge une valeur de repli.

Quels navigateurs prennent en charge attr() typee en 2026 ?

Attr() typee est prise en charge dans Chrome 133+, Edge 133+ et Opera 119+. Safari et Firefox n'ont pas encore deploye attr() typee en mai 2026. Utilisez-la comme amélioration progressive.

Puis-je utiliser attr() typee sur n'importe quel attribut HTML ou seulement les attributs data-* ?

Attr() typee fonctionne sur n'importe quel attribut HTML. Vous pouvez lire des attributs standard comme href, src, alt, width, height ou des attributs data-* personnalises.

Est-ce que attr() typee se reevalue lorsque l'attribut change ?

Oui. Attr() typee est une fonction CSS live -- lorsque la valeur de l'attribut change dans le DOM, le navigateur reevalue la declaration CSS et met a jour le style rendu.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi