CSS für einen bestimmten Bereich der Seite zurücksetzen?

Ich arbeite an einem CMS. Eine seiner Funktionen ist das Bearbeiten von HTML- "Chunks" in einem WYSIWYG-Editor, die als einzelne Seiten angezeigt werden.

Ich habe einen Bereich im CMS, in dem diese Abschnitte in der Vorschau angezeigt werden.

Die Chunks basieren auf einer "foundation.css" -Datei, die in den WYSIWYG-Editor geladen wird. Es führt einige kleine Zurücksetzungen durch, definiert eine Standardschriftart und eine Standardtextfarbe und ist insgesamt sehr einfach.

Das CMS enthält natürlich eine Vielzahl von CSS-Anweisungen, von denen viele allgemeine Einstellungen wie Schriftgröße, Familie, Farbe, Zeilenhöhe, Auffüllungen und dergleichen betreffen.

Wenn ich versuche, einen HTML-Block auf einer CMS-Seite anzuzeigen, sieht er natürlich anders aus, als wenn er nur mit dem Stylesheet foundation.css angezeigt wird.

Kann sich jemand eine Möglichkeit vorstellen, einen definierten Bereich in einer HTML-Seite (z. B. einen DIV) von allen vorherigen Stildefinitionen zu bereinigen? Ich kann nicht

Ein Iframe, der den Chunk anzeigt und foundation.css einbettet, würde helfen, aber ich fürchte um den Workflow des Benutzers, wenn 5-10 IFrames gerendert und dann über JS in der Höhe angepasst werden müssen, sobald sie geladen sind. Yuck.

Ich habe darüber nachgedacht, alle anderen CSS in eine Unterklasse zu "heben" (d. H. Das CSS des CMS anzupassen), aber das würde das Berühren vieler Dateien, wahrscheinlich einiger PHP-Quellcodes, erfordern, und das würde ich lieber nicht tun.

Ich glaube nicht, dass dies eine Lösung hat, aber Sie wissen es nie.

Antworten auf die Frage(5)

Ihre Antwort auf die Frage