3

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?

avi dahan
  • 539
  • 3
  • 19
  • is it possible for you to post the URL and give a bit more description of what you want to achieve? – He Wang Nov 27 '18 at 10:00
  • @Speir the url is currently blocked for the world, but that's quite simple to explain , the main page has something like that : "iframe { height : 20px !important;}" so every iframe in the page will have "height:20px" and i can't change it – avi dahan Nov 27 '18 at 10:03
  • Why not just give your iframe a unique ID or class to overwrite the site CSS? – He Wang Nov 27 '18 at 10:06
  • Can you show the styles you are trying to override – Pete Nov 27 '18 at 10:18
  • @Pete something like that : "iframe { height : 20px !important;}" – avi dahan Nov 27 '18 at 10:18
  • 1
    you can add an inline style to the iframe with important too and that will take precedence - important is usually only used to override any inline styles, so an inline style with important should rule all – Pete Nov 27 '18 at 10:19
  • @Pete i know but for that i will need to change my code logic because you can't set the "!important" flag via the style property , i thought there might be an easy way out , like changing the iframe tag name but still be an iframe – avi dahan Nov 27 '18 at 10:21
  • 1
    https://stackoverflow.com/questions/11150684/can-i-override-inline-important surely adding a style attribute will be easier than hacking up some non iframe version – Pete Nov 27 '18 at 10:22
  • Also if it is your code on their site - surely it should be them fixing their code to make it work, not you tailoring your code otherwise what happens when the next user wants a different implementation again? – Pete Nov 27 '18 at 10:25

2 Answers2

2

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.

gd_silva
  • 997
  • 2
  • 11
  • 17
  • Won't work , the "!important" flag overrides everything – avi dahan Nov 27 '18 at 10:12
  • Using `!important` is almost always a bad practice but, since you can't change that page's code, you can add `!important` to this code. That way, you override the other `!important`. If your rules have more specificity, they will override the others. – gd_silva Nov 27 '18 at 10:14
  • yeah i know but i can't change this, and yes i can override the !important but i will need to change all my js logic because you can't set "!important" via the style property, i thought there might be another way like changing the tag name and still be an iframe – avi dahan Nov 27 '18 at 10:17
  • Couldn't you just add an id to the `iframe` and handle that? – gd_silva Nov 27 '18 at 12:08
0

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.

Hoff
  • 38,776
  • 17
  • 74
  • 99