2017年值得學習的3個CSS特性

2024-04-27 15:14:45

字體：大中小

來源：轉載

供稿：網友

原文：https://bitsofco.de/3-new-CSS-features-to-learn-in-2017/ 譯文：http://caibaojian.com/3-new-css-features-to-learn-in-2017.html 譯者：前端開發博客（蔡寶堅）

未經許可，禁止轉載，如有不妥之處，歡迎指正。

新年快樂！隨著新的一年到來，我們有一整套新的東西要開始學習。雖然今年的新特性有很多，但有3個新的特性是最令我激動不已的。

1.Feature Queries

前段時間，我寫過關于Feature Queries的一篇文章，叫“我最想要的CSS特性之一”。好了，現在它已經出現在這里了。它支持除了IE瀏覽器之外的所有主流瀏覽器（包括Opera Mini）。

Feature Queries，使用這個 @supports 規則，允許我們包含CSS在一個條件塊，但只有當前用戶客戶端支持一個特別的CSS PRoperty-value 才有效。舉個簡單的例子，只支持 display:flex 的瀏覽器才用Flexbox樣式。

@supports ( display:flxe ){ .foo { display:flex; }}

另外，使用像 and 和 not 的操作符，我們可以創建更加復雜的特性查詢。例如，我們可以檢測一個瀏覽器只支持舊的Flexbox語法-

@supports ( display: flexbox ) and ( not ( display: flex ) ) { .foo { display: flexbox; }}

兼容情況

2.Grid 布局

CSS 網格布局模塊定義了一個以創建網格為基礎的布局系統。它跟Flexbible Box 布局模塊很相似，但它更多的是為頁面布局而設計，因此具有許多不同的特性。

清晰的項放置

一個網格是由Grid Container（用 display: grid 創建），和Grid項（這是子項）構成。在我們的CSS中，我們可以容易并且清晰的組織網格項的放置和順序，而不用管他們在標記中的放置。

舉個例子，在我的文章“使用CSS網格的圣杯布局，我展示一下我們如何使用這個組件來創建類似的“圣杯布局”。

下面這個CSS只有短短31行

.hg__header { grid-area: header; }.hg__footer { grid-area: footer; }.hg__main { grid-area: main; }.hg__left { grid-area: navigation; }.hg__right { grid-area: ads; }.hg { display: grid; grid-template-areas: "header header header" "navigation main ads" "footer footer footer"; grid-template-columns: 150px 1fr 150px; grid-template-rows: 100px 1fr 30px; min-height: 100vh;}@media screen and (max-width: 600px) { .hg { grid-template-areas: "header" "navigation" "main" "ads" "footer"; grid-template-columns: 100%; grid-template-rows: 100px 50px 1fr 50px 30px; }}