Re: [css-variables] resolving relative URLs

On Thu, Sep 5, 2013 at 3:54 PM, Cameron McCormack <cam@mcc.id.au> wrote:
> One thing that might not be obvious until you notice it, is that if you have
> a relative URL in a variable, then it is resolved against the URL of the
> style sheet where the (non-custom) property that ultimately uses the
> variable is declared.  So if you had:
>
>   -- http://example.org/index.html --
>   <!DOCTYPE html>
>   <link rel=stylesheet href=resources/base.css>
>   <link rel=stylesheet href=resources/themes/light/theme.css>
>   <p>Hello.</p>
>
>   -- http://example.org/resources/base.css --
>   body { background-image: var(mainbg); }
>
>   -- http://example.org/resources/themes/light/theme.css --
>   :root { var-mainbg: url(somelightpattern.svg); }
>
> then the computed value of background-image on body would be
> http://example.org/resources/somelightpattern.svg rather than
> http://example.org/resources/themes/light/somelightpattern.svg.
>
> Is this a problem?  Should there be a way to absolutise the URL token in the
> variable declaration?

Planned for level 2, along with type annotations - there's plenty of
things you might want to resolve at variable definition time (like an
attr() function) and then use the resolved value elsewhere.  This is
dependent on type annotations, because you need to know how to
interpret the variable's tokens before you can resolve them.

~TJ

Received on Thursday, 5 September 2013 23:00:55 UTC