在不久前柳爽，Chrome 69 正式發(fā)布谚鄙，作為 Chrome 的 10 周年版本，帶來了許多新變化芥丧，比如新的 UI 風(fēng)格紧阔，使其整體更符合 Material Design 的設(shè)計(jì)，而且還添加了以下內(nèi)容的支持：
- CSS Scroll Snap娄柳，幫助你創(chuàng)建流暢順滑的滾動(dòng)體驗(yàn)
- Display cutouts寓辱，兼容全面屏、劉海屏
- Web Locks API赤拒，通過獲取異步鎖秫筏，在任務(wù)執(zhí)行時(shí)保持該鎖，等執(zhí)行完畢后釋放該鎖
CSS Scroll Snap
CSS Scroll Snap 可以幫助開發(fā)者創(chuàng)建流暢順滑的滾動(dòng)體驗(yàn)挎挖，通過聲明滾動(dòng)位置这敬，告知瀏覽器在執(zhí)行滾動(dòng)之后應(yīng)該停在哪里。這對(duì)于圖片輪播或分頁時(shí)非常有用蕉朵，可以讓用戶滾動(dòng)到指定位置崔涂。
對(duì)于圖片輪播，可以給滾動(dòng)容器添加 scroll-snap-type: x mandatory;始衅，給每個(gè)圖片添加 scroll-snap-align: center;冷蚂，這樣，當(dāng)用戶滾動(dòng)時(shí)汛闸，每一張圖片會(huì)平滑的滾動(dòng)至最合適的位置蝙茶。
下面用 Vue 寫一個(gè)示例：
<div id="app">
<p>
<label for="spanAlign">scroll-snap-align: </label>
<select id="spanAlign" v-model="spanAlign">
<option value="start">Start</option>
<option value="center">Center</option>
<option value="end">End</option>
</select>
</p>
<button @click="prev">prev</button>
<button @click="next">next</button>
<div class="container" ref="container">
<div class="item" v-for="n in 10" :style="itemStyle">{{n}}</div>
</div>
</div>
window.app = new Vue({
el: '#app',
data() {
return {
spanAlign: 'center',
};
},
computed: {
itemStyle() {
return {
scrollSnapAlign: this.spanAlign,
};
},
},
methods: {
prev() {
const width = this.$refs.container.querySelector('.item').clientWidth;
this.$refs.container.scrollBy(-width, 0);
},
next() {
const width = this.$refs.container.querySelector('.item').clientWidth;
this.$refs.container.scrollBy(width, 0);
},
},
});
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
#app {
position: relative;
width: 500px;
padding: 0 16px;
}
.container {
scroll-snap-type: x mandatory;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
align-items: center;
height: 300px;
}
.item {
scroll-snap-align: center;
position: relative;
min-width: 75%;
min-height: 90%;
margin: 10px;
border-radius: 10px;
background-color: #9fa8da;
font-size: 40px;
text-align: center;
vertical-align: middle;
}
可以看到，圖片滾動(dòng)時(shí)诸老，會(huì)平滑地滾動(dòng)到指定的位置隆夯。
Display cutouts (aka notches)
現(xiàn)在有越來越多的手機(jī)使用了劉海屏，為了解決這種情況，Chrome 瀏覽器會(huì)為頁面添加一些額外的 margin蹄衷，這樣就能保證頁面內(nèi)容不會(huì)被劉海遮住忧额。
但如果想使用這部分空間的話的話，我們就需要在 meta 標(biāo)簽中添加 viewport-fit 并使用 CSS 變量愧口，比如我們可以先在 viewport meta 中設(shè)置 viewport-fit 屬性為 cover睦番。
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
之后就能使用 CSS 變量 safe-area-inset-* 去布局整個(gè)頁面
.content {
margin-left: env(safe-area-inset-left);
margin-right: env(safe-area-inset-right);
}
下圖是不同的 CSS 變量所代表的值
該特性是 Chrome 69 最新支持的，而 Safari 11 早已支持該特性调卑，相關(guān)內(nèi)容可查看 Designing Websites for iPhone X
Web Locks API
Web Locks API 使得開發(fā)者可以獲取異步鎖抡砂，在任務(wù)執(zhí)行時(shí)保持，并在任務(wù)執(zhí)行結(jié)束后釋放恬涧。當(dāng)鎖在保持狀態(tài)時(shí)，在同一個(gè) origin 內(nèi)的腳本無法獲取同一個(gè)鎖碴巾，這樣有助于協(xié)調(diào)共享資源的使用溯捆。
例如，如果在多個(gè) tab 中運(yùn)行的 Web 應(yīng)用中想要保證只有一個(gè) tab 可以進(jìn)行網(wǎng)絡(luò)同步厦瓢，那么就需要嘗試獲取一個(gè)名叫 network_sync_lock 的鎖提揍。
navigator.locks.request('network_sync_lock', async lock => {
// The lock has been acquired.
await do_something();
await do_something_else();
// Now the lock will be released.
});
這樣第一個(gè) tab 將會(huì)進(jìn)行網(wǎng)絡(luò)同步，如果其他的 tab 嘗試獲取該鎖煮仇，將會(huì)進(jìn)入隊(duì)列等待劳跃，當(dāng)該鎖被釋放，隊(duì)列中下一個(gè)任務(wù)則會(huì)被準(zhǔn)許獲取該鎖并執(zhí)行浙垫。
And More!
以上內(nèi)容只是 Chrome 69 中針對(duì)開發(fā)者的新特性中的一部分刨仑，下面介紹更多的新特性：
- 根據(jù) CSS4 的規(guī)范，支持圓錐漸變?nèi)?chuàng)建顏色過渡夹姥。
示例：
.test {
width: 300px;
height: 300px;
border-radius: 50%;
background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
最終效果如下：
- 支持 Element.toggleAttribute() 方法杉武，用于切換元素屬性的存在性，用法類似于
classList.toggle() - 支持 Array.prototype.flat() 和 Array.prototype.flatMap() 兩個(gè)方法辙售，它們返回一個(gè)新的數(shù)組轻抱，該數(shù)組包含所有子數(shù)組的元素。
-
OffscreenCanvas將主線程放至 worker 執(zhí)行旦部，以幫助消除性能瓶頸祈搜。
總結(jié)
以上便是 Chrome 69 的新特性，若要查看英文原文士八，請(qǐng)點(diǎn)擊查看
