@supports CSS 替代 Internet Explorer 浏览器

Question

在构建我的个人网站时，我已经到了尽可能使其跨浏览器兼容的阶段。在可能的情况下，我在默认样式之前添加了 "backup" 样式行：

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

但是，在我的页眉上，我需要 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.

之所以我特别需要用@supports而不是只用position: fixed在position: sticky之前做备份是因为我还需要给其他内容设置top margin 所以它看起来是一样的：

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

@supports CSS 替代 Internet Explorer 浏览器

@supports CSS alternative for Internet Explorer browsers

html

css

internet-explorer

cross-browser