W3C home > Mailing lists > Public > www-style@w3.org > October 2011

Re: Better Variables through Custom Properties

From: Roland Steiner <rolandsteiner@google.com>
Date: Mon, 24 Oct 2011 17:14:13 -0700
Message-ID: <CACFPSphgHoOs-V=KZ+jF-0meymP_LtsWcQm2xrxLDBZxPQR3gg@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style list <www-style@w3.org>
On Mon, Oct 24, 2011 at 16:39, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> In this simple case, two custom properties are set on the root
> element.  They inherit down to the h1, where they are referenced with
> the data() function.  Here I'm assuming that properties prefixed with
> "data-" are "custom properties", which are valid but defined to be
> meaningless, similar to the data-* attributes in HTML.

Just for clarification: In my original proposal I assumed that data() (there
called apply()) can also reference any "normal" properties, which I believe
could be useful (e.g., swapping colors). Do you envision this for data() as
well, or do you see problems with this?

2. Scoping gives us a useful form of "namespacing" as well.  If you
> set a variable on the root of your component (Component Model or
> ad-hoc), your variable won't show up for elements outside of the
> component.  As well, if the same variable name was used outside your
> component, it won't affect *your* styles either.  (This isn't perfect,
> as "donut"-style components that contain arbitrary content will still
> see your component's value, and not the global value.)

This can be solved "manually": Suppose you use 2 "donut" components 'foo'
and 'bar' that both use the variable 'data-color'. You can resolve the
namespace clash e.g., by

:root {
  data-foo-color: red;
  data-bar-color: green;
.foo {
  data-color: data(data-foo-color);
.bar {
  data-color: data(data-bar-color);

- Roland
Received on Tuesday, 25 October 2011 00:14:57 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:51 UTC