CODEWITHSUNDEEP
htmlcssprogressive-enhancement
Dan
Dan

Reputation: 363

How to provide multiple levels of support in css with progressive enhancement

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?

Upvotes: 0

Views: 72

Answers (1)

Useless Code
Useless Code

Reputation: 12412

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.

Upvotes: 1

Related Questions