Live data from Hacker News

CSS Variables in Firefox 29

jan.rs

11–20 of 31 posts

Re: CSS Variables in Firefox 29

#11
post #2

I wasn't paying attention the last time we had some awesome additions to CSS. How does something like this get adapted? Do developers actually only use this on FF29+ until all browser adapt? Is this one of those things where we will see workarounds for older browser for decades to come? Or is this more something that CSS frameworks like LESS pick up and the actual thing is abstracted away for a couple of years still?…

LESS and co. can't implement this, because CSS variables are cascading.

Re: CSS Variables in Firefox 29

#12

After looking at the spec, I'm wondering does this really save anything for the client, vs. doing this in a CSS preprocessor? Instead of spending the time compiling once and then having clients interpret declarations, every single user who visits the site will have their browser perform the same computation, every time they visit a page that uses these . It's also another source of significant complexity to the brows…

Less dependency on third party tooling.

Many companies are weary of extra dependencies on their developer tooling.

Re: CSS Variables in Firefox 29

#13
post #5

Please note that the final syntax for CSS Variables changed recently, so in Firefox 31 and later, where the feature is enabled by default, you declare variables like this: :root { --spacing: 16px; } and reference them like this: body { padding: var(--spacing); }

Who comes up with these weird syntaxes? First it was var-foo, now it's --foo. What's next, \foo?

"--" is almost universally used as a decrementing operator, and it's also a common prefix for verbose shell options. Just because you're now working with a different language doesn't mean that you are free to repurpose other languages' operators for entirely unrelated purposes. It's just a recipe for confusion, not to mention it's ugly.

I thought I'd seen the worst when PHP picked backslash as the namespace separator. Now it's just getting crazy. Why couldn't they just pick a normal sigil that everyone already understands, like the dollar sign?

Re: CSS Variables in Firefox 29

#14
post #13
post #5

Please note that the final syntax for CSS Variables changed recently, so in Firefox 31 and later, where the feature is enabled by default, you declare variables like this: :root { --spacing: 16px; } and reference them like this: body { padding: var(--spacing); }

Who comes up with these weird syntaxes? First it was var-foo, now it's --foo. What's next, \foo? "--" is almost universally used as a decrementing operator, and it's also a common prefix for verbose shell options. Just because you're now working with a different language doesn't mean that you are free to repurpose other languages' operators for entirely unrelated purposes. It's just a recipe for confusion, not to men…

You can’t simply pick a syntax. You have to choose something that plays well with older CSS parsers.

Re: CSS Variables in Firefox 29

#15
post #14
post #13

Earlier quoted context omitted.

Who comes up with these weird syntaxes? First it was var-foo, now it's --foo. What's next, \foo? "--" is almost universally used as a decrementing operator, and it's also a common prefix for verbose shell options. Just because you're now working with a different language doesn't mean that you are free to repurpose other languages' operators for entirely unrelated purposes. It's just a recipe for confusion, not to men…

You can’t simply pick a syntax. You have to choose something that plays well with older CSS parsers.

You can break older parses if you just wait long enough..

Re: CSS Variables in Firefox 29

#16
post #13
post #5

Please note that the final syntax for CSS Variables changed recently, so in Firefox 31 and later, where the feature is enabled by default, you declare variables like this: :root { --spacing: 16px; } and reference them like this: body { padding: var(--spacing); }

Who comes up with these weird syntaxes? First it was var-foo, now it's --foo. What's next, \foo? "--" is almost universally used as a decrementing operator, and it's also a common prefix for verbose shell options. Just because you're now working with a different language doesn't mean that you are free to repurpose other languages' operators for entirely unrelated purposes. It's just a recipe for confusion, not to men…

I agree, that is terrible. In html we already have comments with

Re: CSS Variables in Firefox 29

#18
post #2

I wasn't paying attention the last time we had some awesome additions to CSS. How does something like this get adapted? Do developers actually only use this on FF29+ until all browser adapt? Is this one of those things where we will see workarounds for older browser for decades to come? Or is this more something that CSS frameworks like LESS pick up and the actual thing is abstracted away for a couple of years still?…

The good news is that at least now a large majority of users are on browsers with auto update. So once the spec is finalized and browsers start to enable it by default you should get a pretty large % of users who will support it.

You will likely have to have a separate stylesheet for older versions of IE (and possibly other browsers) but honestly you likely have that anyway. And it's a lot easier to update a few values in that then throughout your entire site.

We'll see how it plays out but I certainly wouldn't expect to use them in production for quite a while yet. I'm sure that is why they hid it behind an about:config option for now.

Re: CSS Variables in Firefox 29

#19
post #13
post #5

Please note that the final syntax for CSS Variables changed recently, so in Firefox 31 and later, where the feature is enabled by default, you declare variables like this: :root { --spacing: 16px; } and reference them like this: body { padding: var(--spacing); }

Who comes up with these weird syntaxes? First it was var-foo, now it's --foo. What's next, \foo? "--" is almost universally used as a decrementing operator, and it's also a common prefix for verbose shell options. Just because you're now working with a different language doesn't mean that you are free to repurpose other languages' operators for entirely unrelated purposes. It's just a recipe for confusion, not to men…

As pornel pointed out, CSS Variables are really custom properties that cascade and inherit just like regular properties. Since "$" is used by CSS preprocessors for variables that work in a different way, I think Tab felt that it would cause too much confusion to use the same symbol. The set of remaining ASCII non-alphabetic characters that CSS doesn't use is pretty small too; perhaps "$" is slated for use by some other feature.

There's also a desire in the WG to have a consistent naming scheme for custom CSS things, including custom media queries, custom pseudo-classes to use in selectors, etc. "--" is something that doesn't scream "variables" and so would be usable for those other things.

Post reply on HN