2.vue-element-admin SCSS

font-smoothing | text-rendering

@/styles/index.scss

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

font-smoothing

这个样式的主要功能是对字体的锯齿进行调整。
-webkit-font-smoothing 是webkit在自己的渲染引擎中增加的对字体抗锯齿的调整。这个调整在ios中表现比较明显，在windows中表现的不是很明显

text-rendering

它实际上是SVG属性,text-rendering告诉渲染引擎工作时如何优化显示文本。 浏览器会在渲染速度、易读性（清晰度）和几何精度方面做一个权衡

 

fill

@/components/SvgIcon

fill: currentColor;

常规的HTML-CSS中，是bai没有fill属性的。
fill属性只du在XML-SVG格式中存在，zhi可以作为daoXML-CSS属性存在，也可以作为XML-ATTR属性存在。
XML-CSS下有四种语法方式：
1、fill:rgb(0,0,255);：把rgb颜色填充到当前元素内
2、fill:#ffffff;：把十六进制颜色填充到当前元素内
3、fill:blue;： 把文字型颜色填充到当前元素内
4、fill:url(../sdf.gif);： 把图片填充到当前元素内
XML-ATTR下有对应的五种语法格式：
前四种，只需要改变一下写法，fill="blue"，
5、fill="url(#grad1)"：把上文绘制好的id为grad1的图片填充到当前元素内。

 

caret-color

@/views/login

caret-color属性可以改变输入框插入光标的颜色，同时又不改变输入框里面的内容的颜色。

input {
    color: #333;
    caret-color: red;
}

结果光标颜色变成红色，文字还是深黑色：

 

&:-webkit-autofill

@/views/login

最近在整理项目的时候，遇到了一个chrome浏览器自动填充的样式问题，

用户名跟密码的input都设置为透明颜色，但是会变成黄色，打开chrome调试工具，发现有个input:-webkit-autofill的 background-color: rgb(250, 255, 189)!important;这个样式，网上查询得三种方案，一种是把input自动输入关闭autocomplete="off"，第二种是设置box-shadow阴影覆盖默认样式，

input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px white inset;
     -webkit-text-fill-color: #333;
}

但是这种只适用于纯色背景

 

第三种是通过延长增加自动填充背景色的方式, 是用户感受不到样式的变化

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
     -webkit-transition-delay: 99999s;
     -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}

由于我这里输入框是背景为透明，选择第二种并没有效果，所以选择第三种。

 

@supports

@supports是CSS3新引入的规则之一，主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式.

基本使用方式：

@supports (display: grid) {
    .container {
        color: red;
    }
}

类似@media媒体查询，当浏览器支持display:grid这个CSS属性时才应用其中的样式

所以上述代码比如在IE9下就不会显示为红色字体。

主要用在防止旧浏览器不支持某些属性造成排版混乱的情况，使用@supports当做备选项。

此外，还支持逻辑运算符；not, and, or

例如

@supports not(display: grid){...}
@supports (display: grid) and (position: sticky){...}
@supports (display: grid) or (display: flex){...}

括号内不一定都要是“关键字”，只要是CSS语法都可以，比如：

@supports (border-radius: 4px) or (--btn-color: red){...}

上面就表示支持border-radius或者css variables就会加载其中的样式

js中也可以调用类似的方法：

if(CSS.supports('display', 'grid')){
    alert('it support!')
}

代码： 

当然，这个支持性IE下全跪

个人觉得这其中有个很矛盾的地方，就是这个属性基本只有在“高级”浏览器下才会是生效，但“高级”浏览器的支持范围又支持大部分的CSS属性，所以觉得把他当做一个“低级”浏览器检测器倒是个不错的选择