0

We are building an internal tool for creating email signatures. We want to have a “preview” window that shows what the email signature will look like after their information has been entered (name/email/title etc). The signatures are styled with inline CSS.

How do we place this HTML without inheriting parent CSS from our site? It currently things like our company font, text color, etc.

dwashburn
  • 37
  • 1
  • 1
  • 8
  • 1
    The use of an `iframe` is the first thing I think of... – Louys Patrice Bessette Jan 27 '18 at 17:56
  • I hadn’t thought of that. I’ve been researching “Shadow DOM” as well. I could have an iframe and dynamically place the contents inside it. That’s a helpful thought. – dwashburn Jan 27 '18 at 17:58
  • This may help too: https://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only – IncredibleHat Jan 27 '18 at 18:29
  • Holy crap. That’s exactly what I’m looking for. A little obnoxious you have to define every attribute and reset it but this is perfect. Thank you! – dwashburn Jan 27 '18 at 19:21
  • @IncredibleHat if you want to submit that as the answer I’ll give it to you. Everyone provided great suggestions but this is the easiest way for me to do it by far. – dwashburn Jan 27 '18 at 20:06
  • Well its not my answer, its another post ;) I cannot just take credit for it. – IncredibleHat Jan 27 '18 at 20:14

1 Answers1

1

Try to define new HTML elements, so you're sure you do not inherit parent css properties, but this approach would bring some problems such as SEO and others..

pierDipi
  • 1,388
  • 1
  • 11
  • 20
  • Thankfully this will be for internal use only, so SEP shouldn’t be a concern for us! Thanks for the suggestion. – dwashburn Jan 27 '18 at 19:19