Re: [css-variables] Referencing all properties (Issue 4, !important)

On Fri, Sep 7, 2012 at 2:36 AM, François REMY <fremycompany_pub@yahoo.fr> wrote:
> Tab, you are again debating that "because this can't solve all the problems,
> it should not exist at all".
>
> I don't see where the problem is to specify that we use the specified value
> to resolve property references (which, as you known, includes the
> inherited/initial value as neeeded). The differences between the computed
> value and the specified value are close to inexistant in most cases. The
> only major difference happens at 'used' time and you know as good as me that
> the computed value of any property can't depend on the used value of another
> one.
>
> I have a simple example demonstrating that referencing native properties can
> be useful.

I'm quite aware that they're useful.  They're also difficult to do
without being future-hostile to the development of CSS, or weak enough
that they don't accomplish much anyway.

> [1]
>
> If I want to have an element whose padding-left and padding right represent
> 10% of the element's width, and that I have 'specified' property reference,
> I can do:
>
>    li.padded {
>        width: 100%;
>        padding: 0px calc(0.05 * use(width));
>    }
>
>    li.twocol {
>        width: 50%;
>    }

Assuming that you *actually* want the specified percentage, and not
the resolved <length>, this might work.

> If I can't use the reference, I need to create a new custom property for the
> purpose, and this will mess up my code
>
>    * {
>        width: var(width);
>        var-width: auto; //oops, I inherit!
>    }
>
>    li.padded {
>        var-width: 100%;
>        padding: 0px calc(0.05 * var(width));
>    }
>
>    li.twocol {
>        var-width: 50%;
>    }
>
> Now, my code is completely inefficient, just because I had to work around
> the fact I can't make a reference to a native propery.

If you'd written the original rule with a better selector than '*',
you'd wipe out most of the inefficiency.

> [2]
>
> I regulary need to have something like this in my code:
>
>    a.tile {
>        background-color: blue;
>        outline-color: blue;
>        outline-width: 0px;
>        color: white;
>        ...
>        transition: all 0.3s;
>    }
>
>    a.tile:hover {
>        background-color: royalblue;
>        outline-color: royalblue;
>        outline-width: 5px;
>    }
>
> If I could simply use a reference, the code would be better and more easily
> maintainable :
>
>    a.tile {
>        background-color: blue;
>        outline-color: use(background-color);
>        ...
>    }
>
>    a.tile:hover {
>        background-color: royalblue;
>    }
>
> Again, writing the same code using a custom property would be cumbersome and
> would slow down the page.
>
> What Brian, Chris and myself would like is a simple specified-value replacor
> that works for all properties and not just for custom ones. We don't want a
> complex solution that requires new internal dependencies and you are
> rejecting this proposal because you don't want a simple solution but a very
> complex solution that's completely impossible to build.

I think that using literally just the specified value might work
without problems.  However, I suspect it would often end up being
confusing, because the difference between 'computed' and 'specified'
is normally irrelevant for authors (they can't directly observe the
specified value).

In any case, I see no problem with addressing this with a
differently-named function than what vars use, because of some of the
different details in desired behavior.

~TJ

Received on Thursday, 13 September 2012 21:10:18 UTC