@@支持Internet Explorer浏览器的CSS替代方法

Question

[在建立我的个人网站时，我已经进入了尽可能使它与跨浏览器兼容的阶段。我会尽可能在默认样式之前添加“备份”样式行：

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

但是，在我的标题上，我需要一个position: sticky。 Internet Explorer doesn't support。所以我考虑过使用@supports not (position: sticky)。我尝试过，但是没有用。我确信它应该能工作，因为它应该支持所有浏览器！我visited caniuse.com again之后没有。

---

我之所以特别需要使用@supports而不只是在position: fixed之前使用position: sticky作为备份的原因是，我还需要为其他内容设置一个上边距，这样它才看起来一样：

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

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

我也已经阅读了该线程Detecting IE11 using CSS Capability/Feature Detection，这对我的情况没有太大帮助。

是否还有其他替代方法可以根据浏览器是否不支持position: sticky将样式更改为多个元素？

Answer 1

创建样式表以缺少position: sticky支持，然后撤消那些更改并以正position: sticky形式应用@supports：

header {
  position: fixed;
}

.content {
  margin-top: 500px;
}

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

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