5.不常见的css

1.响应式图片 picture

<picture>是HTML5的一个新元素；

• 如果<picture>元素与当前的<audio>,<video>元素协同合作将增强响应式图像工作的进程，它允许在其内部设置多个<source>标签，以指定不同的图像文件名，根据不同的条件进行加载；
• <picture>可以根据不同的条件加载不同的图像，这些条件可以是视窗当前的高度（viewport），宽度（width），方向（orientation），像素密度（dpr）等

<picture>
  <source media="(min-width: 650px)" srcset="/images/mix/html-css-js.png">
  <source media="(min-width: 465px)" srcset="/images/mix/htmlbig.png">
  <img src="/images/mix/img_avatar.png"  style="width:auto;">
</picture>

• caniuse

兼容性不是很好

• 针对不同屏幕宽度加载不同的图片
• 添加了屏幕的方向作为条件
• 添加了屏幕像素密度作为条件
• 添加图片文件格式作为条件
• 添加宽度描述
• 添加sizes属性

<picture>语法：

• <source>元素

<picture>标签它本身没有属性。神奇的地方是被用来当做的容器。 <source>元素，是用来加载多媒体的比如视频和音频，已经被更新用到图片的加载并且一些新的属性已经被添加：

• srcset (必需)

接受单一的图片文件路径(如：srcset=”img/minpic.png”). 或者是逗号分隔的用像素密度描述的图片路径(如：srcset=”img/minpic.png,img/minpic_retina.png 2x”),1x 的描述是默认不使用的。

• media (可选)

接受任何验证的media query,你可以看到在CSS @media选择器(如：media=”(min-width: 320px)”). 在之前的<picture>语法的例子里已经用到了。

• sizes（可选）

接收单一的宽度描述(如：sizes=”100vw”)或者单一的media query宽度描述(如：sizes=”(min-width: 320px) 100vw”).

或者逗号分隔的media query对宽度的描述(如：sizes=”(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)”) 最后的一个被当做默认的。

• type(可选)

接受支持的MIME类型(如: type=”image/webp” or type=”image/vnd.ms-photo”)

浏览器会根据这些提示和属性来加载确切的图片资源。根据标签的列表顺序。浏览器会使用第一个合适的<source>元素并忽略掉后面的<source>标签。

• 添加最后的<img>元素

<img>元素在<picture>内部用来当浏览器不支持时或者没有源标签匹配时的显示

2.CurrentColor

• currentColor是一个属性值，代表当前元素的color属性的值。

.box {
  color: red;
  border: 1px solid currentColor;
  box-shadow: 0 0 2px 2px currentColor;
}

上面代码，border和box-shadow的颜色都与color保持一致。这种写法的好处是，如果要修改color，只要修改一处就可以了，不用修改三个地方。

• currentColor的另一个用处，是让衍生类都继承基类的颜色。

.box {
    color: red;
}
.box .child-1 {
    background: currentColor;
}
.box .child-2 {
    color: currentColor;
    border 1px solid currentColor;
}

• 伪元素也可以使用currentColor。

.box {
    color: red;
}
.box:before {
    color: currentColor;
    border: 1px solid currentColor;
}

• caniuse

兼容性已经很好了

3.-webkit-text-size-adjust

当你放大网页时，一般情况下字体也会随着变大，而设置了以下代码后，字体只会显示你当前设置的字体大小，不会随着网页放大而变大了

html{-webkit-text-size-adjust: none;}

• 1、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;}

• 2、-webkit-text-size-adjust放在body上会导致页面缩放失效

• 3、body会继承定义在html的样式

• 4、用-webkit-text-size-adjust不要定义成可继承的或全局的

• caniuse

兼容性貌似不是特别好

4.scroll-behavior

兼容性还有些问题的

scroll-behavior:smooth 写在滚动容器元素上，可以让容器（非鼠标手势触发）的滚动变得平滑

凡是需要滚动的地方都加一句scroll-behavior:smooth 就好了

• can i use

5.CSS 伪元素 ::backdrop

::backdrop CSS 伪元素 是在任何处于全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的层级更低的元素之上）。

dialog::backdrop {
  background: rgba(255,0,0,.25);
}

• caniuse