首頁 > 開發者 > CSS

分享三個CSS新特性的執行個體

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
這是翻譯的一篇文章，原文是：3 New CSS Features to Learn in 2017，翻譯的不是很好，如有疑問歡迎指出。

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

1. Feature Queries（特性查詢）

在這之前我寫了一篇關於Feature Queries的文章the one CSS feature I really want。現在，它已經在這裡了！目前所有主流瀏覽器都支援特徵查詢（包括Opera Mini），IE瀏覽器除外。

Feature Queries，使用@supports規則，允許我們在它的條件地區內寫入CSS規則，只有噹噹前的使用者瀏覽器支援某個CSS屬性-值對的時候，該CSS代碼塊才會生效。

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

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

另外也可以使用一些操作符，比如and與not，我們就可以建立更複雜的特徵查詢。例如，我們可以識別一個瀏覽器是否支援老版本的Flexbox文法。

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

瀏覽器支援

拓展

Feature Queries同樣支援Javascript介面：CSS.supports()，同樣使用上面的例子，看下如何使用：

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柵格布局模組定義了一個建立以網格為基礎的布局系統。這和彈性盒布局模組相似，但柵格布局是專門為頁面配置設計，因此有很多不同的特性。

Explicit Item Placement

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

例如，我在用CSS柵格進行聖杯布局一文中如何使用柵格布局模組建立聖杯布局。

主要的HTML代碼：

<body class="hg">    <header class="hgheader">Title</header>    <main class="hgmain">Content</main>    <aside class="hgleft">Menu</aside>    <aside class="hgright">Ads</aside>    <footer class="hgfooter">Footer</footer></body>

主要的CSS代碼：

.hgheader { grid-area: header; }.hgfooter { grid-area: footer; }.hgmain { grid-area: main; }.hgleft { grid-area: navigation; }.hgright { 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的方式。

3、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');

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More