如何根据浏览器API功能的存在应用CSS样式？

Question

我有一个页面，该页面具有不可见的（不透明度= 0），并且基于 istertersectectect 属性，因为用户向下滚动不透明度变化为1。它非常简单，并且是对互隔板的基本实现。

但是，我在Safari支持方面遇到了一些问题，也许像我这样的其他人正在使用较旧的浏览器。因此，我在下面的JS文件中使用了功能检测

if ("IntersectionObserver" in window){
    
    // Javascript here
}

，这对于更早工作的浏览器来说正常工作。但是，我的CSS仍然具有不透明度为0，我需要向那些不支持IntersectionObserver的浏览器展示该内容为1。

我该怎么做？

，换句话说，有什么方法可以在CSS中应用条件，即使有的话，我该如何将JS变量放入CSS？

是否会不胜感激。

Answer 1

交叉点观察者不支持iOS 12下方，因此对于较旧的版本，您可以使用，然后无需更改其他CSS或其他任何内容。

Answer 2

您可以使用CSS变量设置不透明度并在JS中更改该不透明度。

if ("IntersectionObserver" in window){
    
    // Javascript here
}
else {
  document.querySelector('.content').style.setProperty('--opacity', 1);
}

.content {
  --opacity: 0;
  opacity: var(--opacity);
}

<div class="content">some content</div>