Utilisation de scoped et @import

Version imprimable

30/05/2013, 12h10
link.80

Utilisation de scoped et @import

Bonjour à tous,

J'utilise sur mon site à plusieurs endroits de la page ce bout de code afin de charger une feuille de style css en fonction des modules utilisés et des besoins dans ma page :

Code:

<style type="text/css" scoped>@import url(style.css);</style>

Tout allait très bien avec les différentes versions de IE, Chrome, Opera, Safari etc. Jusqu’à la sortie de la nouvelle version de Firefox 21.0 qui ne charge plus mes feuilles de styles lorsque je met l'attribut "scoped".

Le code plus bas fonctionne sous Firefox 21.0 mais n'est plus valide en HTML5 :

Citation:

Element style is missing required attribute scoped.

Code:

<style type="text/css">@import url(style.css);</style>

Du coup, je suis un peu perdu. J'ai vu pourtant dans la release de Firefox que l'attribut scoped était désormais pris en compte dans la version 21 mais j'ai l'impression que c'est plutôt l'inverse qui s'est produit...
https://developer.mozilla.org/en-US/...ox/Releases/21

De l'aide à ce sujet serait vraiment la bienvenue...

D'avance merci et salutations.
30/05/2013, 15h03
rodolphebrd

Bonjour,

apparemment l'attribut scoped n'est pas encore finalisé pour Firefox 21 contrairement à ce que dit canIuse.
Vous avez la possibilité d'utiliser ce polyfill: Jquery scoped css plugin
31/05/2013, 16h34
CCyrillus

C'est une belle c@nnerie de la part de ff .

Auparavant il regroupait les styles dans l’entête de la page, il fallait juste insérer les styles en pensant qu'il s'appliqué a l'ensemble du document , contrairement aux recommandation du W3C, et le document etait valide.
Cool , cette recommandation pouvait passer dans les moeurs.

On pouvait donc via un C.M.S. ajouter un champ style , pour les besoins d'un article, sans avoir a éditer les feuilles de style d'un template, ou changer de themes sans devoir reprendre une mise en forme spécifique dans un article dont on ne se souviens plus :) .

Quelle mouche les à piqués ?
Si tu te "scoped" , je te (s)coupe ?
1 coup j'avance, 2 je recule ?

bon , FF n'est plus mon navigateur principal depuis quelques mois. Il devient trop lourding à tout les niveaux à mon gout et je crois bien qu'il va finir dans la même case ou j'ai déja mis IE : navigateur pour tests/références .
++
31/05/2013, 16h47
Bovino

Comme le montre cet exemple tiré du MDN, l'attribut scoped est correctement interprété par Firefox... :koi:
31/05/2013, 17h23
rodolphebrd

Tiens c'est bizarre mais je l'avais testé sur FF au moment où j'avais écris le post précédent et ça ne fonctionnait pas, alors que maintenant oui.

Entre temps je n'ai pas vidé le cache...
31/05/2013, 17h29
Bovino

Non, mais il me semble qu'il y a eu une mise à jour récente de Firefox. ;)
31/05/2013, 17h46
rodolphebrd

Il y a toujours une explication :)
01/06/2013, 10h51
link.80

Citation:

Envoyé par rodolphebrd

Tiens c'est bizarre mais je l'avais testé sur FF au moment où j'avais écris le post précédent et ça ne fonctionnait pas, alors que maintenant oui.

Entre temps je n'ai pas vidé le cache...

Vraiment étrange, il n'y a pas eu de MAJ entre temps... et chez moi ça ne fonctionne toujours pas, j'ai pourtant vidé le cache mais rien n'y fait, en ajoutant l’attribut "scoped" mes styles ne sont plus pris en compte dans la page avec la nouvelle version de Firefox, alors qu’auparavant tout fonctionnait nickel :roll:

Désolé, mais si l'exemple proposé fonctionne avec FF21 pour nous, c'est que le problème ne vient pas de Firefox mais de ton code !
D'ailleurs, en testant
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Attribut scoped</title> </head> <body> <p class="test">Paragraph de test</p> <div class="test"> <style scoped> @import 'scoped.css'; </style> <div>Autre paragraphe de test</div> </div> </body> </html>
Code:

1 2 3 .test{ box-shadow: 0 0 5px 2px gold; }
J'obtiens bien aussi le résultat attendu !

01/06/2013, 11h44
link.80

ok, j'y vois plus clair, merci pour ton aide Bovino, effectivement après quelques essais, le scoped fonctionne...

Sauf que dans mon cas, l'import se fait sur la feuille de style de shadowbox (http://www.shadowbox-js.com/)

J'utilise shadowbox uniquement sur une page spécifique, du coup j'ai mis l'appel de shadowbox en javascript ainsi que des css, directement sur la page en question et non dans le header de tout mon site, afin de charger shadowbox uniquement quand un module ou j'ai besoin de shadowbox est utilisé...

Je viens de voir que la div de shadowbox était générée en bas de page avant le </body>, du coup normal que mon css "scoped" ne soit pas pris en compte dans ce cas, il faudrait que je place l'appel du css shadowbox juste avant la balise </body>, dans ce cas précis ça fonctionne...

C'est donc ma façon d'avoir fait les choses qui ne me semble plus tout à fait juste... j'ai pris l'habitude d'inclure les fichiers css et javascript directement dans mon code lorsque ceux-ci sont nécessaire au bon fonctionnement de la page en question...

Des idées, suggestion à me proposer ?