A Beginner's Guide to HTML5 Cross-Browser Polyfills

Key Points

• Polyfill is a tool that allows developers to use these features in older browsers that do not support modern web features, ensuring that users of these browsers can still access and use the website without losing any features or experience.
• Polyfill.io is an open source project that provides the Polyfill library on demand, allowing developers to use the latest standards while maintaining compatibility with older browsers. It reads the User-Agent HTTP header and only provides the necessary Polyfill, thus reducing bloating of modern browsers.
• While Polyfill helps enable modern features in older browsers, it also has some potential drawbacks, such as increasing the weight of the webpage, which may slow down loading time; and the possibility that it cannot be copied completely or accurately to be copied to its intended purpose Polyfill's functionality, resulting in inconsistencies or errors.

Web pages are developing rapidly. New frameworks, tools, and even languages ​​are emerging one after another. However, many developers feel that they have to move forward at the slowest speed of users. Modern browsers are “evergreen” – they are automatically updated in the background, require no permission requests, and have made great progress in improving new APIs.

However, even modern browsers do not implement all functions at the same time. It is frustrating to read articles about cutting-edge technologies in modern development and find that these technologies will not be available for years to come. Maybe you have checked the website's analysis data and found that there are still users using IE9? Should you write code like you did in 2011, or delegate everything to jQuery or some framework? There is another option. That is Polyfill.

What is Polyfill? Why do we need them?

Remy Sharp coined this term in a 2009 book and blog post. If this feature exists in the browser, Polyfill allows the browser to perform its operations; if it does not exist, Polyfill will step in to make up for the missing feature. They fill in the vulnerability of older browsers, the missing features we want to use today. It uses non-native code to copy native APIs.

What are the missing functions we are talking about?

In 2009, ECMAScript version 5 was released. This is a huge and radical advance for the language. ECMAScript 2015 also brought similar major updates. In the future, improvements to this language will be gradual and will happen every year. This is an exciting time, with new features constantly added to the language. In addition to the core language itself, there are various APIs for DOM and Web platforms. To highlight the differences between modern and older browsers, here is a comparison of the latest Chrome version to Internet Explorer 9 (some companies still regretfully mandatory support). There is also a table showing support for ECMAScript 6. The second table traces back only to IE 11, and as you can see, it supports almost no ES6 features. This is a lot of missing functions...

Polyfill and translation

Therefore, it is clear from the table above that we need to translate our code. It takes your shiny new syntax and outputs old-fashioned ECMAScript 5. If you want to use arrow functions, async/await, rest and spread parameters, classes, etc. in your code, you need to use tools like Babel to translate your ES6 code to ES5. However, you cannot Polyfill the syntax of JavaScript. While Babel converts your arrow functions into regular functions, Polyfill adds methods to global scope and native prototypes. Babel provides its own ES6 Polyfill, which in the Babel website says it provides "new built-in objects such as Promise or WeakMap, static methods such as Array.from or Object.assign, instance methods such as Array.prototype.includes , and generator functions. "Babel Polyfill can therefore provide us with all the ES6 features we want. But it misses a lot. Maybe you use the classList API to add and remove classes, or use matchMedia for media queries, but you still need to support IE9. Fortunately, there is a service that provides everything Babel Polyfill covers, and more.

Simplify your life with Polyfill.io

Polyfill.io is an open source project developed by the Financial Times. It currently receives up to 204 million requests per day and calls itself a “Polyfill’s specification library.” This on-demand Polyfill system allows you to browse Can I Use, shrugging, using the latest standards, and still compatible with older browsers.

Ideally, we should only Polyfill functions that we actually used and only send those Polyfills that a particular browser actually needs. Polyfill.io can meet both needs. The service reads the User-Agent HTTP header so that it only serves the necessary content, rather than providing bloated files to modern browsers. The new browser will receive almost empty files, and the older version of IE will receive a lot of code. You can reduce the weight of the code sent to the old machine by specifying the list of features you are using in the query string. If omitted, a set of default values ​​will be used. Using the service does require an extra blocking HTTP request, but in my opinion its ease of use is worth it. Google engineer Philip Walton has his own perspective on Polyfill and performance, which is worth reading if you are worried about additional requests.

What does it not cover?

Polyfill.io is very comprehensive, and it includes some cutting-edge browser APIs such as Fetch and Promises. However, there are plenty of Polyfills that allow you to try and use new technologies. Perhaps the most exciting thing is Web Components, a potentially revolutionary front-end development advancement that offers style encapsulation and easy-to-reuse features. Cross-browser support is finally coming. Google is pushing their Polymer project hard, which is basically a JavaScript framework built on top of a large Polyfill. However, Web Components should not be equivalent to this framework, because Web Components itself has great potential. You can use components without Polymer, but the full scope of the API has not been copied yet. The Web Animations API provides an efficient library-free way to build animations using Javascript. Browser support is not very good yet, but shim is reliable enough that I have confidently used this technology for animations on all production sites I have been involved in. It offers two options – one to fill in the features currently available in certain browsers. Another feature that has not been finalized yet, which has brought me to my last topic...

"Prolyfills": Testing emerging APIs

and Prolyfills—a speculative shim for the API that may appear.

Polyfill's unreleased features are becoming increasingly common as a proof of concept and are interesting to try out cutting-edge technologies for front-end development. Maybe you want to test out the Observables recommendations inspired by the popular RxJS library? There is a Prolyfill for this. Trying new technologies is one of the most exciting parts of being a developer.

Conclusion

That's it. We've learned what Polyfills are, why they are necessary, how to extract any Polyfills you might need from polyfill.io, and how Polyfill has not yet released features. But what about you? Are you using only language features that are available in all browsers you support? Or did you write modern code and then use Polyfill to make it work in older browsers? What is the oldest browser you need to support? Please let me know in the comments below.

This article was peer-reviewed by Graham Cox. Thanks to all SitePoint peer reviewers for getting SitePoint content to its best!

FAQs about HTML5 Cross-browser Polyfill

What is the purpose of using HTML5 cross-browser Polyfill?

HTML5 Cross-browser Polyfill is used to enable modern web features in older browsers that do not support them themselves. They act as fallback functions, providing the same functionality as modern browsers. This ensures that users of older browsers can still access and use the website or web application without losing any functionality or experience.

How to implement Polyfill in my web project?

Implementing Polyfill in a web project consists of several steps. First, you need to determine what functionality you want to Polyfill. Next, you need to find a suitable Polyfill to provide the feature. This can be done by searching online for a Polyfill library or repository. Once you find the appropriate Polyfill, you can include it in your project by adding it to the HTML file using script tags.

What are the potential problems or disadvantages of using Polyfill?

While Polyfills are very useful, they do have some potential drawbacks. One of the main problems is performance. Polyfill adds extra weight to the page, which can slow down loading time and negatively affect the user experience. Also, not all Polyfills are the same. Some may not fully or accurately copy what they are designed to be Polyfill, which can lead to inconsistencies or errors.

How to choose the right Polyfill for my needs?

Choose the right Polyfill depends on several factors. First, you need to consider what you are trying out Polyfill and find a Polyfill that accurately replicates its functionality. You should also consider the browsers you want to target and make sure Polyfill supports them. Finally, you should consider the size and performance of Polyfills as these can affect the load time and overall performance of your website.

Can I create my own Polyfill?

Yes, you can create your own Polyfill. This involves writing a script that checks whether the browser supports a certain feature and provides it if the browser does not. However, creating your own Polyfill can be complex and time-consuming, and it is often easier and more efficient to use an existing Polyfill.

What are the popular libraries or resources available to find Polyfills?

There are several popular libraries and resources available for finding Polyfills. These include Polyfill.io, which provides a service that automatically returns Polyfills required by the browser; Modernizr library, which contains a series of Polyfills; and GitHub repository HTML5 cross-browser Polyfill, a comprehensive list of Polyfills.

How to test if Polyfill works properly?

Testing Polyfill includes checking whether the features it is designed to provide work properly in the browser you want to target. This can be done by using the browser testing tool or manually testing the feature in different browsers. If the feature works as expected, Polyfill works properly.

Can Polyfill be used with JavaScript frameworks such as React or Angular?

Yes, Polyfill can be used with JavaScript frameworks such as React or Angular. In fact, these frameworks often recommend and even require certain Polyfills for optimal compatibility and performance. The process of implementing Polyfill using these frameworks is similar to implementing Polyfill in a regular web project.

Is Polyfill a long-term solution to browser compatibility issues?

Polyfill is more like a short-term solution to the browser compatibility issue. They are used to fill in the browser's support gaps for certain features until the browser catches up and supports them natively. As browsers continue to evolve and update, the demand for certain Polyfills will decrease.

What is the difference between Polyfill and shim?

Polyfill and shim are both used to provide back-up features for features that are not supported by the browser. However, shim usually provides fallback functionality for missing APIs by using different existing APIs, while Polyfill provides new implementations that the browser can use as if it is native.

The above is the detailed content of A Beginner's Guide to HTML5 Cross-Browser Polyfills. For more information, please follow other related articles on the PHP Chinese website!