Geek Answers Handbook

Encapsulate css

I make a report, and inside the report I have to send emails from different providers, these letters have their own css (usually built-in css, but sometimes they use common styles). I usually use iframes to encapsulate css so that it doesn't break mine, but I can't use it now.

Is there a way to encapsulate css without using iframes?

here is an example of the problem i have:

<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>

I could extract the html structure and just get what is on the body, but then not all my letters will look as they should. Also, the html must be valid, so any suggestions will be great!

+7
source share
2 answers

You can add #email to your css selectors, making them applicable only to your div.

For example, change

.classname { display: block }

to

#email .classname { display: block }

Edit: If you don't have control over email CSS, as the arksana suggests, consider using LESS . Smaller is a CSS preprocessor that allows you to embed CSS selectors. If you include less.js, you can do something like this:

 #email { CSS goes here }

less.js will parse this and convert it to CSS.

+5
source

You can try checking the css e-mail part for collisions with your own class names. I just found this post that might be useful for you: List of famous CSS classes using Javascript

+1
source

More articles:


All Articles