[css-variables] feedback

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
10 messages Options
Reply | Threaded
Open this post in threaded view
|

[css-variables] feedback

raees
Hello there,

First of all, thank you for your work in making of CSS and taking time to read this email. I’m Raees Iqbal, a web designer.

I’ve been following the development regarding CSS variables from about more than a year now. The current proposal I see uses “--” to declare variables and “var()” to use them. While I’m happy that there has been progress, I’m not sure about the suggested syntax.
I would like to suggest that as most of the web designers and developers are familiar with JavaScript notation of variables and some are known to PHP style. A similar style should be used in CSS also, for example:

var baseColor: #444;
or maybe
$baseColor: #444;

h1 {
color: $baseColor;
}

The only use for “$” sign is in “ends with” selector ( eg. [src$=”.jpg”] ), so, it will be as much easy for layout engines and there should not be any performance difference. But this will be much easier in use, which is the core beauty of CSS.

Regards,
Raees Iqbal


Reply | Threaded
Open this post in threaded view
|

Re: [css-variables] feedback

Tab Atkins Jr.
On Wed, Jul 1, 2015 at 9:22 AM,  <[hidden email]> wrote:

> First of all, thank you for your work in making of CSS and taking time to
> read this email. I’m Raees Iqbal, a web designer.
>
> I’ve been following the development regarding CSS variables from about more
> than a year now. The current proposal I see uses “--” to declare variables
> and “var()” to use them. While I’m happy that there has been progress, I’m
> not sure about the suggested syntax.
> I would like to suggest that as most of the web designers and developers are
> familiar with JavaScript notation of variables and some are known to PHP
> style. A similar style should be used in CSS also, for example:
>
> var baseColor: #444;
> or maybe
> $baseColor: #444;
>
> h1 {
>
> color: $baseColor;
>
> }
>
> The only use for “$” sign is in “ends with” selector ( eg. [src$=”.jpg”] ),
> so, it will be as much easy for layout engines and there should not be any
> performance difference. But this will be much easier in use, which is the
> core beauty of CSS.

CSS Variables have shipped in multiple browsers, so the syntax is
frozen at this point regardless of the merits of any possible change.
But I can still address your suggestion under the assumption that it's
possible. ^_^

The syntax for variables and custom properties was chosen to fit well
into the existing CSS syntax.  In particular, *declaring* a variable
is done with a custom property, not some new type of variable
declaration statement.  This means that it can be manipulated with the
existing APIs for getting/setting properties, and can be set on a
*non-root* element and only apply to that element and its descendants,
so there's less of a global namespace management issue.  (This was
particularly important for the anticipated use-cases of using
variables to theme web components.)

The var() syntax was used because (a) functions are already familiar,
(b) it makes it more obvious that you're doing something tricky, and
(c) it gives us space to add more features, like the "default value if
the variable isn't set" feature that already exists.  In the future, I
plan to add a parent-var() function (for referring to the value of a
variable on the element's parent, to avoid circular references) and
keeping var() as a function ensures that parent-var(), and anything
similar that I add, have the same "shape" as the plain variable, which
is important for leaning and reading.

~TJ

Reply | Threaded
Open this post in threaded view
|

Re: [css-variables] feedback

Marat Tanalin | tanalin.com
11.07.2015, 03:13, "Tab Atkins Jr." <[hidden email]>:
> CSS Variables have shipped in multiple browsers

FWIW, Firefox/Gecko is currently the only implementation of CSS variables.

Reply | Threaded
Open this post in threaded view
|

Re: [css-variables] feedback

Felix Miata-2
Marat Tanalin composed on 2015-07-11 03:33 (UTC+0300):

> Tab Atkins Jr. composed:

>> CSS Variables have shipped in multiple browsers

> FWIW, Firefox/Gecko is currently the only implementation of CSS variables.

Firefox, false. Gecko, true: http://geckoisgecko.org/
--
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.com/

Reply | Threaded
Open this post in threaded view
|

Re: [css-variables] feedback

Marat Tanalin | tanalin.com
11.07.2015, 03:48, "Felix Miata" <[hidden email]>:
> Marat Tanalin composed on 2015-07-11 03:33 (UTC+0300):
>>  FWIW, Firefox/Gecko is currently the only implementation of CSS variables.
>
> Firefox, false. Gecko, true: http://geckoisgecko.org/

I'm aware of differences between browser engine and browser, that's why I've mentioned Gecko.

Anyway, AFAIK, market share of non-Firefox Gecko-based browsers is negligible.

Reply | Threaded
Open this post in threaded view
|

Re: [css-variables] feedback

Felix Miata-2
Marat Tanalin composed on 2015-07-11 04:01 (UTC+0300):

> Felix Miata composed:

>> Marat Tanalin composed on 2015-07-11 03:33 (UTC+0300):

>>> FWIW, Firefox/Gecko is currently the only implementation of CSS variables.

>> Firefox, false. Gecko, true: http://geckoisgecko.org/

> I'm aware of differences between browser engine and browser, that's why I've mentioned Gecko.

> Anyway, AFAIK, market share of non-Firefox Gecko-based browsers is negligible.

It's non-zero. And, you don't really know what the size, because those
"advertising" Firefox even though they are not Firefox is also non-zero:
http://i60.tinypic.com/2a6nz7s.jpg

>From the headers of the message you replied to:
Mozilla/5.0 (X11; Linux i686; rv:36.0) Gecko/20100101 SeaMonkey/2.33.1
--
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.com/

Reply | Threaded
Open this post in threaded view
|

Re: [css-variables] feedback

raees
In reply to this post by Tab Atkins Jr.
Is there a particular reason to prefer ‘--’ over ‘$’ for declaring variables? I mean,
$color-headings: #444;
h1{
color: var($color-headings);
}
still looks better than
--color-headings: #444;
h1 {
color: var(--color-headings);
}
Reply | Threaded
Open this post in threaded view
|

Re: [css-variables] feedback

Tab Atkins Jr.
In reply to this post by Marat Tanalin | tanalin.com
On Fri, Jul 10, 2015 at 5:33 PM, Marat Tanalin <[hidden email]> wrote:
> 11.07.2015, 03:13, "Tab Atkins Jr." <[hidden email]>:
>> CSS Variables have shipped in multiple browsers
>
> FWIW, Firefox/Gecko is currently the only implementation of CSS variables.

Safari has a (prefixed?) implementation as well.  Blink had one (the
same as Safari, as it landed a little before the fork), but we ripped
it out and are just about ready to ship a new implementation.

~TJ

Reply | Threaded
Open this post in threaded view
|

Re: [css-variables] feedback

Tab Atkins Jr.
In reply to this post by Tab Atkins Jr.
On Sat, Jul 11, 2015 at 5:32 PM,  <[hidden email]> wrote:

> Is there a particular reason to prefer ‘--’ over ‘$’ for declaring
> variables? I mean,
>
> $color-headings: #444;
> h1{
>   color: var($color-headings);
> }
>
> still looks better than
>
> --color-headings: #444;
> h1 {
>   color: var(--color-headings);
> }

Custom properties are properties, so they have to go in a style rule, like:

```
html {
  --color-headings: #444;
}
h1 {
  color: var(--color-headings);
}
```

Otherwise, no *strong* reason to prefer one over the other.  $ was
suggested several times during development, but we ultimately rejected
it for a few reasons:

1. $ is used by lots of preprocessors for variables already, and
they're *global* vars in those preprocessors. Stomping on their syntax
with something slightly different is rude and confusing.
1a. If we ever do use $, we'll probably use it in a way similar to
preprocessors (for example, as mixin arguments - lexically-scoped
variables).
2. Property names starting with dashes are already familiar from
vendor prefixing, so a double-dash fits in with that while still
claiming a pristine syntax space.
3. Aesthetics is a personal choice and opinions differ?

~TJ

Reply | Threaded
Open this post in threaded view
|

Re: [css-variables] feedback

Michiel Bijl
In reply to this post by raees
Consistency with custom properties.

—Michiel

On 12 Jul 2015, at 17:59, [hidden email] wrote:

Is there a particular reason to prefer ‘--’ over ‘$’ for declaring variables? I mean,
$color-headings: #444;
h1{
color: var($color-headings);
}
still looks better than
--color-headings: #444;
h1 {
color: var(--color-headings);
}