在跟網友探討編程話題的時候，一旦談到HTML和CSS，很多人都會不屑一顧，認為這不屬於編程的範疇，而且沒有什麼技術含量。但實際上，HTML和CSS一直在發展前進，而為了支持一些新的特性，其實瀏覽器廠商在背後做了大量的技術工作，從而，開發人員可以通過簡單的語法、標籤就能夠實現豐富的功能和效果。如果你現在還認為HTML和CSS只是新手的專利，那麼，你是時候要轉變一下觀念了，不然的話，你將很可能會被這個世界所拋棄。

那麼，展望2018年，HTML和CSS又會有哪些新的變化呢？我們先來一睹為快。

一、元素

當你要在網頁中實現一個dialog，你通常的做法可能是通過第三方庫來實現，例如jQuery UI、Bootstrap等都可以做出很漂亮的dialog。隨著2017年12月HTML 5.2規範發布，你以後將可以直接在html中使用標籤來定義一個對話框。當然，要實現絢麗的效果，你還得配合CSS使用。

你的標題

你的內容

目前，主流瀏覽器對該特性的支持情況如下：

二、CSS Scroll Snap（滾動捕捉）

CSS Scroll Snap是CSS的最新模塊，引入了滾動捕捉位置。它可以決定滾動操作完成後容器的滾動埠結束的具體位置。

img {

/*指定每個圖片的中心在對齊時應該與X軸上滾動容器的中心對齊*/

scroll-snap-align ： center none ;

}

.photoGallery{

width:500 px ;

overflow-y:hidden;

white-space: nowrap;

/*滾動操作完成時，要求滾動位置始終處於捕捉位置。*/

scroll-snap-type: x mandatory;

}

有點抽象是吧？看下圖就明白了。

在這個示例中，snapport由紅色矩形框表示，捕捉區域由黃色矩形表示。由於我們在X軸上的滾動對齊設置為「center」，所以，當我們每次滾動的時候，圖片的中心（用黃色虛線表示）將會對齊容器的X軸的中心（用紅色虛線表示）。

更多關於該特性的介紹可以查看這裡：https://www.w3.org/TR/css-scroll-snap-1/

不過遺憾的是，截至目前只有蘋果的Safari瀏覽器支持該特性。

三、在中使用內聯css

雖然我們很多人都試過在中使用css，但以前這認為是不規範的，而HTML5.2則正式將其合法化。

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

p { color: #069; }

Vestibulum interdum pellentesque massa

四、CSS變數

CSS預處理器已經存在很長一段時間，目前大多數瀏覽器都對其提供了支持，如今css變數正式作為一種規範納入，意味著它從雜牌軍轉為正規軍，還是值得高興的。

:root {

--main-color: #069;

}

h1, h2, h3 { color: var(--main-color); }

a { color: var(--main-color); text-decoration:underline }

五、@supports

瀏覽器兼容性對於做前端的朋友感觸很深，尤其是在IE當道的年代，那種痛苦真的可謂啞巴吃黃連，有苦自己知。新的規範為我們提供了一個@supports功能，它可以供開發人員來檢查瀏覽器是否支持特定的屬性。目前，除了IE以外的所有主流瀏覽器都支持該特性。

@supports (mix-blend-mode: overlay) {

.example {

mix-blend-mode: overlay;

}

}

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！