Menu
I am doing a report and inside the report I have to render emails from different providers, this emails come with their own css (usually inline css but sometimes they apply general styles). I usually use iframes to encapsulate css so it doesn't breaks up mine but I can't use it now.
Is there a way to encapsulate css without the use of iframes?
here is an example of the problem I am having:
<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's on the body but then not all my emails will look as it should. Also the html must be valid so any suggestions would be great!
470
You can prepend #email to your css selectors, making them only apply to your div.
For example, change
.classname { display: block }
to
#email .classname { display: block }
Edit: If you have no control over the e-mail CSS as arxanas suggests, consider using LESS. Less is a CSS preprocessor that allows nesting of CSS selectors. If you include less.js, then you can do something like this:
#email {
CSS goes here
}
less.js will parse this and convert it to CSS.
191
You could try to check the E-Mail css part for collisions with Your own class names. I just found this post which could be helpful for You: Listing known CSS classes using Javascript
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
