W3C home > Mailing lists > Public > www-style@w3.org > April 2014

Re: [css-variables] Another use case for "cascade"

From: François REMY <francois.remy.dev@outlook.com>
Date: Thu, 17 Apr 2014 17:57:40 +0200
Message-ID: <DUB130-DS22A636FBEAAD1F005D967BA5520@phx.gbl>
To: "CSS WG" <www-style@w3.org>
>>>>>>>>>>>>>>>>>>>>>>>
EDIT: forgot to add "!important" to the generic declaration to make it 
happen before all the other rules
>>>>>>>>>>>>>>>>>>>>>>>

Hi,

Just figured out I would have liked to have “cascade” today in the following
case:

    button {
        background: #aaa;
        color: black;
    }

    button:hover {
        background: orange;
        color: white;
    }

    <!-- this button won't become orange on hover :( -->
    <button style="background: red; color: white;">...</button><!-- or
#button_id { ... } -->

vs


    :hover {
        background: var(--hover-background, cascade) !important;
        color: var(--hover-color, cascade) !important;
    }

    button {
        background: #aaa;
        --hover-background: orange;
        color: black;
        --hover-color: white;
    }

    <!-- it will work :-) -->
    <button style="background: red; color: white;">...</button><!-- or
#button_id { ... } -->

That's it, this is just for the record and possible later references --
except if you have comments of course!
François

______________________
PS: Yes, I know, I can maybe use "button:hover" and accept only
"--hover-background" for buttons, for which I know what the fallback should
be, but that's maybe not the most elegant option, or is it? What if I don't
want to change the background if no hover-background was specified?
Received on Thursday, 17 April 2014 15:58:05 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:39 UTC