[Résolu] "Supprimer" des instructions CSS sur une partie de

Bonjour !

Je suis en train de travailler sur un webmail relativement simple, et il me cause des petits soucis... Je récupère les mails dans leur format html s'il existe et je les affiche dans ma page, dans un div d'id message.

J'ai tout un bunch d'instructions css pour encadrer :

#message IMG{margin-top:0;margin-bottom:0;height:auto;width:auto}
#message ADDRESS,#message BLOCKQUOTE,#message BODY,#message DD,#message DIV,#message DL,#message DT,#message FIELDSET,#message FORM,#message FRAME,#message FRAMESET,#message H1,#message H2,#message H3,#message H4,#message H5,#message H6,#message IFRAME,#message NOFRAMES,#message OL,#message P,#message UL,#message CENTER,#message DIR,#message HR,#message MENU,#message PRE{display:block;}
#message OBJECT,#message APPLET{display:inline;}
#message LI{display:list-item;}
#message HEAD{display:none;}
#message TABLE{display:table;border-collapse:separate}
#message TR{display:table-row;}
#message THEAD{display:table-header-group;}
#message TBODY{display:table-row-group;}
#message TFOOT{display:table-footer-group;}
#message COL{display:table-column;}
#message COLGROUP{display:table-column-group;}
#message TD,#message TH{display:table-cell;}
#message CAPTION{display:table-caption;}
#message TH{font-weight:bolder;text-align:center;}
#message CAPTION{text-align:center;}
#message BODY{padding:8px;line-height:1.12em;}
#message H1{font-size:2em;margin:.67em 0;}
#message H2{font-size:1.5em;margin:.83em 0;}
#message H3{font-size:1.17em;margin:1em 0;}
#message H4,#message P,#message BLOCKQUOTE,#message UL,#message FIELDSET,#message FORM,#message OL,#message DL,#message DIR,#message MENU{margin:1.33em 0;}
#message H5{font-size:.83em;line-height:1.17em;margin:1.67em 0;}
#message H6{font-size:.67em;margin:2.33em 0;}
#message H1,#message H2,#message H3,#message H4,#message H5,#message H6,#message B,#message STRONG{font-weight:bolder;}
#message BLOCKQUOTE{margin-left:40px;margin-right:40px;}
#message I,#message CITE,#message EM,#message VAR,#message ADDRESS{font-style:italic;}
#message PRE,#message TT,#message CODE,#message KBD,#message SAMP{font-family:monospace;}
#message PRE{white-space:pre;}
#message BIG{font-size:1.17em;}
#message SMALL,#message SUB,#message SUP{font-size:.83em;}
#message SUB{vertical-align:sub;}
#message SUP{vertical-align:super;}
#message S,#message STRIKE,#message DEL{text-decoration:line-through;}
#message HR{border:1px inset;}
#message OL,#message UL,#message DIR,#message MENU,#message DD{margin-left:40px;}
#message OL{list-style-type:decimal;}
#message OL UL,#message UL OL,#message UL UL,#message OL OL{margin-top:0;margin-bottom:0;}
#message U,#message INS{text-decoration:underline;}
#message CENTER{text-align:center;}

(désolée, c'est juste pour montrer que j'ai redéfini plein de trucs)

Mais j'ai reçu un mail qui a le malheur de contenir une div de class "box" ; or, j'ai défini un style pour des objets de class "box" qui n'ont strictement rien à voir question design ! J'ai ai notamment défini un background, qui apparait donc dans mon mail...

Ai-je un moyen de dire "toutes les balises et les classes définies dans le CSS ne doient pas avoir d'effet sur les enfants de #message, mon conteneur de mail" ?
Ou bien suis-je condamnée à redéfinir #message .box (ainsi que d'autres classes si cela venait à se reproduire) ?

Merci d'avance
Modifié par AkaiKen (06 Jul 2011 - 11:07)

Bonjour,

AkaiKen a écrit :
Ai-je un moyen de dire "toutes les balises et les classes définies dans le CSS ne doient pas avoir d'effet sur les enfants de #message, mon conteneur de mail" ?

Non, pas de vrai reset en CSS. Tu peux éventuellement utiliser une IFRAME pour afficher ton message sans que les styles de l'interface ne s'appliquent.

AkaiKen a écrit :
Ou bien suis-je condamnée à redéfinir #message .box (ainsi que d'autres classes si cela venait à se reproduire) ?

Si tu n'utilises pas d'IFRAME pour isoler les styles, tout redéfinir à la main n'est pas jouable du tout. L'erreur dans ce cas, pour une interface de ce type, c'est d'avoir utiliser un nom de classe aussi générique que "box". Une solution intéressante: préfixer tous tes noms de classe et identifiants avec un préfixe qui désigne ton application. Si ton appli s'appelle Tartiflette Webmail Deluxe, ça peut donner "tartiflette-box" ou "tflt-box" par exemple. Choisir un préfixe suffisamment distinctif pour limiter les risques de collision.

À noter que c'est une très bonne technique dès que tu livres un code qui doit être utilisé au sein d'un site que tu ne contrôles pas forcément, par exemple pour un plugin de CMS ou un widget JavaScript.
Modifié par fvsch (28 Jun 2011 - 17:30)

Bon. Vu que les iframes, c'est hors de question (à moins de changer drastiquement le code), on va préfixer ! (j'avais vu ces deux méthodes-là, et j'espérais secrètement qu'on m'en propose d'autres...)
Merci !