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?…
CSS Variables in Firefox 29
11–20 of 31 posts
Re: CSS Variables in Firefox 29
#12After 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…
Many companies are weary of extra dependencies on their developer tooling.
Re: CSS Variables in Firefox 29
#13Please 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); }
"--" 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
#14Please 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…
Re: CSS Variables in Firefox 29
#15Earlier 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.
Re: CSS Variables in Firefox 29
#16Please 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…
Re: CSS Variables in Firefox 29
#17Re: CSS Variables in Firefox 29
#18I 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?…
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
#19Please 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…
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.