Supporting Older Browsers: Progressive Enhancement

This philosophy focuses on creating core content first, then adding functionality atop that foundation. Its goal is that users with less-sophisticated browsers will see less-sophisticated pages, rather than broken pages.

Feature detection is a key part of this approach, preventing unsupported content from rendering.

Progressive Enhancement

Implementing Feature Detection

Video: Feature Detection in Action

Miriam Suzanne explains how to use selectors to detect supported CSS features.

webcompat-video-selectors-thumb.png

Watch the video

Media

The Media Capabilities API is sort of similar to feature detection, as it enables you to see if a browser will support a particular file format. MDN provides guidance about this API, as well as introductory information about codecs and file formats.

For high-speed, high-quality video, the royalty-free AV1 codec is one of the best options out there.

Also, applying appropriate attributes when presenting content can have a definite impact on performance and user experience, as described by Jen Simmons in her video about image loading performance.

webcompat-video-imageloading.png

Video: Improve Image Loading Performance

Jen Simmons shows you how to use aspect ratio attributes in CSS to reduce page load times and ensure images adapt to a variety of viewport sizes.

Watch the video

Responsive design

With the right CSS, you can design page layouts that will adapt to a variety of form factors, from phones or VR headsets to laptops and tablets. Alternative versions of images can be displayed depending on the display size.

You can learn about responsive design and responsive images on MDN.

The Developer Tools included in Firefox Developer are highly regarded for their CSS support. They include a specific mode to support you in creating responsively designed web content.

Cross-Browser Testing Resources

Whether you are a beginner and need an introduction to testing, or are looking for more advanced information about test automation, you'll find what you need on MDN.

Testing and Test Automation

Compatibility Troubleshooting

There are a broad range of approaches to compatibility debugging, including working with browser devtools and linters. Polyfills and libraries improve support for older and more limited browsers. (Also see Compatibility Tools and Data). In some cases, adapting your code to make allowances for different browser defaults can also make a difference, as discussed by Miriam Suzanne in the video below.

JavaScript Resources

HTML and CSS Resources

Video: CSS Resets

When you want to get the same results in multiple browsers with different defaults, CSS resets are the solution. Miriam Suzanne explains why.

webcompat-video-browserstyles.png

Watch video