前沿動態 | 帶你提前體驗CSS未來的新特性
作者：Rachel Andrew
web開發，技術文章自由撰稿人和技術培訓講師；
Perch cms系統的聯合創始人；
Notist、Smashing雜誌的主編；
CSS工作組的特邀專家
個人部落格：https://rachelandrew.co.uk/
請輸入標題 bcdef
【 概要 】
本篇文章，Rachel Andrew將會帶著大家瞭解下瀏覽器在CSS方面的未來動向， 例如Flexbox行和列布局支援gap間隙屬性的標準。
這是一件令網站開發人員十分振奮的事情。我們將會領略未來CSS發展的全新屬性和相關書寫規範，其中一些已列入日程或在正在測試版本中進行使用，但是你將會很快在陸續的瀏覽器釋出版本中看到它們。
請輸入標題 abcdefg
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
專注分享當下最實用的前端技術。關注前端達人，與達人一起學習進步！
長按關注"前端達人"