2

I'm writing a single HTML snippet that needs to be inserted into more than one CMS platform. As such I don't know ahead of time what CSS properties will be applied to the various tags in my HTML from the CMS's stylesheets.

Is there some way I can use inline styles in the HTML to tell it to ignore/reset ALL declared styles from the stylesheet that are applied at a tag level?

If I can't use inline styles to do this, can it be done with an external stylesheet?

Joey
  • 10,504
  • 16
  • 39
  • 54
  • You might be able to use `all: unset;` https://codepen.io/anon/pen/NgrGqx – Michael Coker Jun 12 '17 at 18:02
  • That actually looks like it could work, I can appear to do this inline as well. https://codepen.io/anon/pen/XgKmXV - you should put this as an answer :) – Joey Jun 12 '17 at 18:05
  • @Joey you might want to check support for this before using it https://developer.mozilla.org/en/docs/Web/CSS/all – Huangism Jun 12 '17 at 18:11
  • The catch with `all` is browser support -- no good in any version of IE or Edge. (The MDN page is out of date I think; Safari supports it now: http://caniuse.com/#search=all ) It's the only real way to do what you want, though, short of sandboxing the snippet in its own iframe. – Daniel Beck Jun 12 '17 at 18:11
  • The top answer here shows a way to do it in IE as well: https://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only – Joey Jun 12 '17 at 18:19

1 Answers1

2

Depending on the browser support, you can use the all CSS property. Here is a reference https://developer.mozilla.org/en/docs/Web/CSS/all

a {
  color: red;
}

li {
  list-style: square;
}

div {
  border: 1px solid black;
  padding: 1em;
}

div:first-child * {
  all: unset;
}
<div>
  <a href="#">link</a>
  <ul>
    <li>asdf</li>
  </ul>
</div>

<div>
  <a href="#">link</a>
  <ul>
    <li>asdf</li>
  </ul>
</div>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • I can use the top answer here to do it in IE as well: https://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only - I guess this means this was a duplicate question though :P – Joey Jun 12 '17 at 18:19
  • 1
    @Joey Watch your language. This isn't reddit. – Rob Jun 12 '17 at 18:20
  • I don't like reddit either. I'm a 4chan user. – Joey Jun 12 '17 at 18:28