建站
咨詢
售后
建站咨詢
新聞中心
在眾多的CSS新特性中，有 3 個(gè)今年采用的新特性讓我抑制不住地激動(dòng)。
網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站制作,高端網(wǎng)頁(yè)制作,對(duì)會(huì)所設(shè)計(jì)等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)seo優(yōu)化優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。
1. 特性查詢
不久前，我寫了 我真心期望的一個(gè) CSS 特性 ，就是關(guān)于特性查詢，現(xiàn)在基本上可以說它已經(jīng)存在了！它支持除 Internet Exploer 之外的主流瀏覽器(包括 Opera Mini)。
特性查詢，使用 @supports 規(guī)則，允許我們將 CSS 包含在一個(gè)條件塊中，這個(gè)條件塊中會(huì)檢查當(dāng)前 user agent 是否支持一個(gè) CSS 屬性鍵值對(duì)，在支持的情況下其中的內(nèi)容才會(huì)生效。這里有一個(gè)簡(jiǎn)單的例子，只在瀏覽器支持 Flexbox 的時(shí)候應(yīng)用 display: flex -
@supports ( display: flex ) { .foo { display: flex; } }另外，使用像 and 和 not 這樣的運(yùn)算符，我們甚至可以創(chuàng)建更復(fù)雜的特性查詢。比如，我們可以檢測(cè)瀏覽器是否僅僅支持老的 Flexbox 語(yǔ)法 -
@supports ( display: flexbox ) and ( not ( display: flex ) ) { .foo { display: flexbox; } }支持情況
2. 表格布局
CSS 表格布局模塊 所定義的系統(tǒng)用于創(chuàng)建基于表格的布局。它與 彈性盒布局 模塊相似，但它更明確地為頁(yè)面布局而設(shè)計(jì)，它們之間存在許多不同的特性。
明確項(xiàng)目定位
網(wǎng)格由表格容器(通過 display: grid 創(chuàng)建)和表格項(xiàng)(子組件)組成。在我們的 CSS 中，我們可以清楚的組織表格項(xiàng)的位置和順序，而這與它們的標(biāo)記(指 HTML 標(biāo)記)無關(guān)。
例如，我寫過一篇 使用 CSS 表格進(jìn)行圣懷布局 ，這篇文章中展示了通過這個(gè)模塊如果創(chuàng)建有名的“圣杯布局”。
背后的 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; } }靈活的長(zhǎng)度
CSS Grid 模塊引入了一個(gè)新的長(zhǎng)度單位，fr，它代表了表格容器中剩余空間的一個(gè)等分。
它使得我們?cè)诒砀袢萜鞲鶕?jù)可用空間來為表格項(xiàng)分配高度和寬度成為可能。例如在圣杯布局(Holy Grail Layout)中，我希望 main 分區(qū)占據(jù)兩個(gè)邊欄之外的所有空間。我寫了一段簡(jiǎn)單的代碼來做這個(gè)事情 -
.hg { grid-template-columns: 150px 1fr 150px; }間距
我們可以使用 grid-row-gap、grid-column-gap 和 grid-gap 屬性來明確定義間距。這些屬性的值是
比如，需要 %5 的間距，可以這樣寫 -
.hg { display: grid; grid-column-gap: 5%; }支持情況
CSS Grid 模塊最早在今年三月被瀏覽器支持。
3. 原生變量
***要說的是原生 CSS 變量。這個(gè)模塊引入了一種由創(chuàng)建作者定義變量的方法，這個(gè)變量可以像 CSS 屬性一樣賦值。
比如，假設(shè)在我們的樣式表中多處用到一個(gè)主題顏色，我們可以將其抽象出來保存到變量中，再引用變量，以此代替多次直接寫出實(shí)際的值。
:root { --theme-colour: cornflowerblue; } h1 { color: var(--theme-colour); } a { color: var(--theme-colour); } strong { color: var(--theme-colour); }目前在像 SASS 這樣 CSS 預(yù)處理器中已經(jīng)可以做到這些事情，但 CSS 變量在瀏覽器中具有活性。也就是說，它們的值可以實(shí)時(shí)更新。例如，要改變上例中 --theme-color 屬性的值，我們只需要這樣做 -
const rootEl = document.documentElement; rootEl.style.setProperty('--theme-colour', 'plum');支持情況
支持情況如何？
可以看到，目前沒有一個(gè)特性被所有瀏覽器支持，那么我們應(yīng)該怎樣做才能高枕無憂地將其用于生產(chǎn)？答案是：漸進(jìn)增強(qiáng)！去年我曾在前端開發(fā)大會(huì)(Fronteers Conference) 中談到如何進(jìn)行與 CSS 相關(guān)的漸進(jìn)增強(qiáng)?，F(xiàn)在我把它放在這里 -
2017 年你有興趣學(xué)習(xí)什么樣的 CSS 特性呢？
本文題目：2017年值得學(xué)習(xí)的三個(gè)CSS新特性
轉(zhuǎn)載源于：http://www.5511xx.com/article/cogcgpp.html
