2013-02-28 3 views
8

Das einfachste Beispiel für scoped Stil nicht in Chrome funktioniert (v 25):CSS <style scoped> außerhalb des Anwendungsbereichs gilt

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

Probieren Sie es aus: http://jsfiddle.net/RWW8r/2/

Beide h1 rot werden :

enter image description here

der Umfang Stil nur auf den zweiten h1 gelten sollte.

Ich habe gelesen, dass die Funktionalität in Chrome implementiert wurde, warum funktioniert das nicht? Mache ich etwas falsch?

Antwort

9

Sie machen nichts falsch. Ab diesem Zeitpunkt ist scoped CSS immer noch eine experimentelle Funktion, die von keinem aktuellen Browser unterstützt wird.

Wenn Sie jedoch mit ihm in Chrome spielen, um möchten, können Sie das Folgende tun:

  • Zum chrome: // flags/in Ihrem Chrome-Browser;
  • Suchen Sie "Aktivieren Sie experimentelle WebKit-Funktionen." und klicken Sie auf aktivieren
  • Starten Sie Ihren Browser neu.
  • Versuchen Sie Ihren Code. Es sollte funktionieren.
+3

nicht von jedem aktuellen Browser unterstützt ist nicht korrekt, es wird von Firefox unterstützt. – pilavdzice

+3

@pilavdzice Die Antwort war zu der Zeit im Februar 2013 gültig. Das ist mehr als vor anderthalb Jahren. ;) –

+1

Ich bin so froh, wenn Chrome mit dieser Funktion live geht. Ich genieße es in Firefox, aber ich brauche Chrome, um diese Funktion zu veröffentlichen, bevor ich wirklich damit verrückt werden kann. Dies ist eines dieser Merkmale, das die ganze Zeit hätte sein sollen. Es ist großartig für Module. –

2

Ich denke, wenn Sie lesen, dass Chrome es implementiert hat, bedeutet das, dass es in der Entwicklungsversion war, weil es sicherlich nicht in der aktuellen Version v25 ist.

Siehe CanIUse Website für die Kompatibilität Charts: http://caniuse.com/style-scoped

Gleichfalls Firefox gilt; Es ist nur in der aktuellen Alpha.

Angesichts der Geschwindigkeit der Entwicklung wird es in der Release-Version dieser beiden Browser in einer relativ kurzen Zeit sein, aber die kurze Antwort ist, dass es jetzt nicht da ist.

+1

Ich versuchte Chrome Canary und es funktioniert auch nicht. Ich habe eine Website gefunden, die besagt, dass Sie sie aktivieren müssen. http://www.impressivewebs.com/scoped-styles-html5/ Ich bin aber mit Ihnen einverstanden, es ist viel zu früh, damit viel zu tun. – MiniRagnarok

+3

Aaaund es ist weg. Chrome entfernt es 37 – voodoocode