A comprehensive collection of resources on Progressive Enhancement. From concept and strategies to feature detection and testing methods. Complete with a list of (code) examples.
Progressive Enhancement means gradually improving the user experience after verifying the target environment (e.g. browser) is capable of it. Start with content and ensure you maintain functionality & accessibility.
You can apply Progressive Enhancement in different ways:
Before you try to enhance the experience, you need to ensure the environment is capable of the enhancement. You test this by performing feature detections:
@supports()) - Natively test if specific CSS feature is supported using JS method or CSS declaration.
[requiredFeatures]evaluate to true.
Different environments (platforms, browsers, versions) have different capabilities. Support tables tell you what capabilities each environment has. Knowing the level of support can help you weigh an enhancement against the effort and impact of its implementation.
With progressive enhancement you support different experiences in different environments. These are some ways to test all these variations:
<noscript>tags. (note: Evergreen browsers only)
Asynchronously fetch and transition between static pages using ajax and
Jasper Moelker waives all rights to this work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law.
You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.