Question on CSS Cascade algorithm
I was learning about css cascade algorithm and when trying it out in browser i saw a weird behaviour.
for any css property - an user agent stylesheet is specified as !important cannot be overriden by author style sheet. which is true and correct.
take this example :
user agent stylesheet:
input[type="hidden" i] {
display: none !important;
}
author stylesheet:
input[type="hidden" i] {
display: block !important;
}
in chrome dev tools, it is showing as a author style sheets overrides the user agent by striking the property in user agent. but a tlast the user agent style is computed as expected.
#css #cascade #browser
can anyone tell why is this behaviour in browser?
#css
5 Replies
those are !important because that's an
<input type="hidden">
you can't override those, and for very good reasons
the browser is automatically forcing the hidden input to stay hidden
kinda like an hard-coded thingThanks for the information.
I understand why it is important and i don't want to override it. but to understand why does browser shows like it is overriden in styles panel from the screenshot i have attached.
probably a bug
if you check the "computed" tab, you will see some funky shit
it shows the
display: block at the top, but the display is still set to none
usually, a style at the top of the list is what is being applied by the browser, but this isnt the case for this situationYes, could be. lets try to take this to browser community.
from here on, the best is to look for or file a bug into google chrome, and pray they fix it within a year or so