Easy Progressive Enhancement

Applying progressive enhancement can make sure that all your users get good experience. It does not have to be the same experience. But, it has to be a good experience.

Table of contents

• CSS error handling
• Make sure hidden elements are hidden
• Images without alternative text should not be ignored
• No motion first approach
• Use @supports query
• JavaScript for enhancement
• Learn more about progressive enhancement

CSS error handling

CSS is good at handling errors. If there is something the browser does not know, it will simply skip that line of code and continue to execute the rest of the code.

You should use this as a way of applying progressive enhancement.

For example, you want to use the ch unit, but you have a group of people who use your site and their browsers do not support the ch unit. You can give them a fallback by using the rem unit instead.

.container {
  max-width: 30rem;
  max-width: 60ch;
}

Browsers that don't support the ch unit will treat the above code as follows:

.container {
  max-width: 30rem;
  /* max-width: 60ch; */
}

Browsers that support ch unit will use the 60ch value as the max-width.

.container {
  max-width: 30rem;
  max-width: 60ch; /* higher specificity */
}

Related links for this section:

• ch (character) unit | Can I use... Support tables for HTML5, CSS3, etc
• rem (root em) units | Can I use... Support tables for HTML5, CSS3, etc

Make sure hidden elements are hidden

If an element has a hidden attribute, it must be hidden. To make sure that will happen, you can do the following:

[hidden] {
  display: none !important;
}

Images without alternative text should not be ignored

Decorative images should not be read by screen readers. You should leave the alternative text empty for such images. Then, you can enhance it by adding aria-hidden="true" attribute to make sure that no screen readers will pronounce the image.

<img src="/decorative.jpg" alt="" aria-hidden="true">

Adding aria-hidden="true" is only for enhancement to macOS 10.14.4 to hide a decorative image to VoiceOver when paired with Chrome. That's okay. Other users will not have any impact.

Reference: Contextually Marking up accessible images and SVGs

No motion first approach

Any motion that you want to add should be added inside the @media (prefers-reduced-motion: no-preference). This way, the transitions or animations will only be visible to the users that choose to see them. Also, those users that use browsers that don't support the query will not see the animations.

@media (prefers-reduced-motion: no-preference) {
  /* Add animation or transition or both */
}

Use @supports query

You can use @supports query to give users that support the feature a better experience.

You need to keep in mind to not use the not operator. The problem can happen when the browsers support the feature but do not support the @supports query.

Take a look at the following code:

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

@supports not (display: grid) {
  .container {
    max-width: 32rem;
    margin-right: auto;
    margin-left: auto;
  }
}

The users that don't support both CSS Grid and @supports query will have no styling.

You should do the following instead:

.container {
  max-width: 32rem;
  margin-right: auto;
  margin-left: auto;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: unset;
    margin-right: unset;
    margin-left: unset;
  }
}

Another thing to keep in mind is to make sure to check the support table. The purpose is to prevent something that is supported before @supports query from getting ignored.

For example, border-radius is getting supported before the @supports query.

@supports (border-radius: 1em) {
  .card {
    border-radius: 1em;
  }
}

For the above code to be executed, the browsers need to support both of them to have a rounded card. The users should be able to get a rounded card without supporting the @supports query.

You should use the "Can I Use" website to check the support for the @supports query and the feature that you want to use.

Related links for this section:

• CSS3 Border-radius (rounded corners) | Can I use... Support tables for HTML5, CSS3, etc
• CSS Feature Queries | Can I use... Support tables for HTML5, CSS3, etc

JavaScript for enhancement

You should use JavaScript to make the user experience better instead of replacing the native features whenever possible.

For example, if the website has a hamburger menu, then you can provide another experience for users that don't have JavaScript. For the users that have JavaScript, they will get a hamburger menu while the users that don't have JavaScript will have visible navigation links.

See the example in an action — Craft Designs That Make Real Impact - Designo

Try to view the site on mobile view and toggle the JavaScript.

Related resource — Everyone has JavaScript, right?

Learn more about progressive enhancement

Make Beautifully Resilient Apps With Progressive Enhancement

Is Progressive Enhancement Dead Yet? (Webbed Briefs)