CSS <style scoped> s'applique en dehors de la portée

Question

L'exemple le plus simple de style scopé ne fonctionne pas dans Chrome (v 25) :

<div>
    <h1>Hello 1</h1>
</div>
<div>
    <h1>Hello 2</h1>
    <style scoped> h1 { color: red; } </style>
</div>

Essayez-le : http://jsfiddle.net/RWW8r/2/

Les deux sites h1 deviennent rouges :

Le style de portée ne doit s'appliquer qu'au deuxième h1 .

J'ai lu que la fonctionnalité a été implémentée dans Chrome, pourquoi cela ne fonctionne-t-il pas ? Est-ce que je fais quelque chose de mal ?

Answer 1

Vous ne faites rien de mal. À l'heure actuelle, le scoped CSS est toujours une fonctionnalité expérimentale qui n'est prise en charge par aucun navigateur actuel.

Cependant, si vous voulez jouer avec dans Chrome, vous pouvez faire la chose suivante :

• Allez à chrome://flags/ dans votre navigateur Chrome ;
• Trouvez "Activer les fonctionnalités expérimentales de WebKit" et cliquez sur "Activer".
• Redémarrez votre navigateur.
• Essayez votre code. Il devrait fonctionner.

Answer 2

Je pense que lorsque vous lisez que Chrome l'a implémenté, ils voulaient dire que c'était dans la version de développement, car ce n'est certainement pas dans la version actuelle v25.

Voir le site CanIUse pour les tableaux de compatibilité : http://caniuse.com/style-scoped

Il en va de même pour Firefox, qui n'est que dans la version alpha actuelle.

Compte tenu du rythme de développement, elle sera intégrée à la version de ces deux navigateurs dans un délai relativement court, mais la réponse courte est qu'elle n'y est pas encore.