Q139: Feature Detection, Polyfills and Progressive Enhancement

What Interviewers Want To Evaluate

This question checks whether you understand compatibility strategy. Interviewers want feature detection, polyfills, transpilation, progressive enhancement, graceful degradation, browser support policy, and why user-agent sniffing is fragile.

Senior answers should connect compatibility to product audience, analytics, bundle size, and risk.

Short Interview Answer

Feature detection checks whether a browser supports a capability before using it. Polyfills add missing APIs where possible. Transpilation converts newer syntax into older syntax, but it does not automatically add missing runtime APIs. Progressive enhancement builds a functional baseline first, then adds richer behavior for capable browsers. A senior compatibility strategy is based on user data, product requirements, bundle cost, and explicit browser support policy.

Detailed Interview Answer

Browser compatibility is not just a technical preference. It is a product decision.

The app should define:

supported browsers
minimum versions
fallback behavior
testing matrix
polyfill strategy
monitoring plan

Without a policy, teams guess.

Feature Detection

Feature detection checks capability directly.

if ("clipboard" in navigator) {
  await navigator.clipboard.writeText(text);
} else {
  fallbackCopy(text);
}

This is better than assuming support from browser name.

User-Agent Sniffing

User-agent sniffing checks browser strings.

This is fragile because:

browser strings change
browsers pretend to be other browsers
features vary by version and platform
embedded webviews behave differently

Use feature detection where possible.

Polyfills

A polyfill implements a missing API.

Examples:

Promise
Array.prototype.includes
fetch
URL
IntersectionObserver

Not every feature can be polyfilled perfectly, especially low-level platform capabilities.

Transpilation vs Polyfill

Transpilation changes syntax.

optional chaining -> older JavaScript expression
class fields -> compatible output

Polyfills add runtime APIs.

Promise
Map
fetch

You may need both.

Progressive Enhancement

Progressive enhancement starts with a working baseline.

basic form submits
enhanced validation if JavaScript loads
drag and drop if supported
clipboard button if supported
offline mode if service worker available

This approach improves resilience.

Graceful Degradation

Graceful degradation starts from the full experience and provides fallback when capabilities are missing.

Both ideas are related. The key is that unsupported users should not hit a blank or broken workflow without explanation.

Bundle Cost

Polyfills increase JavaScript size.

Loading every polyfill for every user can hurt performance.

Options include:

target modern browsers
serve differential bundles where supported
load polyfills conditionally
avoid unnecessary APIs
define support based on analytics

Browser Support Policy

A practical support policy may include:

last two major versions
browsers above 1 percent usage
company-required browser
mobile webview support
explicit unsupported page

The policy should match the actual audience.

Common Mistakes

A common mistake is assuming build transpilation covers all runtime compatibility.

Another mistake is adding heavy polyfills for tiny usage without measuring audience need.

Another mistake is testing only Chrome desktop.

Senior Trade-Offs

Compatibility is a balance among reach, performance, maintenance, and product risk.

If an unsupported browser is used by paying customers, it matters. If a rare browser adds large bundle cost for everyone, the trade-off should be explicit.

Code or Design Example

async function copyText(text) {
  if (navigator.clipboard?.writeText) {
    await navigator.clipboard.writeText(text);
    return true;
  }

  return fallbackCopyText(text);
}

This uses capability detection and a fallback path.

Debugging Workflow

When compatibility bugs appear:

identify browser, version, OS, and webview
check actual feature support
check transpilation target
check missing polyfills
check console syntax errors
check API permission requirements
test fallback path
update support policy or implementation

Interview Framing

Explain feature detection, then distinguish transpilation from polyfills. Finish with progressive enhancement and browser support policy.

Revision Notes

Compatibility strategy should be based on capabilities, user audience, and measured trade-offs.

Key Takeaways

Modern frontend engineering supports users deliberately. It does not blindly chase every browser or ignore real audience constraints.

Follow-Up Questions

1. What is feature detection?
2. Why is user-agent sniffing fragile?
3. What is a polyfill?
4. What does transpilation do?
5. Why does transpilation not replace polyfills?
6. What is progressive enhancement?
7. What is graceful degradation?
8. How do polyfills affect bundle size?
9. How should browser support be defined?
10. How do you debug browser compatibility?

How I Would Answer This In A Real Interview

I would say feature detection checks capability directly, polyfills add missing runtime APIs, and transpilation changes syntax. Then I would connect compatibility to browser support policy, user analytics, fallback design, and bundle cost.