0

I have created a webmail client application developed via AngularJS

The email body that is displayed is in HTML form. My problem is that there are email from customers that import css and overide my application css : 

@import url("https://some.web.site/main.css");
href="https://some.web.site/css/stylesheet.css" rel="stylesheet" type="text/css"

I've investigated a little bit and found that iframe isolates the content from the web page however it is considered bad practice.
Other alternatives presented in here are object and embed but they seem very similar
All require providing some src (url link)
My question is: is there a way to wrap a div that its internal content is some html that have its own styling without affecting the main (parent) elements styling (css)?

liorafar
  • 2,264
  • 4
  • 19
  • 39
  • 1
    `iframe` may be the exact solution you need. It is only a bad practice to use iframe incorrectly. This seems like an appropriate case. (Pretty much every web client does that.) – BugsArePeopleToo Apr 22 '19 at 14:24
  • `iframe` does NOT work in email. https://mailchimp.com/help/limitations-of-html-email/#Do_Not_Use – gwally Apr 24 '19 at 18:21

1 Answers1

0

In email, you can handle css styling in three different ways, listed below in the support they have for email clients:

Inline Style:

<p style="font-weight: bold;">&nbsp;</p>

Internal Style sheet:

<style>
  p {font-weight: bold;}
</style>

External Style sheet:

<link rel="stylesheet" type="text/css" href="mystyle.css">

The best all-around approach is to use an Internal Style Sheet. It works with most email clients and if you are doing responsive development, it's the most common supported way to do @madia queries. The problem with an External Style sheet is that Outlook and Gmail will not work with one, which really limits the audience.

You should run a script for Angular to pull out the styles used in your email and collate them in a style sheet in the head of your html email.

Good luck.

gwally
  • 3,349
  • 2
  • 14
  • 28
  • Thanks however I dont create the email. The email is a third party that my webmail client presents. I was trying to avoid the css of the email that affected the webmail client application css. Anyhow I think that only way is to isolate the mail presentations using iframes – liorafar Apr 28 '19 at 11:31
  • `iframe` doesn't work in email. - https://mailchimp.com/help/limitations-of-html-email/#Do_Not_Use – gwally Apr 29 '19 at 02:28