一些css相关知识总结

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;
}