CODEWITHSUNDEEP
javascripthtmlcss
avi dahan
avi dahan

Reputation: 559

Protect element from global css

My js is embedded on a third party website and it creates an <iframe> which contains a simple comments panel , but apparently on this specific website there is a CSS stylesheet which styles every <iframe> tag in the dom with the !important flag , so i can't change those css rules and the website dev team won't change this behaviour, there is another way to overcome this? can i change the tagname and still be an iframe? anything?

Upvotes: 3

Views: 2288

Answers (2)

gd_silva
gd_silva

Reputation: 1025

You can use the all property with the initial value to default the styles for that element.

From the docs:

The all CSS shorthand property sets all of an element's properties (other than unicode-bidi and direction) to their initial or inherited values, or to the values specified in another stylesheet origin.

A code example:

#div-to-reset-styles {
  all: initial;
  * {
    all: unset;
  }
}

Just target your specific iframe and you should be fine.

Upvotes: 3

Hoff
Hoff

Reputation: 39826

CSS Specificity is your friend here. From this overview:

  1. Specificity determines, which CSS rule is applied by the browsers.
  2. Specificity is usually the reason why your CSS-rules don’t apply to some elements, although you think they should.
  3. Every selector has its place in the specificity hierarchy.
  4. If two selectors apply to the same element, the one with higher specificity wins.
  5. There are four distinct categories which define the specificity level of a given selector: inline styles, IDs, classes, attributes, and elements. ...

The part in bold means that you can add a class to your element(s) in question and override the more generic iframe css definition like that.

Upvotes: 0

Related Questions