CSS @supports

@supports (display: grid) {
  div {
    background: blue;
  }
}
div {
  background: red;
}

//@support regel wordt uitgevoerd als de browser grid ondersteunt
//door de cascade wordt de div toch rood

div {
  background: red;
}
@supports (display: grid) {
  div {
    background: blue;
  }
}

//@support regel wordt uitgevoerd als de browser grid ondersteunt

div {
  background: red;
}
@supports (scroll-behaviour: smooth) {
  div {
    background: blue;
  }
}

//@support is altijd false door de typo 'behaviour'
//(instinker)

div {
  background: red;
}
@supports (scroll-behavior: smooth) {
  div {
    background: blue;
  }
}

//@support regel wordt uitgevoerd als de browser scroll-behavior ondersteunt

div {
  background: red;
}
@supports (scroll-snap-stop: always) {
  div {
    background: blue;
  }
}

//@support regel wordt uitgevoerd als de browser scroll-snap ondersteunt

div {
  background: red;
}
@supports (position: sticky) {
  div {
    background: blue;
  }
}

//@support regel wordt uitgevoerd als de browser position sticky ondersteunt
        

div {
  background: red;
}
@supports (animation-timeline: works) {
  div {
    background: blue;
  }
}

//@support regel wordt uitgevoerd als de browser animation-timeline  ondersteunt