Platform under construction

Versions & Runtimes

Intermediate

Browser Support

Browser support means checking whether the people who visit your site can actually run the JavaScript you wrote, not only whether it works on your laptop.

if ("fetch" in window) {
  console.log("Fetch is available.");
} else {
  console.log("Use a fallback path.");
}

Versions & Runtimes

Your code runs in the user browser, so the user browser has a vote.

A feature can be valid JavaScript and still fail for a user if their browser, webview or device does not support it. That is why support checks are part of frontend engineering.

Support is not only about old browsers. Embedded webviews, in-app browsers, managed corporate machines and search crawler environments can all behave differently from your main development browser.

Good support strategy starts with target environments. You decide which browsers matter, then choose syntax, APIs, transpilation and fallbacks that match that decision.

Syntax support

Can the browser parse the code? Unsupported syntax can stop the script immediately.

API support

Can the browser provide the object or method you call, such as fetch or IntersectionObserver?

Behavior support

Does the feature behave consistently enough for your use case?

Fallback strategy

What happens when support is missing: simpler behavior, a message or a polyfill?

Examples

Good JavaScript respects its target environment.

Feature detection before using an API

const status = document.querySelector("[data-status]");

if ("IntersectionObserver" in window) {
  status.textContent = "Lazy loading behavior is available.";
} else {
  status.textContent = "Showing content without lazy behavior.";
}

Assuming every browser supports the same API

const observer = new IntersectionObserver(handleEntries);
observer.observe(document.querySelector(".card"));

// This throws when the API is missing.

Rules that matter

Version and runtime choices are production decisions.

Modern JavaScript is powerful, but support is never automatic. Choose syntax, APIs and tooling based on the environments that must run the code.

Define target browsers

Support decisions must be based on real users and project requirements.

Separate syntax and APIs

Transpiling can fix some syntax, but it does not magically add every browser API.

Use feature detection

Check for the thing you need instead of guessing from browser names.

Keep critical paths robust

Navigation, forms and content should not disappear because an enhancement failed.

Test beyond one browser

At minimum, check Chromium, Safari and Firefox behavior for frontend work.

Use analytics carefully

Traffic data can help decide support targets, but new sites may not have enough data yet.

Production thinking

Support strategy keeps modern JavaScript reliable.

Why does this matter?

Browser support turns JavaScript from a local experiment into a reliable website. It is the difference between works for me and works for the audience.

Accessibility

Fallbacks are an accessibility issue. Users with older devices, locked-down browsers or assistive tech should still be able to use the page.

Production note

Production support should be written down: target browsers, test devices, fallback rules and tooling assumptions.

SEO note

Crawler support is not identical to user browser support. Important links and text should be crawlable without depending on fragile client behavior.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Change the check from localStorage to fetch.
Write a more user-friendly fallback message.
Add a class to the page when support is available.

Practice assignment

Do this before moving to the next topic.

Choose one browser API you want to use.
Check whether it needs a fallback.
Write a feature-detection if statement for it.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Browser Support.