前沿動態 | 帶你提早體驗CSS將來的新特性

做者：Rachel Andrew

• web開發，技術文章自由撰稿人和技術培訓講師；
  
• Perch cms系統的聯合創始人；
  
• Notist、Smashing雜誌的主編；
  
• CSS工做組的特邀專家
  
• 我的博客：https://rachelandrew.co.uk/ 
  

【 概要 】

本篇文章，Rachel Andrew將會帶着你們瞭解下瀏覽器在CSS方面的將來動向， 例如Flexbox行和列布局支持gap間隙屬性的標準。

這是一件令網站開發人員十分振奮的事情。咱們將會領略將來CSS發展的全新屬性和相關書寫規範，其中一些已列入日程或在正在測試版本中進行使用，可是你將會很快在陸續的瀏覽器發佈版本中看到它們。

Gutters(槽) for flexbox

CSS網格佈局引入了 grid-column-gap, grid-row-gapl和grid-gapl 等屬性，多列布局可使用 column-gap 屬性， 所以，從Grid和Multicol規範中刪除這些屬性並將它們放入Box（盒子模型） Alignment是有意義的。在Box Alignment中處理規範佈局的方式和對齊的方式。所以相關屬性的名稱改爲了column-gap, row-gap和gap應用於佈局，好比flexbox佈局方式。

在撰寫本文時，Firefox是目前惟一支持Flexbox這些新屬性的瀏覽器，預計將在Firefox 63中版本中發佈（在您閱讀本文時應該可使用它）。 可是我但願其餘瀏覽器也會效仿。 這應該意味着您沒必要使用margin屬性在Flex內容元素之間控制間距，而是可使用網格佈局的方式。

.flex{
display: flex:
flex-wrap: wrap
row-gap: 20px;
column-gap: 10px;
} 
複製代碼

Logical properties and values(邏輯屬性與值)

咱們的CSS屬性和值傳對應的是屏幕的物理屬性。例如，咱們使用寬度和高度，並在元素的右上角，底部和左側設置邊距。在水平和從上到下的佈局方式，這些物理屬性看起來很奇怪。舉個簡單的例子，咱們能夠考慮下面的一個盒子模型：

.box{
height: 150 px
width: 250px
} 
複製代碼

咱們的盒子在屏幕上高150像素，寬250像素。即便咱們將寫入模式(writing-mode)更改成垂直模式。盒子將繼續保持原先的物理屬性，惟一的差異就是橫着擺放或者豎着擺放。

咱們如今有了新的邏輯屬性和值，使咱們可以調整元素大小或引用它們的邊距，填充和邊框，即便寫入模式發生變化(writing-mode)。回到咱們上一個示例，咱們可能但願咱們的box框始終具備250像素的長度，而無論方向如何。

這些新屬性是在寫入模式下(writing-mode)運行的方式——水平佈局，在任何垂直書寫模式下水平佈局。而後咱們但願它在塊維度中具備150個像素的長度，經常使用在特定寫入模式中顯示例如文章段落的塊狀的顯示方式。因此咱們能夠按以下方式調整塊咱們的BOX佈局:

.box
{
block-size: 150px
inline-size: 250px 
} 
複製代碼

該Box盒子模型在寫入模式(writing-mode)下運行。目前Firefox瀏覽器支持這些邏輯值的新特性。

Grid level 2 and subgrid

Subgrids——你可以在一個網格內部繼續佈局一個子網格，該子網格繼承父網格的相關屬性。

Grid(網格) level 2相關的規範正在制定中，主要增長了 subgrid（子網格）的新特性。

如今沒有任何瀏覽器支持這些新屬性，可是我相信並但願這一天可以快點到來。

Initial letter——首字母下沉

Initial Letter——目前僅適用WebKit的瀏覽器，是一個解決常見問題的小功能。 它能夠建立一個大的首字母沉入其後的文本中，效果如上圖。

這個CSS特性只有一個屬性值：initial-letter，使用這個屬性你須要加上webkit前綴，此屬性接受兩個參數值，第一個表示行高，第二個表示要跨越的行數，若是要實現上圖效果，咱們能夠這樣寫

h1+p: first-letter
{
font-weight: bold;
webkit-initial-letter: 43 3;
initial-letter: 43 3;
} 

複製代碼

Variable fonts(可變字體)

若是您曾在設計中使用過Web字體，您須要明白這些問題 - 您的用戶須要下載您須要使用的每種字體。對於大多數字體，您將須要常規字體，粗體和斜體版本。爲了要表現字體的效果，您的用戶要同時下載好幾種字體。

Variable Fonts（可變字體）——無需多個文件就能經過編程方式讓單一文件適應和生成自定義字體樣式。 OpenType Font Variations 可變字體是由微軟，谷歌，蘋果和Adobe共同開發的技術，這個功能應用讓咱們在網站上使用更豐富更漂亮的字體。

要使用可變字體，您須要使用支持該功能的字體，以及支持font-variation-settings屬性的瀏覽器，現代瀏覽器中對這個屬性的支持很是好。要了解可變字體的可行性。能夠查看Axis Praxis網站（axis-praxis.org），您能夠在線體驗各類可變字體並複製用於您建立的可變字體的css。

要查找和測試可變字體，您能夠訪問 http://v-fonts. com。可變字體Twitter賬戶（http://twitter.com/variablefonts）值得關注以——發現新的字體版本和最新的動態新聞。

Scroll snapping（滾動捕捉）

CSS Scroll Snapping意味着您能夠建立捕捉滾動點的界面。這讓您很方便在網頁上實現與移動應用程序類那樣整頁滑動效果（滑塊效果），能夠在頁面之間進行捕捉。

Scroll snapping——方便您實現相似APP那樣的整頁滑動的效果。

下面的代碼建立了一個項目列表，其中父項具備固定高度，溢出設置爲滾動。我但願項目在滑動到頂部進行捕捉。

在父元素上，咱們添加了屬性scroll-snap-type，滾動的軸方向的值，而後是一個必需或接近的關鍵數值設置捕捉點，所以在使用它時應該當心您不會由於滾動捕捉而致使用戶沒法滾動到某些內容。

在項目上，咱們使用屬性scroll-snap-align指定要捕捉到的位置（指定元素哪一部分應該與容器對齊）。它有三個值可選擇：start、center和end。這些是相對於滾動方向的。若是是垂直滾動，start指的是元素的頂部邊緣。若是是水平滾動條，它指的是左邊緣。center和end遵循相同的原則。你能夠爲滾動條的不一樣方向設置不一樣的值，這兩個值之間用空格分隔開。

ul
{
list-style: none;
border: 5px solid rgb(126, 63, 222);
border-radius: 5em;
height: 300px;
padding: 0;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
li
{
background-color: rgba(126, 63, 222,. 3);
padding: 40px 20px:
border-bottom: 1px solid rgb(126, 63, 222);
min-height: 150px;
scroll-snap-align: start;
}
複製代碼

目前瀏覽器的支持狀況

Media Queries Level 4

Media Queries Level 4規範爲咱們提供了一些有趣的新方法來檢測訪問者正在使用的設備，以及一些有助於使Media Queries更簡潔的語法改進,

有興趣的話能夠查看這個網址 https://www.w3.org/TR/mediaqueries-4/#intro

Detect pointer type

人們與您的網站或應用程序交互的方式正在發生變化。您的訪問者可能正在使用鍵盤、鼠標或可觸摸設備訪問您的網站。

例如微軟Surface Book就像傳統筆記本電腦同樣，也有觸摸屏。所以，查看屏幕大小並非查找用戶實際擁有的設備類型的好方法。 Media Queries level 4 介紹了交互媒體功能，使咱們可以找出用戶具備什麼類型的指針，並測試此類屬性是否爲懸停。

例如，若是我想爲觸摸屏用戶添加一些css。我可使用如下代碼監測觸摸並定義相關屬性：

@media(pointer: coarse){
/ *CSS rules for touch screen*/
} 
複製代碼

我也能夠監測hover屬性，定義相關的CSS樣式屬性。

@media(hover){
/*CSS rules useful to people with devices that have hover support*/
} 
複製代碼

這些媒體查詢爲您提供了另外一種測試設備能力的方法，以便您能夠很方便的爲全部訪問您的站點的用戶提供很好的體驗。這個新特性除了Firefox以外的全部現代瀏覽器都支持。

Syntax improvements for Media Queries(媒體查詢的語法改進)

Level 4規範還包括一些語法改進，由於媒體查詢當前很是冗長 - 特別是在指定範圍時，例如：

@media(min-width: 40em)and(max-width:59em){
/ *CSS rules for screen sizes between 40em and 59em*/
} 
複製代碼

新規範使咱們可以使用如下語法並實現相同的功能

@media(40em < width < 59em ){
/*CSS rules for screen sizes between 40em and 59em */
} 
複製代碼

這個語法起初看起來很奇怪,可是簡潔容易理解，舊的的語法不會消失，兩種寫法會共存。

Use CSS to test browser support

CSS甚至開發了一種方法，您可使用功能查詢來測試瀏覽器對新CSS功能的支持。功能查詢的行爲與媒體查詢的行爲大體相同，不一樣之處在於功能查詢不是向瀏覽器詢問有關用於查看站點的設備的信息，而是詢問瀏覽器是否支持特定的CSS功能。這使得以安全逐步加強的方式使用新功能變得更加容易。

@supports(display: grid){
/*CSS rules for browsers that  support grid layout */
}
複製代碼

瀏覽器對功能查詢的支持很棒，但Internet Explorer 11及更低版本不支持它們。只要您測試支持而後編寫支持瀏覽器的代碼，就能夠覆蓋之前在CSS中爲舊瀏覽器執行的任何操做。任何進入css的新功能均可以使用功能查詢進行測試。我認爲它們是使用css新特性的最佳方式之一，由於它們使咱們可以更快地開始使用新屬性，正如您在本文中所看到的，有不少特性能夠開始使用(以下圖所示)！

今天的文章分享就到這裏，因爲翻譯水平有限，敬請見諒，最後給你們分享幾個網站方便你們進行延伸閱讀理解本文的內容：

MDN

https://developer.mozilla.org/en-US/docs/Web/CSS

CSS Grid level 2 Here Comes subgrid

http://smashingmagazine.com/2018/07/css-grid-2/

Practical Scroll Snapping

http://css-tricks.com/practical-css-scroll-snapping/

Using Feature Queries in CSS

http://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

Grid By Example

http://gridbyexample.com

CSS Layout News

http://csslayout.news

更多精彩內容，請微信關注」前端達人」公衆號！

新年大禮包

關注「前端達人」公衆號，回覆「新年大禮包」獲取英文電子書：

更多精彩內容，請微信關注」前端達人」公衆號！