Exercise 13.06: Progressive Enhancement

If we take a moment to analyze the code we created in Exercise 13.05, Animating a Paint Worklet, we will see that it presents a few difficulties as code we may want to use on a live website.

If you open the Exercise 13.05.html page in a browser that doesn't support either the CSS Paint API or CSS Properties and Values API, you will experience none of the stylings we expect and also some JavaScript errors.

The following screenshot shows the result of running Exercise 13.05.html in the Chrome browser, which does not support the CSS Properties and Values API. The dev tools console panel is open and shows a JavaScript error caused by a lack of support for CSS.registerProperty. The button is difficult to use as it appears with none of the expected styles:

Figure 13.23: Unsupported features running in Chrome

In this exercise, we will make our code more robust and provide a decent experience for those browsers that...