Comment appliquer des styles css dans un widget d'intégration

Question

Je crée des widgets pour des sites que je ne possède pas.

Après l'injection html, je fais ce qui suit pour le style du widget:

var style = document.createElement('style'), 
    stylesString = 'minified css with a prefix for each selector eg. .my-prefix p {... }', 
    rules = document.createTextNode(stylesString); 

style.type = 'text/css'; 
if(style.styleSheet) { 
    style.styleSheet.cssText = rules.nodeValue; 
} else { 
    style.appendChild(rules); 
} 
document.getElementsByTagName('head')[0].appendChild(style); 

Mais sur certains sites mes styles sont surchargées.

Existe-t-il un moyen d'appliquer les styles plus précisément?

Je ne veux pas (ne peut pas) à utiliser:

• iFrame
• importante sur tous les biens

Answer 1

Ceci est probablement causé par les éléments en question soit ayant styles en ligne sur eux (pour lequel vous devrez utiliser !important pour remplacer, si vous souhaitez utiliser votre méthode actuelle d'ajout de styles), ou ayant des styles avec un selector precedence plus élevé. Ma suggestion serait de rendre vos sélecteurs plus spécifiques en ajoutant au moins un id à eux - même si cela ne garantit pas encore que vos sélecteurs seront toujours les plus spécifiques. Cela dépend entièrement de la qualité de la feuille de style sur le site d'origine.