encapsulate css

Question

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!

Yes! Use the scoped attribute. I don't believe it's supported anywhere yet, however. (Well, you can turn it on in Google Chrome in chrome://flags.) — Ry-
– Ry- ♦, Commented Aug 28, 2012 at 20:14
I do use classes, let me explain better in the question how emails are breaking my css — Hassek
– Hassek, Commented Aug 28, 2012 at 20:30
ohhh the scoped attribute it's probably was I was looking for but it doesn't work for any major browser yet :'( w3schools.com/html5/att_style_scoped.asp — Hassek
– Hassek, Commented Aug 28, 2012 at 20:41
I wish I could simultaneously enter every single persons computer and block out w3schools from their search results. just saying — rlemon
– rlemon, Commented Aug 28, 2012 at 20:46

Hayk Martiros · Accepted Answer · 2012-08-28 20:23:05Z

5

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.

edited Aug 28, 2012 at 20:23

answered Aug 28, 2012 at 20:16

Hayk Martiros

2,19620 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Waleed Khan Over a year ago

I think the issue is that the styles are being loaded and he has no control over them.

Hayk Martiros Over a year ago

Thanks arxanas for the clarification, I added a suggestion for this scenario.

Hassek Over a year ago

yep I have no control over the css since is part of an email

Heretic Monkey Over a year ago

Well, you did say you could process the HTML (or rather "extract the HTML structure"). If you can do that, then you can extract the rules from the <style> element, and prepend #email in front, or use less.js as @hayk.mart suggests. Currently the HTML presented is not valid.

Community · Accepted Answer · 2017-05-23 10:29:23Z

1

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

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Aug 28, 2012 at 20:15

Andre

6091 gold badge8 silver badges20 bronze badges

1 Comment

Andre Over a year ago

I see. He could try to replace those collisions with slightly modified identifiers. But that would't be as easy as to simply use css only like hayk.mart

Collectives™ on Stack Overflow

encapsulate css

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related