@supports CSS alternative for Internet Explorer browsers

Question

While building my personal website, I have come to a stage of making it as much cross browser compatible as I can. Where ever I could, I added "backup" styles line before a default style:

.selector {
  position: flex; /* backup style */
  position: grid; 
}

But, on my header, I need a position: sticky . Internet Explorer doesn't support it. So I've thought using @supports not (position: sticky) . I tried it but it didn't work. I was sure that it should work as it should be support for all browsers! Not after I visited caniuse.com again .

---

The reason why I specifically need to use @supports and not only use position: fixed before position: sticky as a backup is because I also need to set a top margin to other content so it would appear the same:

@supports not (position: sticky) {
  header {
    position: fixed;
  }

  .content {
    margin-top: 500px;
  }
}

I have also read this thread Detecting IE11 using CSS Capability/Feature Detection which doesn't really help in my case.

Is there other, alternative way to change style to multiple elements based on if browser doesn't support position: sticky ?

Answer 1

Create your stylesheet for missing position: sticky support, then undo those changes and apply position: sticky in a positive @supports :

header {
  position: fixed;
}

.content {
  margin-top: 500px;
}

@supports (position: sticky) {
  header {
    position: sticky;
  }

  .content {
    margin-top: 0;  /* or whatever it was before */
  }
}