Web developers must keep in mind not everyone can see and interact with a site in the same way. This is not just a fundamental of web accessibility, but also the fact there are many different web browsers out there running on a huge range of hardware platforms. They won't all have the same capabilities, so with that fact in mind we proceed to "Learn CSS: Browser Compatibility".

The first and most obvious topic is CanIUse.com, our index for features supported in various browsers and an invaluable resource. After that, the course talks about how different browsers have different default style sheets. There are reference resources to see what they are, and there exist tools to mitigate differences with a "normalized" or "reset" stylesheet. But if we simply can't (or won't) stay within standardized subset, we can use "prerelease" features via vendor prefixes. Either manually or via automated toolsl like Autoprefixer. This is the first of many tools within a whole category called "polyfill" that implements newer features in a backwards compatible way, making user experience more consistent across older/less supported browsers. I knew there were polyfill tools for transpiling new JavaScript features to run on browsers with older JavaScript engines, but I hadn't know there were CSS polyfill tools as well. Perhaps I needed to pull in one of them to run Angular on Windows Phone? Codecademy pointed to Modernizr and Polyfill.io as starting points to explore the world of polyfills.

Polyfill tools run at development time to decide what to do. But what if we can adjust CSS at runtime? This is the intent of CSS Feature Query, whose syntax looks a lot like CSS Media Query but for browser CSS feature support. Using this feature, however, is a bit of a Catch-22. Not all browsers support CSS Feature Query and obviously those browsers wouldn't be able to tell us as such via the very mechanism that we'd use to ask for such information. This impacts how we'd write CSS using feature queries, and a likely place for bugs. Finally: we'd need some ability to debug feature query issues via browser developer tools, but a quick web search came up empty.

Completion of this course also gave me Codecademy completion credit for their "Learn Intermediate CSS" course, which is a packaged compilation of the following set of courses I took individually:

  1. Learn CSS: Flexbox and Grid

  2. Learn CSS: Transitions and Animations

  3. Learn CSS: Responsive Design

  4. Learn CSS: Variables and Functions

  5. Learn CSS: Accessibility

  6. Learn CSS: Browser Compatibility

But Codecademy had even more web styling classes beyond this package! I proceeded onward to learn color design.