CSS {all: initial} to prevent widgets inheriting CSS from a host page

Imagine you have some sort of widget – an ad box, a sign-up form, some execrable collection of social buttons, whetevs – that you’re injecting into arbitrary pages using JavaScript. You don’t want your widget to get weirdly styled by the host page’s CSS. This is when you want to undo the CSS.

Enter all: initial. This resets all CSS properties to their initial value, and undoes browser stylesheets – in this example, the blockquote is no longer indented or display:block; as you’d expect.

Other values for the property are inherit, which changes all the properties applying to the element or the element’s parent to their parent value, and unset which changes all the properties applying to the element or the element’s parent to their parent value if they are inheritable or to their initial value if not.

They’re supported in Opera, Firefox and Chrome. The Mozilla Developer Network page has good examples of these.

What’s curious, though, is that the value that would be the most useful isn’t there at all. I wouldn’t want to completely strip away User Agent styles and then have to reset elements to display block-level and then indent them in CSS. I wonder why there’s no all: ua-default (or somesuch) to reset them to the User Agent style sheet default?

Update: Saperlipopette! There’s a very good French-language post La cascade CSS avancée: all, initial et unset for those who speak Oohlala.

5 Responses to “ CSS {all: initial} to prevent widgets inheriting CSS from a host page ”

Comment by Šime Vidas

But setting all:initial on the widget root isn’t enough “to prevent widgets [from] inheriting CSS from a host page”, as the widget’s descendants still inherit the page’s styles. Unless you mean a rule like `.widget-wrapper * { all: initial }`, i.e. disabling all styles on all of widget’s elements.

Comment by Šime Vidas

The problem with `.widget-wrapper * { all: initial }` on the other hand is that the widget’s <style>, <script>, etc. is displayed on the page (since the browser styles which hide them are killed). One has to be careful with this CSS all.

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.