0

Recently I finished reading Designing with Progressive Enhancement by the Filament Group. In the book they talk about providing two levels of support based on testing browser features. If the browser passes the tests it gets the enhanced experience which is built on top of the basic. If the browser fails, it just gets the basic experience. On paper this makes perfect sense and really drives home that this is how websites should be built.

After I finished the book I looked at enhance.js which is a script they go over in the book that tests browser features (https://github.com/filamentgroup/EnhanceJS and the new version since the book https://github.com/filamentgroup/enhance). In the script, there isn't a way to test for specific css features like I expected. Sure, you're able to test for box-model support, but what if my layout relies on display: table? Is there anyone testing for features like this? Is it even practical to do so?

Dan
  • 363
  • 1
  • 5
  • 15

1 Answers1

1

Modernizr is a popular library that provides similar capability testing. There is a wide selection of pre-built tests for it that can be selected on the download page, including one to test for display: table (css-displaytable in the Non-core detects section). They also host a collection of polyfills that can help make up for some of the missing features you might want to use.

Useless Code
  • 12,123
  • 5
  • 35
  • 40
  • I never bothered to look at the non-core stuff before. Lots of useful things in there that I didn't expect. That's helpful, but I guess what I'm really trying to ask is if having some level of support for every browser, regardless of how old, is that actually realistic? – Dan Feb 12 '13 at 15:39
  • In most cases it is possible to provide some level of support for all browsers. Start with a basic static page, it may not be pretty in every browser but it will be readable. Then layer more formatting and embellishment on top of that with CSS. Virtually all browsers in use today support at least CSS 2.1, so you are pretty safe if you use it for anything essential. JavaScript can be added on top of that for browsers that support it. Enhance and Modernizr are nice for working around lacking features but you should never rely on them, the user may not have JavaScript available or enabled. – Useless Code Feb 12 '13 at 15:58
  • That all makes sense, but I want to expand on that a little with an example: Lets say that 97% of browsers hitting my site are ie8+. Is it reasonable to set my baseline at ie8, meaning that from ie8 and up will more or less have the same layout and functionality. For the other 3%, rather than delivering a potentially broken experience, instead give them the basic "safe styles". – Dan Feb 12 '13 at 16:13