1. @supports
简介
- @supports是css中用来检测浏览器是否支持某些css语法功能的一个标签，它和@media一样支持or(或者)、and(并且)、not(非)关键字用来做逻辑判断。下面是一个使用supports来检测浏览器是否支持flex的示例代码：
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {
div { display: flex; }
}
- 或许现代浏览器大都支持flex语法了，不需要再用supports来判断，但是未来可能也会加入新的语法而需要进行兼容，这又涉及到渐进增强和优雅降级的概念，例如下面讲的适配iPhone X。
适配iPhone X
- iPhone X面市后，因为其特殊的手机屏幕而需要做特定的适配，这里就可以用到supports来进行检测了
/* 头部适配ios11 */
@supports (padding: constant(safe-area-inset-top)) or (padding: env(safe-area-inset-top)) {
body > header {
background: #fff;
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
}
- 上面是我们项目中用来使头部适配iPhone X的代码，其中用到了constant和env，算是新增的方法用来解决iPhone X适配问题(具体用法我也不太了解)，再使用supports来进行检测是否支持。
2. 隐藏滚动条
- 在webkit内核的浏览器里，可以在初始化css代码里这样写：
::-webkit-scrollbar{
display:none;
}
.className::-webkit-scrollbar{
width: 0;
}
3. 内容不可复制/选择
- 如果要页面上的部分内容不可选择，这样就禁止用户对页面内容进行复制，可以加上如下样式：
p {
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
