La fonction `attr()` de CSS3 est-elle un mythe ? Un aperçu de la compatibilité et de la mise en œuvre du navigateur.

Fonction attr() de CSS3 : un mirage dans les principaux navigateurs

De nombreux développeurs ont rencontré des difficultés lors de l'utilisation de la fonction attr() de CSS3, notamment dans Firefox. Malgré son inclusion dans les spécifications du W3C, elle reste une fonctionnalité non implémentée.

Syntaxe et exemple

La syntaxe de la fonction attr() est la suivante :

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )

Par exemple, le code CSS suivant tente de définir la couleur de la bordure et l'ombre de la boîte d'un élément en fonction de la valeur de la teinte des données. attribut :

.window > .content .wbutton.tint {
    border: solid thin attr(data-tint, color);
    box-shadow: inset 0 0 50px attr(data-tint, color);
}

Pourquoi cela ne fonctionne pas

Bien qu'il réponde aux exigences de la spécification, ce code ne fonctionne pas car la version de niveau 3 de attr( ), qui a introduit la possibilité de spécifier un type ou une unité, n'est implémenté dans aucun navigateur majeur.

Mise en œuvre actuelle Statut

En 2020, il n'existe aucune implémentation connue de la fonction attr() de niveau 3. Il est toujours menacé dans la dernière version de la spécification de l'éditeur.

Prise en charge du navigateur

La version niveau 2.1 de attr(), qui est utilisée avec la propriété content pour le contenu généré, est entièrement pris en charge dans tous les principaux navigateurs. Le tableau de compatibilité du navigateur MDN s'applique uniquement à cette version, pas à la version niveau 3.

Appel à l'action

Développeurs qui souhaitent voir la fonction attr() de niveau 3 mis en œuvre peut fournir des commentaires via les canaux suivants :

• Plateforme Microsoft Edge : actuellement à l'étude (merci à Lea Vérou !)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!