W3C home > Mailing lists > Public > www-style@w3.org > December 2015

Re: [css-variables] Is making a property negative via `-var(--width)` valid syntax?

From: Simon Pieters <simonp@opera.com>
Date: Fri, 18 Dec 2015 12:05:53 +0100
To: "Philip Walton" <philip@philipwalton.com>, "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: "www-style list" <www-style@w3.org>
Message-ID: <op.x9t6f318idj3kv@simons-mbp>
On Fri, 13 Nov 2015 18:33:28 +0100, Tab Atkins Jr. <jackalmage@gmail.com>  
wrote:

> On Sun, Nov 8, 2015 at 12:51 PM, Philip Walton <philip@philipwalton.com>  
> wrote:
>> For example, if I have a gutter size and I want to use the positive  
>> version
>> in a child element margin and then negate that in the parent element's
>> negative margin, currently I'd do something like this:
>>
>> ```
>> .parent {
>>   margin: -1em;
>> }
>> .child {
>>   margin: 1em;
>> }
>> ```
>>
>> If I try doing the same thing with custom properties in Firefox is  
>> fails.
>> I'm assuming that's a bug, but I wanted to ask here to make sure.
>>
>> ```
>> .parent {
>>   --gutter: 1em;
>>   margin: -var(--gutter); /* declaration ignored in FF */
>> }
>> .child {
>>   margin: var(--gutter);
>> }
>> ```
>>
>> To make this work in FF today you have to do `calc(-1*var(--gutter))`,  
>> which
>> isn't ideal.
>
> As Boris says, FF's behavior is correct.  `-var(...)` is a function
> named -var, which is not a variable reference. You can't negate
> functions like that *anywhere* due to the way ident parsing works;
> it's not specific to variables.

But it seems to me you're only likely to want it for var(). Since this  
appears to be a pattern people use in the preprocessor world, should we  
just support it? It wouldn't be difficult to define a new -var(x) function  
as calc(-1 * var(x)), right? Too much of a hack? Slippery slope?

-- 
Simon Pieters
Opera Software
Received on Friday, 18 December 2015 11:06:26 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:59 UTC