5.不常见的css

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

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;}
复制代码

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

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

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

• 四、用-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