5.不常見的css

這是我參與8月更文挑戰的第5天，活動詳情查看：8月更文挑戰css

1.響應式圖片 picture

<picture>是HTML5的一個新元素；html

若是<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

兼容性不是很好web

針對不一樣屏幕寬度加載不一樣的圖片
添加了屏幕的方向做爲條件
添加了屏幕像素密度做爲條件
添加圖片文件格式做爲條件
添加寬度描述
添加sizes屬性

`<picture>`語法：

<source>元素

<picture>標籤它自己沒有屬性。神奇的地方是被用來當作的容器。chrome

<source>元素，是用來加載多媒體的好比視頻和音頻，已經被更新用到圖片的加載而且一些新的屬性已經被添加：瀏覽器

srcset (必需)

接受單一的圖片文件路徑(如：srcset=」img/minpic.png」).markdown

或者是逗號分隔的用像素密度描述的圖片路徑(如：srcset=」img/minpic.png,img/minpic_retina.png 2x」),1x 的描述是默認不使用的。ide

media (可選)

接受任何驗證的media query,你能夠看到在CSS @media選擇器(如：media=」(min-width: 320px)」).oop

在以前的<picture>語法的例子裏已經用到了。post

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