@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?

I think your best bet here is to use media queries for ie. You can find out more here:[How to target only IE (any version) within a stylesheet?](https://stackoverflow.com/questions/28417056/how-to-target-only-ie-any-version-within-a-stylesheet) — Jay Nyxed, Jun 12 '20 at 23:15
@JayNyxed Thank you for your reply. I will try with those methods and will close my question as duplicate if it helps. — Vepth, Jun 12 '20 at 23:18

score 3 · Accepted Answer · answered Jun 12 '20 at 23:24

3

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 */
  }
}

answered Jun 12 '20 at 23:24

Ry-

218,210
55
464
476

IE doesn't support [@support](https://caniuse.com/#search=%40supports). This is part of the question =) – Jay Nyxed Jun 12 '20 at 23:27
3

@JayNyxed: So it ignores the `@supports` block and receives `position: fixed` with a margin, as intended. – Ry- Jun 12 '20 at 23:28
@JayNyxed This does actually work. It's reversed, IE would use `position: fixed` and afterwards modern browsers who **support** `position: sticky` would overwrite fixed. Big brain, well done! – Vepth Jun 12 '20 at 23:29

@supports CSS alternative for Internet Explorer browsers

1 Answers1