M

MLOG

English

Learn how to build robust and accessible web applications using progressive enhancement and feature detection. This guide provides a global perspective, practical examples, and best practices for creating inclusive and future-proof web experiences.

Progressive Enhancement: Feature Detection - Building Resilient Web Experiences for a Global Audience

In the ever-evolving landscape of the internet, ensuring that your web applications are accessible, performant, and future-proof is paramount. One of the most effective strategies to achieve this is progressive enhancement, a design philosophy that emphasizes building core functionality that works across a wide range of devices and browsers while adding enhancements based on the capabilities of the user's environment. A crucial component of progressive enhancement is feature detection, which allows developers to determine if a browser supports a specific feature before implementing it. This approach guarantees a consistent user experience, especially across the diverse technological landscape of the world.

What is Progressive Enhancement?

Progressive enhancement is a web development strategy that starts with a solid, accessible foundation and then layers on advanced features as the browser or device allows. This approach prioritizes content and core functionality for all users, regardless of their device, browser, or internet connection. It embraces the idea that the web should be usable and informative for everyone, everywhere.

The core principles of progressive enhancement include:

Why Feature Detection is Essential

Feature detection is the cornerstone of progressive enhancement. Instead of relying on browser sniffing (identifying the user's browser based on its user agent string), feature detection focuses on what the browser *can* do. This is a much more reliable approach because:

Methods for Feature Detection

There are several methods for detecting browser features, each with its strengths and weaknesses. The most common method uses JavaScript to check for the presence of a specific feature or API.

1. Using JavaScript to Check for Features

This method is the most prevalent and flexible. You check for the availability of a specific browser feature using JavaScript code.

Example: Checking for the `fetch` API (JavaScript for fetching data from the network)


if ('fetch' in window) {
  // The 'fetch' API is supported. Use it to load data.
  fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // Process the data
    })
    .catch(error => {
      // Handle errors
    });
} else {
  // The 'fetch' API is not supported. Use a fallback like XMLHttpRequest.
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json');
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // Process the data
    } else {
      // Handle errors
    }
  };
  xhr.onerror = function() {
    // Handle errors
  };
  xhr.send();
}

In this example, the code checks if the `fetch` property exists in the `window` object. If it does, the browser supports the `fetch` API, and the code can use it. Otherwise, a fallback mechanism (using `XMLHttpRequest`) is implemented.

Example: Checking for `classList` API support


if ('classList' in document.body) {
  // Browser supports classList.  Use classList methods (e.g., add, remove)
  document.body.classList.add('has-js');
} else {
  // Browser does not support classList. Use alternative methods.
  // e.g., using string manipulation to add and remove CSS classes
  document.body.className += ' has-js';
}

2. Using CSS Feature Queries (`@supports`)

CSS feature queries, denoted by the `@supports` at-rule, let you apply CSS rules based on whether the browser supports specific CSS features or property values.

Example: Using `@supports` to style a layout using Grid Layout


.container {
  display: flex; /* Fallback for browsers without grid */
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

In this example, the `.container` initially uses a `flex` layout (a widely supported feature). The `@supports` rule checks if the browser supports `display: grid`. If it does, the styles within the rule are applied, overriding the initial flex layout with a grid layout.

3. Libraries and Frameworks

Several libraries and frameworks provide built-in feature detection capabilities or utilities that simplify the process. These can abstract away the complexity of checking for specific features. Common examples include:

Example: Using Modernizr


<html class="no-js" >
<head>
  <!-- Other meta tags, etc. -->
  <script src="modernizr.min.js"></script>
</head>
<body>
  <div class="my-element"></div>
  <script>
    if (Modernizr.borderradius) {
      // Apply border-radius styles
      document.querySelector('.my-element').style.borderRadius = '10px';
    }
  </script>
</body>
</html>

In this scenario, Modernizr adds the class `borderradius` to the `` element if the browser supports `border-radius`. The JavaScript code then checks for this class and applies the corresponding style.

Practical Examples and Global Considerations

Let's explore some practical examples of feature detection and how to implement them, taking into account global considerations such as accessibility, internationalization (i18n), and performance.

1. Responsive Images

Responsive images are essential for delivering optimal image sizes based on the user's device and screen size. Feature detection can play a crucial role in implementing them effectively.

Example: Checking for `srcset` and `sizes` support

`srcset` and `sizes` are HTML attributes that provide information about the image source options to the browser, allowing it to select the most appropriate image for the current context. 


<img
  src="image-fallback.jpg"
  srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1024w"
  sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
  alt="Description of the image"
>

The `srcset` attribute specifies a list of image sources with their widths. The `sizes` attribute provides information about the image's intended display size based on media queries.

If the browser does not support `srcset` and `sizes`, you can use JavaScript and feature detection to achieve a similar outcome. Libraries like `picturefill` provide a polyfill for older browsers.


if (!('srcset' in document.createElement('img')) || !('sizes' in document.createElement('img'))) {
  // Use a polyfill like picturefill.js
  // Link to picturefill: https://scottjehl.github.io/picturefill/
  console.log('Using picturefill polyfill');
}

This approach ensures that all users receive optimized images, regardless of their browser.

2. Web Animations

CSS animations and transitions can significantly enhance user experience, but they can also be distracting or problematic for some users. Feature detection allows you to provide these animations only when appropriate.

Example: Detecting support for CSS transitions and animations


if (Modernizr.cssanimations && Modernizr.csstransitions) {
  // Apply animation classes
  document.body.classList.add('animations-enabled');
} else {
  // Use a static UI or a more basic experience without animations
  document.body.classList.add('animations-disabled');
}

By disabling animations for users with older browsers or when the user has expressed a preference for reduced motion (via the `prefers-reduced-motion` media query), you can provide a smoother and more inclusive experience.

Global considerations for animations: Consider that some users might have vestibular disorders or other conditions that can be triggered by animations. Always provide an option to disable animations. Respect the user's `prefers-reduced-motion` setting.

3. Form Validation

HTML5 introduced powerful form validation features, such as required fields, input type validation (e.g., email, number), and custom error messages. Feature detection allows you to leverage these features while providing graceful fallbacks.

Example: Checking for HTML5 form validation support


if ('checkValidity' in document.createElement('input')) {
  // Use HTML5 form validation.
  // This is built-in, and doesn't require JavaScript
} else {
  // Implement JavaScript-based form validation.
  // A library such as Parsley.js can be useful:
  // https://parsleyjs.org/
}

This ensures that users with older browsers still receive form validation, even if it is implemented using JavaScript. Consider providing server-side validation as a final layer of security and robustness.

Global considerations for form validation: Ensure your error messages are localized and accessible. Provide clear, concise error messages in the user's language. Consider how different date and number formats are used globally.

4. Advanced Layout Techniques (e.g., CSS Grid)

CSS Grid Layout provides a powerful way to create complex, responsive layouts. However, it's important to ensure that older browsers are handled gracefully.

Example: Using CSS Grid with a fallback


.container {
  display: flex;  /* Fallback for older browsers */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

This code uses `flexbox` as a fallback for browsers that do not support `grid`. If the browser supports `grid`, the layout will be rendered using grid. This approach creates a responsive layout that degrades gracefully in older browsers.

Global considerations for layout: Design for different screen sizes, aspect ratios, and input methods (e.g., touchscreens, keyboard navigation). Test your layouts on various devices and browsers used globally. Consider right-to-left (RTL) language support if your target audience includes users who read RTL scripts (e.g., Arabic, Hebrew).

Best Practices for Feature Detection

To maximize the effectiveness of feature detection, adhere to these best practices:

Addressing Accessibility (a11y) in Feature Detection

Accessibility is a critical component of progressive enhancement. Feature detection can help ensure that your website is accessible to users with disabilities.

Internationalization (i18n) and Feature Detection

When building a global website, consider i18n. Feature detection can contribute to your i18n efforts by facilitating language-specific content and behavior.

Conclusion: Building for the Future

Progressive enhancement and feature detection are not merely technical practices; they are fundamental principles of web development that enable you to create inclusive, performant, and resilient web experiences for a global audience. By embracing these strategies, you can build websites that adapt to the ever-changing technological landscape, ensuring that your content is accessible and engaging for all users, regardless of their device, browser, or location. By focusing on core functionality, embracing feature detection, and prioritizing accessibility, you create a more robust and user-friendly web experience for everyone.

As the web continues to evolve, the importance of progressive enhancement will only increase. By adopting these practices today, you are investing in the future of your web applications and ensuring their success in the global digital ecosystem.

Actionable Insights: