2017年要學習的三個CSS新特性 2017年要學習的三個CSS新特性

時間 2019-12-09

標籤 2017年學習三個 css 特性欄目 CSS 简体版

原文原文鏈接

2017年要學習的三個CSS新特性

這是翻譯的一篇文章，原文是：3 New CSS Features to Learn in 2017，翻譯的不是很好，若有疑問歡迎指出。javascript

新的一年，咱們有一系列新的東西要學習。儘管CSS有不少新的特性，但有三個特性令我最激動並進行學習。css

1. Feature Queries（特性查詢）

在這以前我寫了一篇關於Feature Queries的文章the one CSS feature I really want。如今，它已經在這裏了！目前全部主流瀏覽器都支持特徵查詢（包括Opera Mini），IE瀏覽器除外。html

Feature Queries，使用@supports規則，容許咱們在它的條件區域內寫入CSS規則，只有噹噹前的用戶瀏覽器支持某個CSS屬性-值對的時候，該CSS代碼塊纔會生效。java

舉一個簡單的例子，下面的代碼中，只有當瀏覽器支持display: flex的時候纔會應用Flexbox樣式。css3

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

另外也可使用一些操做符，好比and與not，咱們就能夠建立更復雜的特徵查詢。例如，咱們能夠識別一個瀏覽器是否支持老版本的Flexbox語法。瀏覽器

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

瀏覽器支持

拓展

Feature Queries一樣支持Javascript接口：CSS.supports()，一樣使用上面的例子，看下如何使用：frontend

if ( CSS.supports( '(display: flex)') ) { console.log('支持flex') } else { console.log('不支持flex') } if ( CSS.supports( '(display: flexbox)' ) ) { console.log('支持flexbox') } else { console.log('不支持flexbox') }

2. Grid Layout（柵格佈局）

CSS柵格佈局模塊定義了一個建立以網格爲基礎的佈局系統。這和彈性盒佈局模塊類似，但柵格佈局是專門爲頁面佈局設計，所以有不少不一樣的特性。ide

Explicit Item Placement

一個柵格系統是由柵格容器（Grid Containe，由display: grid建立）、柵格項（Grid Item）組成。在咱們的CSS中，咱們能夠很容易且明確的組織布局以及柵格項的順序、與標記中的佈局相獨立。佈局

例如，我在用CSS柵格進行聖盃佈局一文中如何使用柵格佈局模塊建立聖盃佈局。post

主要的HTML代碼：

<body class="hg"> <header class="hg__header">Title</header> <main class="hg__main">Content</main> <aside class="hg__left">Menu</aside> <aside class="hg__right">Ads</aside> <footer class="hg__footer">Footer</footer> </body>

主要的CSS代碼：

.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; } }

靈活的長度

CSS柵格模塊介紹了一個新的長度單位：fr單元，它表示在柵格容器中剩餘的空間部分。

咱們就能夠經過柵格容器的可用空間來分配柵格項的高度與寬度。例如，在聖盃佈局中，我想讓main容器佔滿除兩邊容器以外的全部空間，爲了實現這個效果，只需寫以下一句代碼：

.hg { grid-template-columns: 150px 1fr 150px; }

元素間間隔

咱們能夠專門定義柵格佈局中元素間的空隙，grid-row-gap、grid-column-gap以及grid-gap屬性能夠完成這項工做，這些屬性接受一個<length-percentage>百分比數據類型做爲值，與內容區域的尺寸對應的百分比。

例如，有5%的空隙，能夠這樣寫：

.hg { display: grid; grid-column-gap: 5%; }

瀏覽器支持

CSS網格模塊將最先在今年三月在瀏覽器中可用（提供默認支持）。

如今想體驗怎麼辦？

參考個人這篇記錄：各個瀏覽器開啓CSS Grid Layout的方式。

三、Native Variables

最後一個是本地CSS變量。該模塊介紹了建立用戶自定義變量的方法，能夠給一個CSS屬性分配一個變量。

例如，若是我有一個主題色，這個主題色被用在了好幾個地方，這時候，就能夠抽象這個主題色到一個變量中，而且在使用的時候引用這個變量，這樣比把這個顏色寫到多個地方更容易維護。

:root { --theme-colour: cornflowerblue; } h1 { color: var(--theme-colour); } a { color: var(--theme-colour); } strong { color: var(--theme-colour); }

這種效果在以前咱們通常藉助CSS預處理器來實現，好比SASS，可是CSS變量有個優勢就是一直存在於瀏覽器中。這意味着這些變量值能夠在線修改。例如，爲了更新--theme-colour屬性值，能夠經過以下方式：

const rootEl = document.documentElement; rootEl.style.setProperty('--theme-colour', 'plum');

瀏覽器支持

2017年什麼CSS特性最讓你激動？

-轉載

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。