W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2016

Re: [csswg-drafts] [css-mediaqueries] “inner” `@media` rules

From: Zambonifofex via GitHub <sysbot+gh@w3.org>
Date: Sat, 10 Dec 2016 20:48:11 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-266237321-1481402890-sysbot+gh@w3.org>
@LeaVerou

No, custom property sets don’t cascade together. In your code, the 
buttons would either have a red text color (when not on a screen), or 
a blue background color (when on a screen), but never both.

>From an example in Tab’s proposal:

> Note that custom property sets override each other wholly, rather 
than cascading together like colliding style rules do.
> For example, if these two style rules applied to the same element:
>
>```
> .foo {
>   color: red;
>   background: white;
> }
> #bar {
>   color: blue;
> }
>```
>
> The `#bar` rule will win due to having a higher specificity, so its 
`color:blue` rule will apply to the element, but the 
`background:white` rule from the `.foo` rule also applies, since the 
`#bar` rule did not override `background`.
>
> However, if these were instead defined as custom property sets:
>
>```
> .foo {
>   --my-theme: {
>     color: red;
>     background: white;
>   };
> }
> #bar {
>   --my-theme: {
>     color: blue;
>   };
> }
>```
>
> Then when an element uses the `--my-theme` custom property set, it 
will receive only the `color:blue` declaration. The `background:white`
 declaration from the `.foo` rule is ignored completely, as its rule 
lost the specificity battle.

In my code, on the other hand, buttons would always have a red text 
color.

-- 
GitHub Notification of comment by Zambonifofex
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/531#issuecomment-266237321 
using your GitHub account
Received on Saturday, 10 December 2016 20:48:18 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:30:27 UTC