How to target old browsers with CSS

I took the decision to drop old browsers support in the websites I make and was looking for a minimal and simple way to warn visitors using an old browser.

Here is the solution I will use from now on.

In our CSS, we just add a .browsercheck-message class and we change the display property according to a modern css property support.

/* Display message for old browsers only */
@supports (--css: variables) {
  .browsercheck-message {
    display: none;
  }
}
@supports not (--css: variables) {
  .browsercheck-message {
    display: block;
  }
}

In my case, I check if the browser supports CSS Variables (aka Custom Properties).

Browser support is wide (more than 94% according to Can I use at the time of writing).

I use CSS Variables in my websites and if someone use an unsupported browser, I think it's better to tell him/her that he/she would better update it 😜.

So if the browser supports CSS Variables, nothing will happen.

But if it doesn't, we will be able to show some warning banner to the visitor.

What you'll show to your visitor is up to you but here is a HTML snippet as an example:

<div class="browsercheck-message">
  <p>
    Your browser is too old and insecure! You would better
    <a rel="external" href="https://browsehappy.com/">update it</a>.
  </p>
</div>

You'll still have to handle the positionning and styling of this content block but I hope you got the idea!