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.
Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)
6 Responses to “ CSS {all: initial} to prevent widgets inheriting CSS from a host page ”
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.
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.
Thanks for this I have been having lots of trouble with the widgets a website I am working on at the moment and this seems to have sorted it out for me. So thanks again 🙂
all: ua-default is all: revert but unfortunately has only been implemented in Safari 🙁
Thank you for this information. Now I know what to do in order to develop widgets for our application.