Browsers differ in which HTML, CSS and JavaScript features they support. This lesson covers how to find out what you can use, which browsers we support, and how transpilation, polyfills and graceful degradation help.
Important
Work on this lesson in
advisormode.
Learning goals
- You can explain why browsers differ in feature support and look up whether a feature is safe to use, e.g. on Can I Use or MDN.
- You know which browsers we support in a typical project, and why an app with a closed user group can support fewer.
- You can explain what an evergreen browser is and why Safari, especially on iOS, lags behind the others.
- You can explain the difference between transpiling and polyfilling, and which features neither can provide.
- You can degrade gracefully when a feature may be missing — detect it and fall back — in HTML, CSS and JavaScript.
- You can test an app in browsers and devices you don't own, e.g. on BrowserStack, including mobile browsers.
- You can recognize outdated advice — Internet Explorer workarounds, transpiling to ES5 — and ignore it.
Resources
Read what's new to you, skim what's familiar, skip what you already master. Stop when you can meet the learning goals.
Your agent can also generate an overview, a tutorial or an explanation for anything here, tailored to what you already know. Just ask.
- 📄 Can I use Show archive.org snapshot — look up any HTML, CSS or JavaScript feature before you rely on it; over time you get a feeling for what is safe
- 📄 Baseline Show archive.org snapshot — the set of features that work in all current browsers, and since when
- 📄 ES compatibility tables Show archive.org snapshot — support matrix for JavaScript language features, per version
- 📄 MDN Web API reference Show archive.org snapshot — every browser API, with a compatibility table at the bottom of each page
- 📄 MDN: Cross-browser testing Show archive.org snapshot — the module, including feature detection Show archive.org snapshot in JavaScript and CSS
- 📄 Reminder: Safari is not an evergreen browser Show archive.org snapshot — why Safari and mobile Safari lag, and what that means for you
- 📄 BrowserStack Live: getting started Show archive.org snapshot — testing on real desktop and mobile browsers; ask a colleague for our shared credentials
- 📄 Browser-Support in unseren Webanwendungen — internal card, German; which browsers we support in projects
Exercises
Debugging old browsers
Use BrowserStack to view your MovieDB app in an older Safari version. Use increasingly older Safari versions until something breaks in your JavaScript or CSS.
Can you find out what missing feature is causing your app to break?
Tip
BrowserStack lets you open the developer tools within the remote computer.
Graceful degradation
Use the Web Share API Show archive.org snapshot to implement a share button on each movie's show view.
When the user presses the show button on a mobile phone, the phone's native share target selection should open. The share target selection allows me to pick a target app like WhatsApp, GMail, or Slack. When the user picks e.g. WhatsApp a text like this should be shared:
Check out "Sunshine" from 2007: https://moviedb/movies/123
When the current browser doesn't support the share() function, the user should instead see the shareable text in a
prompt
Show archive.org snapshot
from where they can copy & paste the text manually.
Tip
The Web Share API only works for
https://URLs. You can enable HTTPS for development.
Write your own polyfill
Write a Polyfill for NodeList#forEach Show archive.org snapshot . It should only be applied to browsers that don't implement it Show archive.org snapshot , for example IE11 or Chrome 50 in BrowserStack.
You don't need to implement the thisArg part of the Spec.
