18041 sujets

Questions générales et questions de débutants

Controler l'inheritance css

Bonjour

je recherche un moyen pour empêcher un feuille css d'agir sur un div et tout son contenu

j'importe avec javascript des centaines de "widget html" différents dans plusieurs sites
mon souci est que mon code est parfois modifier par les règles css du site
(vu le nombre très important de widgets différents et de sites, je ne peux faire du cas par cas)

j'ai pu voir un nouvelle propriété encore expérimental (apparemment)
(http://www.w3.org/TR/css3-cascade/#all-shorthand)
.btn {
    all: default;
}

je l'ai quand même testée sans succès ...

Si vous connaissez une solution
je suis preneur
Merci de votre aide
Bonjour Nicerico.

"Nicerico" a écrit :
je recherche un moyen pour empêcher un feuille css d'agir sur un div et tout son contenu

N'as-tu pas un moyen d'identifier les balises div que tu ne désires pas impacter par ta feuille de styles ?

Par exemple, tu fais un style général sur toutes les div.
Tu sélectionnes certaines div en mettant une class de nom ".non".
Et bien tu déclares :

div:not(.non) {
		background-color	: red;
}

Tu auras l'arrière plan rouge, sauf sur le div qui a la class ".non".

@+
Modifié par tournikoti (25 Oct 2013 - 12:25)
Bonjour,

à ma connaissance, tu ne peux pas empêcher une feuille de style d'agir sur telle ou telle div.Tu devrais préfixer tes nom de class pour éviter ce genre de problèmes ou utiliser des sélecteurs moins permissifs que .btn en spécifiant un id parent par exemple.

Il y a moyen de donner du poids aux propriétés avec !important, le problème c'est que tu vas créer le problème inverse en modifiant la présentation de tes widgets.
bonjour,

tu peut integrer tes styles dans ton widget a l'aide de la balise style et son attribut scoped.
ex:
<body>
<!-- HTML CONTENT -->
<div><!-- portée avec un reset CSS -->
<!-- start scoping -->
<style media="all" scoped>
 h1, h2 {font-family:courier; float:none;}
p {margin:0;color:white;background:black;border:none;}
/* ect.. */
</style>
<!-- contenu quelconque balisé
....
....
 -->
<!-- end scoping -->
</div><!-- fin de la portée du reset style CSS -->

Infos pratique: http://html5doctor.com/the-scoped-attribute/
++
Sujet clos
Aller à