28112 sujets

CSS et mise en forme, CSS3

[Résolu] Isolation CSS d'un conteneur

Bonjour,

Il m'arrive d'avoir à insérer un bout de contenu, fortement stylé en CSS, sur un site existant, typiquement une petite anim.

Mais il n'est pas rare que le comportement entre le brouillon (codepen, etc.) et l'application in situ soit très différent.

Bien évidemment, je regarde les héritages avec l'inspecteur de Firefox mais parfois, soit c'est trop compliqué, soit aucune différence n'apparait.

Quel est pour vous le moyen le plus simple et propre d'isoler un conteneur, afin de pouvoir copier/coller un même code sur plusieurs sites et obtenir le même résultat (en ayant pris soin de définir les propriétés nécessaires) ?
Forcément passer par un reset sur le conteneur ? Je n'ai jamais fait ça que pour un site complet mais pourquoi pas...

Merci.
Bonjour,

le seul moyen d'avoir un code totalement isolé est d'utiliser une iframe.

Autrement il faut préfixer toutes tes règles css avec ta propre classe afin que tes propriétés soient prise en compte en priorité.
Oui, l'iframe est une (bonne) solution je pense. Ça fait 10 ans que j'ai pas dû l'utiliser, ça ne me plait pas du tout, mais ça a le mérite de vraiment isoler.

Pour ce qui est du préfixage, si c'était aussi simple... Smiley smile Bien évidemment c'est préfixé, j'ai même tenter un !important sur tous les propriétés, sans que ce soit efficace (en plus d'être bien dégeu).

Je vais donc, à contre cœur, opté pour l'iframe pour l'instant. Merci. edit : bon, en fait j'avais oublié son fonctionnement et à quel point c'était sale. Exit cette solution.

Je suis toujours preneur de meilleurs solutions !
Modifié par escarmouche (26 Sep 2019 - 10:59)
Il faudrait que tu explicites un peu plus clairement ce qui change entre le pen et le site en production si tu veux des réponses plus précises.

Le problème du reset c'est que tu dois aussi reset le reset. Car si quelqu'un a mis par exemple


* {
margin: 0;
padding: 0;
}

(ne pas faire à la maison Smiley cligne )

Cela t'oblige a définir explicitement tous les margins et padding pour les textes que tu vas utiliser.

A mon avis l'iframe convient si tu n'as pas de besoin en terme de SEO pour le contenu que tu ajoutes.
(on peut pas barrer du texte sur ce forum ?)

C'est une question plus globale. Le but est d'isoler dans tous les cas, pas juste dans un cas précis. Et pourquoi c'est un peu plus compliqué que juste mettre quelques id ? Parce que j'ai beau supprimer toutes les règles de cascades que donnent l'inspecteur sur tous les éléments de mon code, j'ai toujours un affichage inattendu.

Par exemple, j'ai fait un * {} sur tous les éléments de mon id en mettant tout ce qui est susceptible de déranger (margin, padding, line-height, box-sizing,...) mais rien d'utile ne change.

L'iframe demande une page externe non ? (j'ai l'impression de reprendre CSS1 là...) Je viens d'essayer un src="#isolation" pour prendre du contenu dans la même page, mais ça reprend toute la page.
Modifié par escarmouche (26 Sep 2019 - 11:20)
Administrateur
Bonjour,

(nan on peut pas barrer de texte. Seuls les bbCode b i url code quote insertion d'image et quelques couleurs sont prévues. Note : le Forum est codé à la main et sa 1ère version doit dater de 2001, à peu près du temps du méga-lourdingue phpBB 2 ou pas loin Smiley ravi )

Il n'y a que l'iframe qui te garantisse 0 souci 0 régression, je confirme.

Solution méthodologique : ne pas styler directement des éléments (donc pas de sélecteur d'élément à la h2 { font-size: 2rem; }). C'est pour ça que des méthodos comme OOCSS, ITCSS, BEM, ACSS et bien d'autres existent. Perso je ne style quasi que des classes et avec un "namespace" pour chaque composant.
Traduction : dans chaque _partial Scss, j'ai idéalement un 1er sélecteur .nom-de-mon-composant qui contient tout le reste des règles de ce composant et j'ai 2 niveaux d'imbrication. Résultat tous les sélecteurs CSS devraient ressembler à ".nom-de-mon-composant .nom-de-mon-composant-truc { }" enfin en théorie hein. Smiley langue

Palliatif quand le mal est fait : il va te falloir un reset des styles sur l'élément que tu insères.
Ce sujet de SO aborde bien le sujet de all: initial; : Reset/remove CSS styles for element only (chaque réponse a des astuces et ne date pas de la même époque, ce n'était pas encore supporté au moment où la question a été posée).
Mais tu trouveras toujours une règle àlc difficile à écraser ou en tout cas pas de garantie de jamais tomber dessus "#id1 element.#id2 { color: #ccc !important; }" avec une spécificité de (2 Smiley sumo , 0, 1) et bien entendu un !important Smiley biggol
Modifié par Felipe (26 Sep 2019 - 11:45)
Meilleure solution
Oh, les piliers du forums sont toujours là Smiley smile

J'ai laissé tomber mes essais avec iframe, vraiment trop sale en terme d'organisation du moins.

Tu penses bien que le code n'est pas forcément de moi. Comme c'est, la plupart du temps, sur du WordPress, il suffit par exemple de quelques plugins malotrus pour que des règles immondes soient ajoutées.

J'avais complétement oublié (et je ne l'ai probablement jamais utilisé) la propriété all ! Ça me semble un très bon départ, merci.

(il est très bien ce vieux forum et je suis ravi de ne pas y voir une avalanche de gif animés ridicules, inutiles et consommateurs de BP)
Modifié par escarmouche (26 Sep 2019 - 12:10)
Sujet clos
Aller à