1

I'm using pretty recent CSS features such as viewport units and flex-boxes. These are great for making fluid layouts, and to get rid of extra-markup and dirty CSS hacks.

I'm using prefix-free to handle some vendor-prefix issues, but that got me thinking, is there any sort of script that can detect the use of recent CSS features and somehow make calculations in order to render the elements that use that feature correctly? (if the browser doesn't support those features, of course)

The site I'm making makes use of Bitcoins and WebSockets (and to my knowledge, socket.io falls back to long-polling), so I guess maybe many of the users will be somewhat "tech-savvy" and have recent browsers, but I don't really know what to expect, honestly. And it'd suck if the site looked completely broken for some people.

I'm the sole developer of this and the idea of making a bunch of the layout compatible with older browsers is... well, daunting. I just got started so I might as well use old CSS techniques, but I'd really like to use the latest stuff.

It really sucks that there is a lot of new, cool stuff, but old browsers are holding everyone back...

Thank you.

William Alfreth
  • 13
  • 3
  • Just guessing, but maybe CSS preprocessors like LESS and SASS can do this. – Barmar Mar 12 '15 at 01:14
  • Hmm, to my knowledge they are "pre-processors" of CSS, so, could they know how an element would render in a browser? As in, detecting the use of a flex-box and be smart enough to change it to a table-based layout, so that it renders exactly as it would have with a flex-box? I don't know, maybe they do, I'll look into it. – William Alfreth Mar 12 '15 at 01:22
  • Are you looking for something like http://modernizr.com/? – CBroe Mar 12 '15 at 01:26
  • I just checked that out, sounds like I'll still have to write the CSS, but it's nice having a tool that helps out... thanks. – William Alfreth Mar 12 '15 at 01:44

1 Answers1

1

What you're looking for is commonly called a "polyfill".

There are many polyfills available... usually several for each feature. You can find packages like Webshim which come with many out of the box: http://afarkas.github.io/webshim/demos/

Use http://caniuse.com/ to check for browser compatibility. It often links to polyfills in the comments section.

Brad
  • 159,648
  • 54
  • 349
  • 530
  • Great, I didn't know about them. I looked at webshim and it looks like it doesn't support flexbox, for instance. However, I did find a flexbox pollyfill, but it is for the legacy flex-box model. I guess I'm out of luck with this, and I'll look into modernizr, thanks. – William Alfreth Mar 12 '15 at 01:43
  • Yeah, that's the one for the old flex-box specification. I'm using the most recent one, and reflexie apparently isn't that great yet. Pollyfills still sound useful for other stuff, though. I'm thinking maybe I'll say screw it and not support old browsers at all... perhaps it might get some people to update their browsers (or buy a new PC, or completely hate or discard my site), whatever! – William Alfreth Mar 12 '15 at 01:55