Limiter la scope du css externe à un élément spécifique seulement?

Je crée un simulateur mobile qui simule l’apparence et les fonctionnalités d’un iPhone (et d’autres appareils ultérieurement) dans un navigateur Web, en utilisant 100% de javascript, HTML5 et CSS, le simulateur étant entièrement fonctionnel avec uniquement du code côté client.

Tout en essayant d’accomplir cette tâche avec le moins de modifications nécessaires aux projets d’application originaux eux-mêmes pour être hébergés dans le simulateur, j’injecte les balises et dans la tête de la page, puis charge le HTML dans un

écran.

Le problème est que lorsque je charge un nouveau fichier css, il (évidemment) remplace celui que j’utilise pour styliser la page et, par conséquent, certains éléments sont affectés (par exemple, l’arrière-plan change de couleur).

Ma question est la suivante: existe-t-il un moyen de limiter la “scope” d’un fichier .css externe à appliquer uniquement aux objects de l’écran

? Est-ce que cela ferait une différence si au lieu de l’injecter dans de la page, je l’injecte dans un élément dans l’écran

UPDATE La prise en charge de cette fonctionnalité a été supprimée. S’il vous plaît chercher d’autres options

Poste d’origine:

Vous voudrez peut-être regarder des styles de scope; voir http://css-sortingcks.com/saving-the-day-with-scoped-css/ .

L’idée de base est

Cependant, vous êtes à la pointe du progrès en termes de support de navigateur. Voir http://caniuse.com/style-scoped .

Une alternative serait d’utiliser un iframe.

Enveloppez simplement tout votre code css dans le sélecteur pour l’élément parent, dites que c’est un div avec l’id de foo vous feriez comme suit:

 div#foo{ //All your css }

Et le convertir en less de css avec un outil comme http://less2css.org/ , il appenda les bons sélecteurs. Notez que vous devez faire attention manuellement à des choses comme les requêtes @media, etc.

En écrivant ceci, l’équipe

est déconseillée par l'équipe Chrome. En conséquence, j'ai expérimenté certaines approches et publié https://github.com/thgreasi/jquery.scopeLinkTags . Remarque: vous ne devez utiliser cette approche que si vous ne pouvez pas contrôler le fichier CSS importé. Si vous pouvez utiliser SASS / LESS / nothing pour prétraiter votre CSS, vous devriez préférer cela.

Un moyen simple consiste à append une pré-classe avant tout sélecteur dans un fichier CSS.

Je trouve qu’un script grunt peut le faire:

https://github.com/ericf/grunt-css-selectors