W3C home > Mailing lists > Public > www-style@w3.org > November 2016

[CSS22] [Section 6.4.2 !important rules] How an user style sheet rule can override an author inline style with !important

From: Gérard Talbot <www-style@gtalbot.org>
Date: Mon, 14 Nov 2016 22:20:37 -0500
To: W3C www-style mailing list <www-style@w3.org>
Cc: Felix Miata <mrmazda@earthlink.net>
Message-ID: <0a0bd0e9f6bcc61643954cf29aa0578a@gtalbot.org>
Hello fellow www-style colleagues,

Let's assume that an H1 element is styled like this:

<h1 style="color: red!important;">Text sample 2</h1>

The origin is author style sheet and the weight (or importance) is 
!important.

How is an user style sheet supposed to override or to take precedence 
over such author inline style with !importance then?

The spec states:

{
Both author and user style sheets may contain "!important" declarations, 
and user "!important" rules override author "!important" rules.
}
6.4.2 !important rules
https://www.w3.org/TR/CSS21/cascade.html#important-rules
https://www.w3.org/TR/CSS22/cascade.html#important-rules

and that requirement does not indicate that the user "!important" rule 
has to have an equal or higher specificity.

In the test

http://www.gtalbot.org/BrowserBugsSection/css21testsuite/cascade-felix-013.xht

author rule is an inline style !important:

<h1 style="color: red!important;">Text sample 2</h1>

while the user style sheet has:

body h1
   {
     color: green!important;
   }

The respective specificity are:

author inline style:  a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0

user style sheet:  a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2

but again, my understanding is specificity should not matter since user 
style sheet for that h1 element has !important. What am I missing here?

For convenience, people can use one of these extensions for that test:

Stylish for Chrome
Latest version: 1.5.2
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe

Stylish for Firefox
Latest version: 2.0.7
https://addons.mozilla.org/en-US/firefox/addon/stylish/

userScriptCSS for Chrome
Latest version: 1.4
https://chrome.google.com/webstore/detail/userscriptcss/pdfbjinabdohnegjnbfgdgohlhegamnm

The "Text sample 2" is red in Firefox 49.0.2, Firefox 53.0a1, Chrome 
54.0.2840.100 when I use one of those extensions.

Gérard
Received on Tuesday, 15 November 2016 03:21:13 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:05 UTC