Utilisation de la fonction CSS attr() pour un stylage plus intelligent

La fonction CSS attr() extrait les valeurs directement depuis les attributs HTML dans vos styles—mais elle n’est plus limitée à l’affichage du contenu textuel uniquement. À partir de Chrome 133, attr() peut désormais analyser les valeurs typées et fonctionner avec n’importe quelle propriété CSS, ouvrant de nouveaux modèles de stylage puissants avec un minimum de JavaScript.

Utilisation traditionnelle d’attr() : Limitée mais utile

Pendant des années, la fonction CSS attr() a été un outil pratique pour extraire les valeurs d’attributs HTML, mais avec une limitation majeure : elle ne fonctionnait qu’avec la propriété content et retournait toujours des chaînes de caractères.

/* attr() classique - afficher href comme texte */
a:empty::before {
  content: attr(href);
}

Cette utilisation traditionnelle reste précieuse pour afficher les valeurs d’attributs sous forme de texte—pensez aux infobulles montrant des URL ou aux attributs de données dans les pseudo-éléments. Mais c’est là que son utilité s’arrêtait.

La révolution attr() moderne

La fonction CSS attr() améliorée transforme notre façon de gérer le stylage dynamique. Au lieu d’être confinée à la propriété content, vous pouvez maintenant utiliser attr() avec n’importe quelle propriété CSS et analyser les valeurs en types de données spécifiques.

Syntaxe de base

attr(<attr-name> <attr-type>?, <fallback-value>?)

La fonction accepte trois paramètres :

• attr-name : L’attribut HTML à lire
• attr-type : Comment analyser la valeur (optionnel)
• fallback-value : Valeur par défaut si l’attribut est manquant (optionnel)

Analyse de type : Au-delà des chaînes de caractères

Le véritable pouvoir de la fonction CSS attr() moderne réside dans l’analyse de type. Vous pouvez maintenant convertir les valeurs d’attributs en types de données CSS appropriés :

Valeurs de couleur

<div class="card" data-color="#3b82f6">Carte bleue</div>

.card {
  background-color: attr(data-color type(<color>), gray);
}

La déclaration type(<color>) indique au navigateur d’analyser l’attribut comme une valeur de couleur. Si l’attribut est manquant ou invalide, il revient à gris.

Valeurs numériques avec unités

<p data-size="18">Texte ajustable</p>

p {
  font-size: attr(data-size px, 16px);
}

Ici, la fonction CSS attr() ajoute px à la valeur numérique. Vous pouvez également utiliser d’autres unités comme rem, em, ou %.

Identifiants personnalisés

L’une des applications les plus puissantes utilise <custom-ident> pour des valeurs de propriétés CSS dynamiques :

<div class="card" id="card-1">Première carte</div>
<div class="card" id="card-2">Deuxième carte</div>

.card {
  view-transition-name: attr(id type(<custom-ident>), none);
}

Ceci assigne automatiquement des valeurs view-transition-name uniques basées sur les ID d’éléments—parfait pour les transitions de vue sans CSS répétitif.

Types de données pris en charge

La fonction CSS attr() moderne prend en charge de nombreux types de données :

• <string> (par défaut)
• <color>
• <number>
• <length>
• <percentage>
• <angle>
• <time>
• <custom-ident>
• <integer>
• <transform-function>

Note : Pour des raisons de sécurité, les valeurs <url> ne sont pas prises en charge sauf comme chaînes dans la propriété content.

Applications concrètes

Thématisation dynamique

<section data-theme-color="#1e293b" data-theme-spacing="2">
  <h2>Section thématisée</h2>
</section>

section {
  background-color: attr(data-theme-color type(<color>), white);
  padding: attr(data-theme-spacing rem, 1rem);
}

Mises en page de grille responsive

<div class="grid" data-columns="3">
  <!-- Éléments de grille -->
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(attr(data-columns type(<integer>), 1), 1fr);
}

Prise en charge des navigateurs et détection de fonctionnalité

Les capacités de la fonction CSS attr() moderne sont actuellement expérimentales, avec une prise en charge complète uniquement dans Chrome 133+ et d’autres navigateurs basés sur Chromium. Utilisez toujours la détection de fonctionnalité :

@supports (width: attr(x type(*))) {
  /* attr() moderne pris en charge */
  .element {
    color: attr(data-color type(<color>), black);
  }
}

@supports not (width: attr(x type(*))) {
  /* Styles de repli */
  .element {
    color: black;
  }
}

Pour la détection JavaScript :

if (CSS.supports("width", "attr(x type(*))")) {
  // attr() moderne est disponible
}

Bonnes pratiques

1. Fournissez toujours des replis : Le deuxième paramètre assure que vos styles fonctionnent même quand les attributs sont manquants
2. Utilisez des noms d’attributs sémantiques : data-font-size est plus clair que data-fs
3. Considérez les performances : Bien que puissante, une utilisation excessive d’attr() peut impacter les performances de rendu
4. Validez les valeurs d’attributs : Assurez-vous que vos attributs HTML contiennent des valeurs CSS valides pour le type attendu

Écueils courants

Attention à ces problèmes lors de l’utilisation de la fonction CSS attr() :

• Incompatibilités d’unités : font-size: attr(data-size) échoue sans unités
• Analyse de type invalide : Assurez-vous que les valeurs d’attributs correspondent au type déclaré
• Particularités d’héritage : Les valeurs attr() se calculent sur l’élément où elles sont utilisées, pas où elles sont définies

Conclusion

La fonction CSS attr() moderne fait le pont entre HTML et CSS, permettant un stylage vraiment dynamique sans JavaScript. Bien que la prise en charge des navigateurs soit encore en développement, son potentiel pour les systèmes de design basés sur les composants et les mises en page pilotées par les données en fait un outil qui vaut la peine d’être adopté avec des replis appropriés. À mesure que plus de navigateurs implémentent ces fonctionnalités, attr() deviendra un outil essentiel pour écrire des feuilles de style plus propres et plus maintenables.

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..