點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

分享三個CSS新特性的實例

來源：懂視網責編：小采時間：2020-11-27 18:51:47

分享三個CSS新特性的實例

分享三個CSS新特性的實例:這是翻譯的一篇文章，原文是：3 New CSS Features to Learn in 2017，翻譯的不是很好，如有疑問歡迎指出。新的一年，我們有一系列新的東西要學習。盡管CSS有很多新的特性，但有三個特性令我最激動并進行學習。1. Feature Queries（特性查詢）在

推薦度：

點擊下載本文 文檔為doc格式

導讀分享三個CSS新特性的實例:這是翻譯的一篇文章，原文是：3 New CSS Features to Learn in 2017，翻譯的不是很好，如有疑問歡迎指出。新的一年，我們有一系列新的東西要學習。盡管CSS有很多新的特性，但有三個特性令我最激動并進行學習。1. Feature Queries（特性查詢）在

這是翻譯的一篇文章，原文是：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柵格進行圣杯布局一文中如何使用柵格布局模塊創建圣杯布局。

Holy_Grail_CSS_Grid

主要的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視頻教程

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

分享三個CSS新特性的實例

推薦度：

點擊下載本文 文檔為doc格式

標簽：分享三個案例

熱門焦點

分享三個CSS新特性的實例

分享三個CSS新特性的實例

1. Feature Queries（特性查詢）

瀏覽器支持

拓展

2. Grid Layout（柵格布局）

Explicit Item Placement

靈活的長度

元素間間隔

瀏覽器支持

現在想體驗怎么辦？

3、Native Variables

分享三個CSS新特性的實例

最新推薦

猜你喜歡

熱門推薦