{"componentChunkName":"component---src-templates-term-jsx","path":"/responsive-design-glossary/progressive-enhancement/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Progressive enhancement\",\n  \"plural\": false\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `With Progressive enhancement, you make sure that everyone can access your site or app. You do this by making sure the information or functionality is available in the simplest of technologies (often just HTML) and testing for support for additional features and complexity before adding them.`), mdx(\"p\", null, `For example, a form should work with just the HTML available, but could submit without a page refresh using JavaScript if that is available. You can also use a progressive enhancement approach for design by making sure the site works on all browsers, but adding additional non-vital CSS effects (like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `backdrop-filter`), `) to make the site more visually appealing in browsers that support it.`));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"With Progressive enhancement, you make sure that everyone can access your site or app. You do this by making sure the…","frontmatter":{"title":"Progressive enhancement","plural":false,"determiner":null},"fields":{"slug":"/responsive-design-glossary/progressive-enhancement/","ogFileName":"progressive-enhancement"}}},"pageContext":{"slug":"/responsive-design-glossary/progressive-enhancement/"}},"staticQueryHashes":["4164364741","425175329"]}