Encapsulate css

Ich mache einen Bericht und innerhalb des Berichts muss ich E-Mails von verschiedenen Anbietern rendern, diese E-Mails kommen mit ihren eigenen CSS (in der Regel inline css aber manchmal gelten sie allgemeine Stile). Normalerweise benutze ich iframes, um css einzukapseln, damit es meine nicht zerstört, aber ich kann es jetzt nicht benutzen.Encapsulate css

Gibt es eine Möglichkeit, CSS ohne die Verwendung von iFrames zu kapseln?

hier ist ein Beispiel für das Problem, das ich habe:

<html> 
    <head> 
    <style> 
     // I enclose it to content so it doesn't override the email css 
     #my_content table, #my_content p { 
     color: black; 
     } 
    </style> 
    </head> 
    <body> 
    <div id='my_content'> 
     ... some stuff ... 
    <div id='email'> 
     <html> 
      <head> 
      <style> 
       table { 
       margin-left: 100cm; // screws up all my tables 
       } 
       .... some styles that should only apply inside the email div ... 
      </style> 
      </head> 
      <body> 
      .... email content ... 
      </body> 
     </html> 
     </div> 
    </div> 
    </body> 
</html>

ich die HTML-Struktur extrahieren könnte und bekommen genau das, was auf dem Körper ist dann aber nicht alle meine E-Mails aussehen werden, wie es sollte. Auch der HTML-Code muss gültig sein, damit alle Vorschläge gut sind!

Quelle

2012-08-28 Hassek

Sie verwenden also keine Klassen? – ChaosPandion

Ja! Verwenden Sie das Attribut "Bereich". Ich glaube jedoch nicht, dass es bisher irgendwo unterstützt wird. (Nun, Sie können es in Google Chrome in 'chrome: // flags' aktivieren.) – Ryan

Ich benutze Klassen, lassen Sie mich besser in der Frage erklären, wie E-Mails brechen meine CSS – Hassek

Sie könnten versuchen, den E-Mail-CSS-Teil für Kollisionen mit Ihren eigenen Klassennamen zu überprüfen. Ich fand gerade diese Stelle, die für Sie nützlich sein könnten: Listing known CSS classes using Javascript

Quelle

2012-08-28 20:15:49 Andre

Sobald das erledigt ist, was soll er tun? –

Ich sehe. Er könnte versuchen, diese Kollisionen mit leicht modifizierten Bezeichnern zu ersetzen. Aber das wäre nicht so einfach wie einfach css nur wie hayk zu verwenden. Mart – Andre

Sie #email zu Ihrem CSS-Selektoren voranstellen können, so dass sie nur auf Ihre div anwenden.

Zum Beispiel ändern

.classname { display: block }

#email .classname { display: block }

Edit: Wenn Sie keine Kontrolle über die E-Mail-CSS als arxanas haben schon sagt, betrachten LESS verwenden. Less ist ein CSS-Präprozessor, der das Verschachteln von CSS-Selektoren ermöglicht. Wenn Sie less.js sind, dann können Sie etwas tun:

#email { 
    CSS goes here 
}

less.js wird diese analysieren und es zu CSS konvertieren.

Quelle

2012-08-28 20:16:04

Ich denke, das Problem ist, dass die Stile geladen werden und er hat keine Kontrolle über sie. –

Dank arxanas für die Klarstellung, fügte ich einen Vorschlag für dieses Szenario O. –

Yep ich habe keine Kontrolle über die CSS seit ist Teil einer E-Mail – Hassek

Encapsulate css

Antwort

Verwandte Themen