The practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user experience in older browsers.
The Problems with Graceful Degradation • “Doesn’t straddle technology inflection points well” • “Many designers don’t test anything but one version back” • “Does not address different needs of different audiences” • “It’s expensive to retrofit to new alternate devices” • “Whatever is ‘good enough’ usually rules” http://hesketh.com/publications/inclusive_web_design_for_the_future/
CSS /* Will work on any screen size */ .foo { width: 100%; } @media (min-width: 960px) { /* Will only work on larger screen sizes */ .foo { width: 600px; } }
CSS @supports ( (font-kerning: normal) and (font-feature-settings: "kern" 1) ) { .foo { font-kerning: normal; font-feature-settings: "kern" 1; } } Detect if all of several features are supported
CSS @supports ( (tranform: translate(-50%, -50%)) or (-webkit-tranform: translate(-50%, -50%)) ) { .foo { -webkit-tranform: translate(-50%, -50%); tranform: translate(-50%, -50%); } } Detect if either of several features are supported
Supports Feature Queries & Supports CSS Feature Supports Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
Supports Feature Queries & Does Not Support CSS Feature Supports Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
Does Not Support Feature Queries & Does Not Support CSS Feature Supports Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
Does Not Support Feature Queries & Supports CSS Feature Supports Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature