How I Made My Site Look Modern Without Breaking Older Browsers with This CSS Trick

 

How I Made My Site Look Modern Without Breaking Older Browsers with This CSS Trick

How I Made My Site Look Modern Without Breaking Older Browsers with This CSS Trick

My site used to break in older browsers, and I’d spend hours tweaking CSS to patch the holes.

It’s exhausting. You want your site to shine, but older browsers keep throwing issues. Users deserve a website that shines on modern browsers but never breaks on older ones. The CSS @supports rule changed everything for me.

Here’s It in Action

Here is a simple example for CSS @supports rule:

/* Fallback for all browsers */
.card {
  display: block;
  margin: 1rem;
}

/* Only applied if grid is supported */
@supports (display: grid) {
  .card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }
}

How It Works

The @supports rule checks if a browser understands a CSS property or value. If it does, it applies your shiny modern styles. If not, it sticks to your fallback.

/* Single feature check */
@supports (display: flex) {
  /* Flex styles here */
}

/* Multiple features using and */
@supports (display: flex) and (gap: 1rem) {
  /* Styles that need both flex and gap */
}

/* Alternative features using or */
@supports (display: flex) or (display: grid) {
  /* Styles for either flex or grid */
}

/* Checking for lack of support using not */
@supports not (display: grid) {
  /* Fallback styles for browsers without grid */
}

Playing Around With Multiple Properties

Suppose you want to test out multiple CSS properties at once whether they are supported by browsers, here is a simple example on how to do it:

/* Single feature check */
@supports (display: flex) {
  /* Flex styles here */
}

/* Multiple features using and */
@supports (display: flex) and (gap: 1rem) {
  /* Styles that need both flex and gap */
}

/* Alternative features using or */
@supports (display: flex) or (display: grid) {
  /* Styles for either flex or grid */
}

/* Checking for lack of support using not */
@supports not (display: grid) {
  /* Fallback styles for browsers without grid */
}

Here Are Some Pro Tips To Remember

• Always choose fallback styles that work everywhere.
• CSS @supports rule should be used to improve user experience when there are chances modern CSS features can break in older browsers.
• To make things simple, always prefer testing the CSS properties individually.
• Make sure the fallback code is not very complex and is maintainable.

Final Takeaway

Today we had a look at a cool CSS feature that allows you to build modern beautiful websites with the support for older browsers.

Thank you. Let’s meet again with another cool adventure of CSS.

Thank you for being a part of the community