How do you serve pages for feature-constrained browsers?

The short answer

Use progressive enhancement — start with a basic, working version using semantic HTML, then add CSS and JavaScript enhancements for modern browsers. Use feature detection to check what the browser supports, provide fallbacks for unsupported features, and use polyfills when necessary.

Progressive enhancement

Build in layers, starting with the most basic:

1. HTML — content is readable and forms work without any CSS or JavaScript
2. CSS — layout and visual design enhance the experience
3. JavaScript — interactivity and dynamic features on top

Copy
<!-- Works without JavaScript -->
<form action="/search" method="GET">
  <input type="text" name="q" placeholder="Search..." />
  <button type="submit">Search</button>
</form>

If JavaScript is available, you can enhance this with autocomplete and instant results. If it is not, the form still works through a regular page submission.

Feature detection

Check for features before using them:

Copy
// JavaScript feature detection
if ('IntersectionObserver' in window) {
  // use IntersectionObserver for lazy loading
} else {
  // load all images immediately
}

Copy
/* CSS feature detection */
@supports (display: grid) {
  .layout {
    display: grid;
  }
}
/* Fallback for older browsers */
.layout {
  display: flex;
}

Polyfills

For critical features that older browsers do not support, include a polyfill. Use a self-hosted polyfill or a package like core-js:

Copy
import 'core-js/features/promise';
import 'core-js/features/fetch';

Or use conditional loading:

Copy
if (!window.Promise) {
  import('promise-polyfill');
}

Practical strategies

• Set a browser support baseline — decide which browsers you support (e.g., last 2 versions)
• Use Autoprefixer — adds vendor prefixes automatically
• Use Babel — transpiles modern JavaScript for older browsers
• Check caniuse.com — before using new APIs
• Test with BrowserStack — test on real older browsers

Why interviewers ask this

This tests whether you build for all users, not just those with the latest browsers. Progressive enhancement is a fundamental web development principle that ensures your site works everywhere.