Learn

It’s difficult to keep track of which CSS properties are not supported in certain browsers and their versions. Polyfills are JavaScript codes that allow older browsers to behave as though they understand more advanced features than they actually do. These codes rewrite the HTML and CSS codes to simulate features that have not yet been adopted by that version of the browser.

For example, the text-shadow property is not supported in some older versions of Internet Explorer and Firefox but can be simulated using other CSS properties. Using JavaScript, we can replace CSS declarations depending on which browser version a user is using to view the website.

For a more comprehensive solution, we can use tools such as Modernizr or Polyfill.io to automatically identify and provide all of the polyfills that our website might need, ensuring that it can run as smoothly as possible on older browsers.

Instructions

1.

Let’s implement Polyfill.io in our Pleasant Cafe website. Polyfill.io will check and apply polyfills for CSS features that are not natively supported by older browsers.

Inside the <head> element of index.html, add the following <script> element:

<script src="https://polyfill.io/v3/polyfill.min.js"></script>

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?