W3C home > Mailing lists > Public > public-css-archive@w3.org > September 2017

Re: [csswg-drafts] [css-variables] User Agent properties and variables

From: Tommy Hodgins via GitHub <sysbot+gh@w3.org>
Date: Sun, 17 Sep 2017 18:41:50 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-330069786-1505673699-sysbot+gh@w3.org>
To me, the term `constant()` feels like a misnomer, especially if the rule (and property and value) can be overriden by a more specific selector.

```css
body {
  color: constant(fontColor);
}
body.home {
  color: red;
}
```

It's not looking "constant" in any sense of the word, plus it's confusing on another level with `var` and `const` in JavaScript existing for similar uses, but different to each other _and also different to `variable()` and  the proposed `constant()`._

The `$()` syntax doesn't feel quite like anything else in CSS. The first thing that pops into my mind would be something like `global()` or `ua()` standing for user-agent. Consider you had never heard of the functionality of exposing browser settings to CSS before, which of the following syntax examples conjures up the idea that that's what's going on in the code:

```css
body {
  color: constant(fontColor);
  background: constant(backgroundColor);
}
```

or

```css
body {
  color: $(fontColor);
  background $(backgroundColor);
}
```

or

```css
body {
  color: browser(fontColor);
  background: browser(backgroundColor);
}
```

Given these examples, the presence of `constant()` without any other context makes it sound like an invariable…variable? What's that? It doesn't really make sense, if you wanted it _constantly_ one colour couldn't you just set that in the CSS all the time? It's so wrong it feels nearly self-negating.

The second example, using `$()` reads to me like a layer on top of CSS - either a preprocessor variable or something that's going to be interpolated before that text becomes CSS. This is _closer_ to what's really going on, but my first thought is _not_ that it's coming from the browser. If I saw that in the wild my first thought would be that somebody accidentally published some kind of Sass/Less/Stylus-like preprocessor dialect without compiling it to CSS first. My initial thought would be to google what preprocessor uses `$()` as a syntax so I could compile it properly.

But given the third example, `browser()`, even if you have no idea that the functionality is possible, it's CSS-like enough that it _could_ be a native feature, and the name `browser()` hints that it's nothing that could be rendered in advance…before the _browser_. For me at least, I think this is not only elegant enough to use while authoring CSS, but also provides the correct context to help people intuit what is going on in the code, as well as provide something 'googleable' they can look up to find out more.

That's my 2¢. This is a great idea for a feature, getting the naming right (or wrong) could be the difference between empowering authors and bewildering them.

-- 
GitHub Notification of comment by tomhodgins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1693#issuecomment-330069786 using your GitHub account
Received on Sunday, 17 September 2017 18:41:43 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:26:43 UTC