Réinitialisation des valeurs par défaut css au navigateur pour un seul élément dans google chrome

Question

Mon extension de navigateur intègre un élément div aux pages Web ouvertes par le navigateur à la volée. div contient plusieurs éléments enfants tels que des boutons, des plages, des boîtes de saisie, etc.

Problème lorsque div est inséré dans la page, le CSS de la page affecte le div et son contenu.

Par exemple, si la page a un autocommutateur comme:

span { 
text-shadow: 1px 1px 1px blue; 
} 

alors les portées dans mon à la volée ajouté div des ombres de bleu. Qu'est-ce que je fais pour résoudre ce problème est de définir une éventuelle directive qui pourrait affecter le contenu de mon div! Important, comme

mydiv span { 
    text-shadow: none !important; 
} 

et il est des ordures.

Existe-t-il un moyen sensé de remplacer css pour un élément donné, qui le ramènera aux paramètres par défaut du navigateur (google-chrome)?

Merci.

Answer 1

est-il un moyen sain d'esprit pour réinitialiser le code CSS à défaut du navigateur pour un seul élément?

Malheureusement, non. La valeur auto agit comme valeur par défaut dans certaines conditions, mais pas toujours, et vous devez toujours le spécifier pour chaque propriété possible. C'est quelque chose à propos de CSS qui est vraiment nul.

Une idée me vient à l'esprit, cependant. Voyant que vous demandez spécifiquement sur Chrome, si vous contrôlez toutes les classes CSS et ne vous dérange pas un peu de bruit, vous pourriez être en mesure de travailler avec not de CSS3 comme ceci:

span:not(.default) { 
text-shadow: 1px 1px 1px blue; 
} 

Si vous utilisez not(.default) dans tous les règle CSS, vous pouvez avoir des éléments qui ont le comportement par défaut si vous leur donnez la default classe:

<div class="default"> 

Je n'ai aucune expérience personnelle avec CSS 3, mais cela devrait fonctionner. Il ne fonctionnera pas dans les navigateurs plus anciens, donc ce n'est pas (encore) vraiment compatible avec le courant principal.

Answer 2

Vous ne pouvez pas « reset » règles CSS, vous devez les remplacer (text-shadow:none;)