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.
Video: Feature Detection in Action
Miriam Suzanne explains how to use selectors to detect supported CSS features.
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.
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.
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.
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.
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.
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.