Pourquoi la fonction `attr()` de CSS3 échoue-t-elle dans les navigateurs modernes ?

Dysfonctionnements de la fonction attr() de CSS3 dans les principaux navigateurs

Malgré les spécifications du W3C affirmant le contraire, les utilisateurs de Firefox peuvent rencontrer une erreur lorsqu'ils tentent d'utiliser la fonction attr().

Syntaxe Erreur :

Le CSS suivant :

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

Générera une erreur de syntaxe dans Firebug.

Raison de l'échec :

Après avoir examiné la grammaire CSS, il devient évident que la virgule entre le nom de l'attribut et l'unité doit être omis :

.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, l'erreur persiste.

Manque de mise en œuvre :

Malheureusement, à partir de 2020 , il n'existe aucune implémentation connue de la fonction attr() de niveau 3 dans les principaux navigateurs. Bien qu'elle soit à risque, la fonctionnalité reste dans le brouillon de l'éditeur de la spécification CSS.

Plaidoyer pour la mise en œuvre :

Les utilisateurs qui souhaitent voir cette fonctionnalité implémentée dans le l’avenir peut exprimer son soutien via des canaux de retour d’information pertinents. Les propositions actuelles incluent :

• Plateforme Microsoft Edge : actuellement à l'étude

Remarque :

La version de base de niveau 2.1 d'attr () est largement pris en charge et utilisé avec la propriété content 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!