Est-il possible de faire en sorte que Chrome renvoie la valeur brute de la propriété CSS "content" ?

Question

En considérant les codes JavaScript, CSS et HTML suivants :

console.log(getComputedStyle(document.querySelector('p'), '::after').getPropertyValue('content'));

p::after {
    content: "Hello" attr(data-after);
}

<p data-after=" World"></p>

Firefox et IE11 renvoient tous deux la valeur brute définie dans CSS : "Hello" attr(data-after) ce qui est ce dont j'ai besoin.

Mais Chrome revient "Hello World" la valeur analysée.

Lorsque j'utilise les DevTools de Chrome pour inspecter l'élément, je peux voir qu'il affiche les informations suivantes dans le panneau "Styles" :

p::after {
    content: "Hello" attr(data-after);
}

Il semble donc que Chrome ait toujours la possibilité de connaître la valeur brute.

Existe-t-il une solution JavaScript pour que Chrome renvoie la valeur brute définie dans le CSS comme le font Firefox et IE11 ? Même la méthode exclusive de Chrome est acceptable, tant qu'elle peut être utilisée en JavaScript.

---

Explication de la situation

En réponse à la question d'un membre sur la raison, voici la situation :

J'essaie de créer un "polyfill" pour CSS speak: never sur les pseudo-éléments. Les speak propriété n'est supporté par aucun navigateur pour le moment.

Les pseudo-éléments CSS peuvent être lus par les lecteurs d'écran et il n'est actuellement pas possible de les cacher facilement aux lecteurs d'écran. L'approche la plus courante pour résoudre ce problème consiste à utiliser du code HTML tel que <span aria-hidden="true">...</span> au lieu des pseudo-éléments CSS pratiques et des speak: never Une telle approche est, à mon avis, gênante et décevante.

Ce polyfill concerne donc principalement l'accessibilité du web.

Le fonctionnement de ce polyfill exigera des développeurs CSS qu'ils écrivent un peu de code CSS supplémentaire en tant qu'indicateur, tel que attr(speak-never) :

p::after {
    content: "please make me inaudible" attr(speak-never);
    }

Ensuite, en JavaScript, le polyfill parcourt chaque élément de la page et vérifie si ses pseudo-éléments ::before y ::after Les valeurs de CSS content contient attr(speak-never) . Si cette chaîne d'indicateurs est trouvée, le polyfill fixe les pseudo-éléments (en ajoutant des éléments personnalisés <before aria-hidden="true">...</before> y <after aria-hidden="true">...</after> de manière programmatique).

Le problème, c'est que Chrome ne peut pas renvoyer les informations suivantes attr(speak-never) en JavaScript. Bien que le polyfill puisse également fonctionner en demandant aux développeurs CSS d'ajouter un indicateur supplémentaire tel que --speak: never pour Chrome, il est préférable que le polyfill simplifie au maximum le travail des développeurs CSS et ne nécessite pas d'ajouts supplémentaires. --speak: never indicateur.

C'est pourquoi cette question a été créée.

---

Mise à jour

J'avais décidé d'utiliser counter-reset: speak-never comme indicateur car il peut être lu en JavaScript par tous les navigateurs.

Answer 1

Il n'est pas certain que l'ajout de quelque chose comme attr(speak-never) est plus propre que de passer par le balisage HTML...

Mais cette question met en évidence une chose intéressante : Chrome a commencé l'implémentation de CSSTypedOM, que nous aurions dû être en mesure d'utiliser pour trouver l'ensemble des valeurs d'origine, comme le montre l'exemple suivant dans cette réponse .

Toutefois, pour cibler les pseudo-éléments, il est prévu d'ajouter une fonction Interface PseudoElement et une extension de l'élément pour que nous puissions appeler Element.pseudo(::type) afin de cibler ses pseudo-éléments. Mais cette partie des spécifications n'a pas encore été mise en œuvre par Chrome, de sorte qu'il n'existe actuellement aucun moyen d'accéder aux TypedValues des pseudo-éléments dans Chrome.

Il nous reste donc à analyser les feuilles de style nous-mêmes, avec toutes les réserves qui ont poussé le w3c à développer une véritable API : pas d'accès aux feuilles de style inter-origines, pas de moyen direct de savoir si une règle est active sur l'élément ou si une autre a plus d'importance et ainsi de suite...

Answer 2

Vous pouvez consulter la règle via document.styleSheets . La propriété facilite l'établissement d'une liste de feuilles de style constituées de plusieurs règles composées de plusieurs propriétés. Vous pouvez ensuite parcourir les feuilles de style et les règles et en extraire la valeur brute de la propriété.

Il s'agit d'une approche de base qui respecte les règles directement définies dans les <style> y <link> éléments :

for (let sheet of document.styleSheets) {
    for (let rule of sheet.rules) {
        if (/:(before|after)$/.test(rule.selectorText)) {
            console.log(rule.style.content);
        }
    }
}

Il convient de noter que @include -ou des feuilles de style @media -Les requêtes ne sont pas gérées ici. On peut y accéder en vérifiant la présence de rule.type être 3 o 5 respectivement et en traversant le styleSheet de cette règle. Voir l'article liste des types .