Pourquoi la fonction `attr()` de CSS3 ne fonctionne-t-elle pas comme prévu dans les principaux navigateurs ?

La fonction attr() de CSS3 n'est pas prise en charge dans les principaux navigateurs

Dans un document HTML :

<a class="wbutton tint" data-tint="rgba(255,0,0,.5)" href="#">This should be red, with an opacity of 0.5</a>

Et dans le fichier CSS :

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

Firefox affiche une erreur CSS dans Firebug. Selon les spécifications du W3C, la fonction attr() devrait fonctionner, mais ce n'est pas le cas.

Pourquoi cela ne fonctionne pas

La grammaire spécifiée dans la spécification nécessite que la virgule entre le nom de l'attribut et l'unité à utiliser soit supprimée :

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

Cependant, même avec la syntaxe correcte, la fonction attr() ça ne marchera toujours pas. Depuis 2020, il n'existe aucune implémentation connue de la version niveau 3 de attr() dans les principaux navigateurs.

Où signaler les problèmes

Si vous souhaitez voir cette fonctionnalité implémentée, vous pouvez la suggérer dans les commentaires correspondants canaux :

• Plateforme Microsoft Edge (actuellement à l'étude)

Remarque : La version de base niveau 2.1 de la fonction attr() est entièrement prise en charge dans les versions récentes de tous les principaux navigateurs. Cependant, il est utilisé avec la propriété content pour les pseudo-éléments :before et :after pour le contenu généré.

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!