When building for the web, it is important to remember that not all users see your website through the same browser. Different browsers (Chrome, Firefox, Safari, Edge) and their various versions may interpret HTML, CSS, and JavaScript differently.
A web browser’s job is to read HTML documents and display them. The browser does not display the HTML tags but uses them to determine how to render the content of the page.
New HTML5 features (like Video, Canvas, or Geolocation) were not available in older browsers. If a user visits your site using an outdated browser, some features might not work. This is why developers use Browser Support Tables.
Most modern browsers fully support the latest HTML5 standards. Below is a quick reference for the minimum versions required for major features:
| Feature | Chrome | Edge | Firefox |
|---|---|---|---|
| <video> & <audio> | 4.0+ | 9.0+ | 3.5+ |
| Canvas (2D) | 4.0+ | 9.0+ | 2.0+ |
| Local Storage | 4.0+ | 8.0+ | 3.5+ |
| Web Workers | 4.0+ | 10.0+ | 3.5+ |
| Geolocation | 5.0+ | 12.0+ | 3.5+ |
A professional developer always prepares for "Graceful Degradation." This means providing a fallback if a browser cannot run a specific feature.
For media elements like <video> or <canvas>, you should always include text inside the tags for older browsers.
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag. Please upgrade
</video>
Before running a complex API (like Geolocation), check if the browser supports it using a simple if statement.
if ("geolocation" in navigator) {;
// Browser supports Geolocation
} else {
// Browser does not support Geolocation
alert("Please use a modern browser to see your location.");
}
Use a Doctype: Always start your document with <!DOCTYPE html> to tell the browser to use the latest rendering standards (Standard Mode).
CSS Reset: Use a CSS reset or "Normalize.css" to ensure that default margins and paddings look the same in all browsers.
Testing: Use tools like "Can I Use" (caniuse.com) to check the support status of any HTML element or CSS property before using it.
Polyfills: For essential features, you can use "Polyfills" (JavaScript libraries) that mimic modern features in older browsers.
Identify your target audience (Are they using mobile or old desktop browsers?).
Check compatibility on "Can I Use".
Implement fallbacks for critical features.
Test your site on at least two different browser engines (Blink/Chrome and WebKit/Safari).