9 ms·

CSS3 Features That You Can Finally Start Using

167 points by fvrghl 13y ago

oneeyedpigeon 13y ago
There's a brief mention in passing, but the lack of good support for CSS columns is really frustrating. I have a requirement on a project that I'm working on for columns, but they just cannot be satisfactorily implemented in CSS alone, in any browser. Apart to resort to JavaScript instead.
- scotth 13y ago
  What's the issue?
  - oneeyedpigeon 13y ago
    SO much. Mainly a) lack of support for control over element breaking (I haven't gone really in-depth with the spec, but even the most obvious things are supported terribly) b) the weird behaviour of margin collapsing (and adding extra margins - WTF?!)
    - strictfp 13y ago
      Just use tables. I know that everyone recommends against it, but IMO they are the only solution which works as expected. Everyone says they have a fancy workaround, but none of them works well enough. And besides, whats wrong with tables? Semantic HTML is hip again :-)
      - rimantas 13y ago
        Please, show, how do you make tables that work like CSS columns, i.e. reflow the content to fill the specified number of columns. Unless you hardcode content for each TD, but what the point then? And that's exactly what's wrong with tables (semantic purity aside)—they shackle you content to one specific structure, meanwhile using CSS for layout you can move your blocks around more or less freely.
        oneeyedpigeon 13y ago
        Exactly. Instead of just resorting to tables, I'd be much more likely to resort to a couple of DIVs which would involve less markup and be less semantically incorrect. But the whole point is that I don't want to have to decide, on an article-by-article basis, exactly where my break between two columns should actually be.
  - Achshar 13y ago
    For me atleast it was that they don't work when the page is printed in webkit/blink. That and browser support.
- e12e 13y ago
  I think the css-columns thing is flawed anyway. I'd much rather see: http://dev.w3.org/csswg/css-regions/ http://dev.w3.org/csswg/css-regions/ It's the only thing that makes sense if we want to allow that type of design on the web. It appears: http://adobe-webplatform.github.io/css-regions-polyfill/ http://adobe-webplatform.github.io/css-regions-polyfill/ works fine in eg. Firefox - but their example page degrades horribly with javascript disabled -- but that shouldn't be insurmountable -- the easiest might be to simply patch the layout with an onLoad or something (have the static site show something similar either without columns, or using css-columns or something...). edit: formatting
scotth 13y ago
In the article, it's mentioned that there isn't great support for flexbox, which is only half true. Using a combination of the older and new syntax (display: box and display: flex), you can already do quite a bit. I've been using autoprefixer (https://github.com/ai/autoprefixer https://github.com/ai/autoprefixer) for a few months now, building simple flexboxes all over the place with the attributes from the new spec, and have only run into one or two little issues that I can generally hack away.
lazyjones 13y ago
Roughly 4% of our users still use MSIE 6 (some report that they need to due to their restricted work environment). I need a good reason to risk 4% of our revenue for some eyecandy, or a good fallback mechanism (difficult if my layout relies on calc(), for example). HTML/CSS is a sad story ...
- shocks 13y ago
  What is your target market? MSIE 8 maybe, but 6? Seriously? Who are these people?
  - mtam 13y ago
    A number of users out there use pirated Windows XP with IE6, specially in Asia. Check IE6 countdown on www.ie6countdown.com
    - usaphp 13y ago
      If they are using pirated windows xp, i doubt that they will pay for any online service.
      - Ellipsis753 13y ago
        You could be selling physical items. Even pirates buy these.
    - shocks 13y ago
      I can't imagine the extra effort required to support MSIE 6-7 is worth it...
- nfriedly 13y ago
  "Mobile first" designs help here because you typically do a much simpler layout for mobile and then have your CSS to fancy things up hidden inside of an @media query. Phones and old browsers get the simple verision, modern browsers on large screens get the advanced version. http://js-mini-shell.nfriedly.com/ http://js-mini-shell.nfriedly.com/ is an example of this - IE 8 and down get the simpler layout and no CSS animations.
mmmbane 13y ago
From the article: "The standardization bodies have probably had their reasons, but it doesn’t feel at all intuitive to have the CSS width and height of an element affected by its padding and borders." And not only are height and width affected by padding+borders, they are affected in different ways, respectively. It's just weird. Does anybody have any insight into what the standardization bodies' reasons were?
- rimantas 13y ago
  > And not only are height and width affected by > padding+borders, they are affected in different ways, > respectively What do you mean by that? Difference between block and inline elements, collapsing margins or something else?
bbx 13y ago
"Finally Start Using"?? If you're waiting for all browsers to implement these CSS3 features correctly, you'll end up never using them. For example, CSS animations have been around for at least 2 years. Only Firefox and Webkit browsers supported them and you had to rely on vendor-prefixed properties, but animations were exciting enough for me to start experimenting with them as soon as I could. There is permanent rant towards "fancy" CSS3 features that haven't reached a "W3C standard" status yet. But a website experience doesn't need to be visually consistent across browsers. If you're using a plain hexadecimal color code as a replacement for rgba, it's ok. If your intro is animated in Chrome but not IE, it's ok too. If your last paragraph has a margin that the pseudo-element :last-child should have canceled, it's ok as well. Front-End developers have waited more than a decade for CSS improvements. You can't wait for a unified browser environment to start implementing them. I'm surprised by this article's tone, as if today, suddenly, everything changed. No way: browser support is a permanent process. Don't wait for that perfect day because it will never come. Just start having fun with CSS3 while providing a decent experience for IE (the main culprit).
- richbradshaw 13y ago
  Did you say 2 years? Make that 4 and a half: https://www.webkit.org/blog/324/css-animation-2/ https://www.webkit.org/blog/324/css-animation-2/
- EnderMB 13y ago
  It's entirely down to the kind of projects you're working on. Most of my work experience is with agencies, so I've had a good mix of clients with new and legacy clients. Some industries have a large number of legacy users, whereas with some clients it's strange to see any IE, let alone an older version like IE7-8. A client I worked on a year ago had around 20% of users on IE6-7, and these were users in the UK and not in China or Russia. The explanation given by the client (who spend a lot of money on web analytics) was that many of their users were business-based, and a lot of companies in the UK are restricted to IE6-7 and Windows XP due to internal web software. I used to be of the opinion that developers should support older browsers, and should gracefully degrade when used on legacy browsers. I think this was probably because I thought that things would change after a few years. Four to five years later, and IE7 (and IE8) are still a problem, and since corporate users won't get off of XP for a few more years I think enough is enough. I am happy to support older browsers when there is a business case for supporting them (i.e. there is an existing user base stuck on these browsers), but if you're working on a new project then IE9 should always be the minimum, and degraded view.
jebblue 13y ago
I run Ubuntu on my PC, it's an i7 8 core machine with nVidia GTX 660 and the latest tested Restricted driver from the repository. That animation drove my CPU aggregate by top to 90% usage. I clicked the Edit button and while the code was showing the CPU activity dropped back to minimal.
- xmus 13y ago
  i run Ubuntu as well (13.10, Dual Core 1.1GHz - though i set the clock to 800MHz, Intel HD) and nothing unusual happened when the animations were being displayed - if a shitty Intel chip can run the animations - i can't help and wonder you tweaked something you weren't suppose to?
  - jebblue 13y ago
    What was your CPU time? I run GKrellM so I notice when something starts hogging the CPU, the animation did play just fine, should it take 90% CPU time to run an animation on modern hardware? That was the point of my post. That CPU usage costs me money.
    - xmus 13y ago
      i've installed GKrellM and i got around 23% of cpu load when the animations were displayed - clock set to 800MHz [set via indicator-cpufreq] - mind you during the "test" lost of things were running to if the CSS3 animations got up to 90% on YOUR hardware - where does that leave the rest of us [i.e. shitty intel HD card owners]? :)
- zhte415 13y ago
  i3 on Mint, Intel graphics. Took around 20% of one core (derived by clicking and unclicking Edit / Run).
DougWebb 13y ago
A bunch of those demos don't work on the Android browser. I also happen to know that calc() doesn't work on Safari 6.x, among others. I've been updating my webapp software to use flexbox-based layouts, and I have to use a fair number of calc() styles to get the layout I want. (The newer css grid layouts would probably work better, but for now flexbox is the best available.) I've found that a combination of old and new flexbox syntax, Modenizr's flexbox detection, and javascript code that detects whether or not calc is available and runs a method to simulate all of my calc() styles when it isn't, is all necessary to give me good browser compatibility. IE7 and IE8 work surprisingly well, Safari 5 on Windows and 5+ on Mac work, Mobile Safari 5 on the original iPad 1 works, and Mobile Safari 6+ on newer iPads and iPhones work. Firefox, Chrome, and IE9+ work great as well, of course. It's a lot of additional effort, but it's worth it and definitely doable if you need the browser support and you want to use modern techniques.
- mcot2 13y ago
  The good news here is that IE11, Chrome, Firefox and Safari all support the newest Flexbox standard. It's pretty simple to bring in IE10 support with the older syntax. Forget about the older box layout in Firefox that was built for XUL and earlier implantations in WebKit and gecko. Those have some horrible and surprising bugs and incompatibilities.
- recuter 13y ago
  Wait, what? IE7 and IE8 work surprisingly well with Flexbox? I thought its only available starting with IE10, no?
  - DougWebb 13y ago
    That'd be the surprising bit :) Modernizr's no-flexbox detection, plus javascript polyfills where needed, work very well. The polyfill is an amazingly useful invention.
    - recuter 13y ago
      What is this magical flexbox polyfill?! This isn't quite so simple as rewriting CSS gradient syntax to some defunct oldIE filters or something. Its a whole layout algorithm, I'd love to use this! Last I heard a flexbox polyfill was barely a concept. Please, my good man, link to the repo! Edit: I hoped the parent meant something new but I think he means https://github.com/doctyper/flexie https://github.com/doctyper/flexie "Flexie enables the 2009 Flexbox model. You're probably looking for the updated spec. There is currently no polyfill for the new spec." There's a bunch of caveats and it was finicky when I played with it. The beauty of flexbox is that you can throw complex layouts at the browser and it would handle it natively, this seems more for simple pages and didn't work out for me back when I tried it. :( Bah, humbug.
pornel 13y ago
There are soo many pointless uses of calc()… in this example `margin: 0 20px` gives identical result. In most other cases all authors really want is `box-sizing: border-box` (which works in IE8+).
- richbradshaw 13y ago
  Is it just me, or is every insightful I come across where I nod vigorously whilst reading it turns out to be by either Mathias Bynens (seriously, that guy is everywhere!) or porneL?
- mcot2 13y ago
  The real benefit is mixing percentages with pixels. This makes things like sidebars and sticky footers a breeze.
  - monkeynotes 13y ago
    As the OP says you can usually solve this problem by applying padding to a element that has box-sizing: border-box set. calc() will obviously have some niche uses though, and given the creativity of the industry I'm sure some neat tricks will rise out of it.
    - ris 13y ago
      > you can usually solve this problem by applying padding to a element that has box-sizing: border-box set. And what if your element is already using padding/a border for something else and you don't want to have to fill your DOM tree with loads of pointless levels of wrapper elements?
      - monkeynotes 13y ago
        As I say, you can usually solve your problem this way.
- stesch 13y ago
  Even on the linked documentation page for cal(). I don't really see a reason for this feature.
welder 13y ago
Speaking of cool CSS animations, try this pure-css library: https://daneden.me/animate/ https://daneden.me/animate/ (Animate.css)
- stephp 13y ago
  Nice!
  - aymeric 13y ago
    Another one: http://tympanus.net/Development/ModalWindowEffects/ http://tympanus.net/Development/ModalWindowEffects/
tomasien 13y ago
Calc() is a huge deal. For non-business oriented applications where IE8 may still be in use, calc() is going to be a god damn lifesaver. I replicate the function in javascript all the time, no longer!
RoboKitten 13y ago
Modernizr is a great way to be able to start using some of these features with legacy browsers. I actually have to battle with some of my customers to upgrade to IE8 (and not to set the group policy that forces "compatibility mode").
stephp 13y ago
Pet peeve: Default z-index makes elements farther down in the code display on top of elements higher up in the code. With multiple backgrounds, the first listed has the highest z-index.
Lerc 13y ago
I'm still waiting on decent attr() support. https://bugzilla.mozilla.org/show_bug.cgi?id=435426 https://bugzilla.mozilla.org/show_bug.cgi?id=435426 In an ideal world, instead of attr() and calc(). I'd like a simple pure functional language to calculate values for CSS properties. Properties defined by such a system could be efficiently cached and recalculated as required. Easy Parallel evaluation would be a bonus too. I'd like to be able to do things like define a path as a mathematical function and then have an <UL> that evenly spaces <LI> items along that path. Preferably without requiring the browser to be specifically aware of the concept of a path.
- Udo 13y ago
  This is an interesting idea. You could implement a compiler that spits out CSS as a proof of concept and then maybe lobby for browser support.
exo_duz 13y ago
Calc is the most interesting item here in my opinion and the browser support. http://caniuse.com/calc http://caniuse.com/calc I'd kill for the ability to do variables in CSS like LESS and SCSS.

167 points by fvrghl 13y ago

There's a brief mention in passing, but the lack of good support for CSS columns is really frustrating. I have a requirement on a project that I'm working on for columns, but they just cannot be satisfactorily implemented in CSS alone, in any browser. Apart to resort to JavaScript instead.

scotth 13y ago
What's the issue?
- oneeyedpigeon 13y ago
  SO much. Mainly a) lack of support for control over element breaking (I haven't gone really in-depth with the spec, but even the most obvious things are supported terribly) b) the weird behaviour of margin collapsing (and adding extra margins - WTF?!)
  - strictfp 13y ago
    Just use tables. I know that everyone recommends against it, but IMO they are the only solution which works as expected. Everyone says they have a fancy workaround, but none of them works well enough. And besides, whats wrong with tables? Semantic HTML is hip again :-)
    - rimantas 13y ago
      Please, show, how do you make tables that work like CSS columns, i.e. reflow the content to fill the specified number of columns. Unless you hardcode content for each TD, but what the point then? And that's exactly what's wrong with tables (semantic purity aside)—they shackle you content to one specific structure, meanwhile using CSS for layout you can move your blocks around more or less freely.
      - oneeyedpigeon 13y ago
        Exactly. Instead of just resorting to tables, I'd be much more likely to resort to a couple of DIVs which would involve less markup and be less semantically incorrect. But the whole point is that I don't want to have to decide, on an article-by-article basis, exactly where my break between two columns should actually be.
- Achshar 13y ago
  For me atleast it was that they don't work when the page is printed in webkit/blink. That and browser support.
e12e 13y ago
I think the css-columns thing is flawed anyway. I'd much rather see: http://dev.w3.org/csswg/css-regions/ http://dev.w3.org/csswg/css-regions/ It's the only thing that makes sense if we want to allow that type of design on the web. It appears: http://adobe-webplatform.github.io/css-regions-polyfill/ http://adobe-webplatform.github.io/css-regions-polyfill/ works fine in eg. Firefox - but their example page degrades horribly with javascript disabled -- but that shouldn't be insurmountable -- the easiest might be to simply patch the layout with an onLoad or something (have the static site show something similar either without columns, or using css-columns or something...). edit: formatting

scotth 13y ago

In the article, it's mentioned that there isn't great support for flexbox, which is only half true. Using a combination of the older and new syntax (display: box and display: flex), you can already do quite a bit. I've been using autoprefixer (https://github.com/ai/autoprefixer https://github.com/ai/autoprefixer) for a few months now, building simple flexboxes all over the place with the attributes from the new spec, and have only run into one or two little issues that I can generally hack away.

lazyjones 13y ago

Roughly 4% of our users still use MSIE 6 (some report that they need to due to their restricted work environment). I need a good reason to risk 4% of our revenue for some eyecandy, or a good fallback mechanism (difficult if my layout relies on calc(), for example). HTML/CSS is a sad story ...

shocks 13y ago
What is your target market? MSIE 8 maybe, but 6? Seriously? Who are these people?
- mtam 13y ago
  A number of users out there use pirated Windows XP with IE6, specially in Asia. Check IE6 countdown on www.ie6countdown.com
  - usaphp 13y ago
    If they are using pirated windows xp, i doubt that they will pay for any online service.
    - Ellipsis753 13y ago
      You could be selling physical items. Even pirates buy these.
  - shocks 13y ago
    I can't imagine the extra effort required to support MSIE 6-7 is worth it...
nfriedly 13y ago
"Mobile first" designs help here because you typically do a much simpler layout for mobile and then have your CSS to fancy things up hidden inside of an @media query. Phones and old browsers get the simple verision, modern browsers on large screens get the advanced version. http://js-mini-shell.nfriedly.com/ http://js-mini-shell.nfriedly.com/ is an example of this - IE 8 and down get the simpler layout and no CSS animations.

mmmbane 13y ago

From the article: "The standardization bodies have probably had their reasons, but it doesn’t feel at all intuitive to have the CSS width and height of an element affected by its padding and borders." And not only are height and width affected by padding+borders, they are affected in different ways, respectively. It's just weird. Does anybody have any insight into what the standardization bodies' reasons were?

rimantas 13y ago
> And not only are height and width affected by > padding+borders, they are affected in different ways, > respectively What do you mean by that? Difference between block and inline elements, collapsing margins or something else?

bbx 13y ago

"Finally Start Using"?? If you're waiting for all browsers to implement these CSS3 features correctly, you'll end up never using them. For example, CSS animations have been around for at least 2 years. Only Firefox and Webkit browsers supported them and you had to rely on vendor-prefixed properties, but animations were exciting enough for me to start experimenting with them as soon as I could. There is permanent rant towards "fancy" CSS3 features that haven't reached a "W3C standard" status yet. But a website experience doesn't need to be visually consistent across browsers. If you're using a plain hexadecimal color code as a replacement for rgba, it's ok. If your intro is animated in Chrome but not IE, it's ok too. If your last paragraph has a margin that the pseudo-element :last-child should have canceled, it's ok as well. Front-End developers have waited more than a decade for CSS improvements. You can't wait for a unified browser environment to start implementing them. I'm surprised by this article's tone, as if today, suddenly, everything changed. No way: browser support is a permanent process. Don't wait for that perfect day because it will never come. Just start having fun with CSS3 while providing a decent experience for IE (the main culprit).

richbradshaw 13y ago
Did you say 2 years? Make that 4 and a half: https://www.webkit.org/blog/324/css-animation-2/ https://www.webkit.org/blog/324/css-animation-2/
EnderMB 13y ago
It's entirely down to the kind of projects you're working on. Most of my work experience is with agencies, so I've had a good mix of clients with new and legacy clients. Some industries have a large number of legacy users, whereas with some clients it's strange to see any IE, let alone an older version like IE7-8. A client I worked on a year ago had around 20% of users on IE6-7, and these were users in the UK and not in China or Russia. The explanation given by the client (who spend a lot of money on web analytics) was that many of their users were business-based, and a lot of companies in the UK are restricted to IE6-7 and Windows XP due to internal web software. I used to be of the opinion that developers should support older browsers, and should gracefully degrade when used on legacy browsers. I think this was probably because I thought that things would change after a few years. Four to five years later, and IE7 (and IE8) are still a problem, and since corporate users won't get off of XP for a few more years I think enough is enough. I am happy to support older browsers when there is a business case for supporting them (i.e. there is an existing user base stuck on these browsers), but if you're working on a new project then IE9 should always be the minimum, and degraded view.

jebblue 13y ago

I run Ubuntu on my PC, it's an i7 8 core machine with nVidia GTX 660 and the latest tested Restricted driver from the repository. That animation drove my CPU aggregate by top to 90% usage. I clicked the Edit button and while the code was showing the CPU activity dropped back to minimal.

xmus 13y ago
i run Ubuntu as well (13.10, Dual Core 1.1GHz - though i set the clock to 800MHz, Intel HD) and nothing unusual happened when the animations were being displayed - if a shitty Intel chip can run the animations - i can't help and wonder you tweaked something you weren't suppose to?
- jebblue 13y ago
  What was your CPU time? I run GKrellM so I notice when something starts hogging the CPU, the animation did play just fine, should it take 90% CPU time to run an animation on modern hardware? That was the point of my post. That CPU usage costs me money.
  - xmus 13y ago
    i've installed GKrellM and i got around 23% of cpu load when the animations were displayed - clock set to 800MHz [set via indicator-cpufreq] - mind you during the "test" lost of things were running to if the CSS3 animations got up to 90% on YOUR hardware - where does that leave the rest of us [i.e. shitty intel HD card owners]? :)
zhte415 13y ago
i3 on Mint, Intel graphics. Took around 20% of one core (derived by clicking and unclicking Edit / Run).

DougWebb 13y ago

A bunch of those demos don't work on the Android browser. I also happen to know that calc() doesn't work on Safari 6.x, among others. I've been updating my webapp software to use flexbox-based layouts, and I have to use a fair number of calc() styles to get the layout I want. (The newer css grid layouts would probably work better, but for now flexbox is the best available.) I've found that a combination of old and new flexbox syntax, Modenizr's flexbox detection, and javascript code that detects whether or not calc is available and runs a method to simulate all of my calc() styles when it isn't, is all necessary to give me good browser compatibility. IE7 and IE8 work surprisingly well, Safari 5 on Windows and 5+ on Mac work, Mobile Safari 5 on the original iPad 1 works, and Mobile Safari 6+ on newer iPads and iPhones work. Firefox, Chrome, and IE9+ work great as well, of course. It's a lot of additional effort, but it's worth it and definitely doable if you need the browser support and you want to use modern techniques.

mcot2 13y ago
The good news here is that IE11, Chrome, Firefox and Safari all support the newest Flexbox standard. It's pretty simple to bring in IE10 support with the older syntax. Forget about the older box layout in Firefox that was built for XUL and earlier implantations in WebKit and gecko. Those have some horrible and surprising bugs and incompatibilities.
recuter 13y ago
Wait, what? IE7 and IE8 work surprisingly well with Flexbox? I thought its only available starting with IE10, no?
- DougWebb 13y ago
  That'd be the surprising bit :) Modernizr's no-flexbox detection, plus javascript polyfills where needed, work very well. The polyfill is an amazingly useful invention.
  - recuter 13y ago
    What is this magical flexbox polyfill?! This isn't quite so simple as rewriting CSS gradient syntax to some defunct oldIE filters or something. Its a whole layout algorithm, I'd love to use this! Last I heard a flexbox polyfill was barely a concept. Please, my good man, link to the repo! Edit: I hoped the parent meant something new but I think he means https://github.com/doctyper/flexie https://github.com/doctyper/flexie "Flexie enables the 2009 Flexbox model. You're probably looking for the updated spec. There is currently no polyfill for the new spec." There's a bunch of caveats and it was finicky when I played with it. The beauty of flexbox is that you can throw complex layouts at the browser and it would handle it natively, this seems more for simple pages and didn't work out for me back when I tried it. :( Bah, humbug.

pornel 13y ago

There are soo many pointless uses of calc()… in this example `margin: 0 20px` gives identical result. In most other cases all authors really want is `box-sizing: border-box` (which works in IE8+).

richbradshaw 13y ago
Is it just me, or is every insightful I come across where I nod vigorously whilst reading it turns out to be by either Mathias Bynens (seriously, that guy is everywhere!) or porneL?
mcot2 13y ago
The real benefit is mixing percentages with pixels. This makes things like sidebars and sticky footers a breeze.
- monkeynotes 13y ago
  As the OP says you can usually solve this problem by applying padding to a element that has box-sizing: border-box set. calc() will obviously have some niche uses though, and given the creativity of the industry I'm sure some neat tricks will rise out of it.
  - ris 13y ago
    > you can usually solve this problem by applying padding to a element that has box-sizing: border-box set. And what if your element is already using padding/a border for something else and you don't want to have to fill your DOM tree with loads of pointless levels of wrapper elements?
    - monkeynotes 13y ago
      As I say, you can usually solve your problem this way.
stesch 13y ago
Even on the linked documentation page for cal(). I don't really see a reason for this feature.

welder 13y ago

Speaking of cool CSS animations, try this pure-css library: https://daneden.me/animate/ https://daneden.me/animate/ (Animate.css)

stephp 13y ago
Nice!
- aymeric 13y ago
  Another one: http://tympanus.net/Development/ModalWindowEffects/ http://tympanus.net/Development/ModalWindowEffects/

tomasien 13y ago

Calc() is a huge deal. For non-business oriented applications where IE8 may still be in use, calc() is going to be a god damn lifesaver. I replicate the function in javascript all the time, no longer!

RoboKitten 13y ago

Modernizr is a great way to be able to start using some of these features with legacy browsers. I actually have to battle with some of my customers to upgrade to IE8 (and not to set the group policy that forces "compatibility mode").

stephp 13y ago

Pet peeve: Default z-index makes elements farther down in the code display on top of elements higher up in the code. With multiple backgrounds, the first listed has the highest z-index.

Lerc 13y ago

I'm still waiting on decent attr() support. https://bugzilla.mozilla.org/show_bug.cgi?id=435426 https://bugzilla.mozilla.org/show_bug.cgi?id=435426 In an ideal world, instead of attr() and calc(). I'd like a simple pure functional language to calculate values for CSS properties. Properties defined by such a system could be efficiently cached and recalculated as required. Easy Parallel evaluation would be a bonus too. I'd like to be able to do things like define a path as a mathematical function and then have an <UL> that evenly spaces <LI> items along that path. Preferably without requiring the browser to be specifically aware of the concept of a path.

Udo 13y ago
This is an interesting idea. You could implement a compiler that spits out CSS as a proof of concept and then maybe lobby for browser support.

exo_duz 13y ago

Calc is the most interesting item here in my opinion and the browser support. http://caniuse.com/calc http://caniuse.com/calc I'd kill for the ability to do variables in CSS like LESS and SCSS.