CODEWITHSUNDEEP
css
lgc_ustc
lgc_ustc

Reputation: 1664

Make widget "inherit-proof"

We are developing a widget that is intended to be embedded into 3rd party websites. The way it's embedded is dynamically injecting a div inside the body part of the page, using Javascript.

On a page without any or few style rules, the widget looks fine. The problem is: we are seeing various visual issues caused by the widget's style rules overriden by the web page (let's call it host page) it's on, when the host page has many CSS rules, some of which happen to trump the widget's if the widget does not define those rules explicitly (thus the widget inherits these from the host page).

It seems to me the obvious solutions to this is: define ALL CSS rules for each of the elements in the widget. When I say ALL, I mean all CSS rules like background color, etc. for all states like normal, focused. This obviously is a brutal force method, and can result in a good amount of work for just a simple widget. This doesn't really seem too smart.

So my question is: is there any clear-cut facility that allows one to prevent the host page's styles from messing around the widget's?

To give an example, let's say the host page has a CSS rule like this:

div {
  border-bottom: 1px solid green;
}

This rule sets the bottom border to transparent for all div's. Then we merrily define a whole bunch of rules in our widget, except we forget to define the border-bottom rule. In such a situation, all the div's bottom borders are green.

While it's reasonable to add a border-bottom rule for the widget to address this particular issue, the real problem is: you can't control what rules are present on the host page, therefore, in order to be really safe, you have to define ALL rules for ALL elements in the widget for ALL states, which is really cumbersome and error prone for me.

We are aware using iframe would be immune to such issues, but we prefer not to use it, and let's keep it out of the discussion.

We are also well aware of the method to use !important in CSS rules to override previous rules. But this still requires defining full CSS rules (i.e., the brutal force method). Please keep it out of the discussion too.

Thanks.

Upvotes: 0

Views: 271

Answers (1)

web-tiki
web-tiki

Reputation: 103760

The all: initial; CSS property is what you are looking for :

The CSS all shorthand property resets all properties, apart from unicode-bidi and direction, to their initial or inherited value. [MDN]

but it currently has low browser support.

Here is an example of how it can be used :

div div {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 10px;
  background: gold;
  border-bottom:5px solid green;
}
#wrap div {
  all: initial;
  display:block;
  height:10px;
  background:pink;
  margin:1px;
}
<div>
  <div></div>
  <div></div>
</div>
<div id="wrap">
  <div></div>
  <div></div>
</div>

Upvotes: 1

Related Questions