css 判断在支持某些属性的情况下再添加样式

复制代码
:root {
  --safe-area-inset-top: 0px;
  --safe-area-inset-right: 0px;
  --safe-area-inset-bottom: 0px;
  --safe-area-inset-left: 0px;
  --safe-area-inset-constant-top: 0px;
  --safe-area-inset-constant-right: 0px;
  --safe-area-inset-constant-bottom: 0px;
  --safe-area-inset-constant-left: 0px;
}

@supports (top: env(safe-area-inset-top, 44px)) {
  :root {
    --safe-area-inset-top: env(safe-area-inset-top, 44px);
    --safe-area-inset-right: env(safe-area-inset-right, 34px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 34px);
    --safe-area-inset-left: env(safe-area-inset-left, 34px);
  }
}

@supports (top: constant(safe-area-inset-top)) {
  :root {
    --safe-area-inset-constant-top: constant(safe-area-inset-top);
    --safe-area-inset-constant-right: constant(safe-area-inset-right);
    --safe-area-inset-constant-bottom: constant(safe-area-inset-bottom);
    --safe-area-inset-constant-left: constant(safe-area-inset-left);
  }
}
复制代码
@supports 来实现。
、、
js 判断
window.CSS && CSS.supports('padding: env(safe-area-inset-top)')

 

posted @   蓓蕾心晴  阅读(12)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
历史上的今天:
2022-11-27 leetcode 56. 合并区间 js实现
2018-11-27 css如何实现一个元素高度固定宽度按比例显示?
2018-11-27 多行或者单行文本超出显示点点点,如果保证内容始终垂直居中?
点击右上角即可分享
微信分享提示