Loading

Check if browser supports CSS custom properties

Checking for CSS custom properties / CSS variable support is easy. In fact, we can use the "@support" at-rule to do so.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Check if browser supports CSS custom properties</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <h1 class="does-support">CSS variables are <strong>supported</strong> in your browser.</h1>

<h1 class="not-support">CSS variables are <strong>NOT supported</strong> in your browser.</h1>
  
  
</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
.does-support {
  display: none;
}
@supports (--a: 0) {
  .does-support {
    display: block;
  }
}

.not-support {
  display: block;
}
@supports (--a: 0) {
  .not-support {
    display: none;
  }
}

body {
  width: 50vw;
  margin: 35vh auto 0;
  background: -webkit-linear-gradient(right, #feac5e, #c779d0, #4bc0c8);
  background: linear-gradient(to left, #feac5e, #c779d0, #4bc0c8);
  color: white;
  text-align: center;
}
@supports (--a: 0) {
  body {
    background: -webkit-linear-gradient(left, #feac5e, #c779d0, #4bc0c8);
    background: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);
  }
}

h1 {
  font-weight: normal;
}
/* Downloaded from https://ahoj.co.uk/ */

This awesome code is write by Kriszta, you can se more from this user in the personal repository

vajkri
Kriszta
vajkri
Rating 3.50 average based on 0 ratings.
1 Downloads
112 Views
3.50 Rating
PREVIEW Open demo in external page
Download File Size: 1.9 KB
Open Original Open on codepen.io