建站
咨詢
售后
建站咨詢
新聞中心
今天就跟大家聊聊有關(guān)值得學(xué)習(xí)的三個CSS 新特性分別是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)提供高防物理服務(wù)器租用、云服務(wù)器、香港服務(wù)器、西部信息服務(wù)器租用等
1. 特性查詢
不久前，我寫了 我真心期望的一個 CSS 特性 ，就是關(guān)于特性查詢，現(xiàn)在基本上可以說它已經(jīng)存在了！它支持除 Internet Exploer 之外的主流瀏覽器(包括 Opera Mini)。
特性查詢，使用 @supports 規(guī)則，允許我們將 CSS 包含在一個條件塊中，這個條件塊中會檢查當前 user agent 是否支持一個 CSS 屬性鍵值對，在支持的情況下其中的內(nèi)容才會生效。這里有一個簡單的例子，只在瀏覽器支持 Flexbox 的時候應(yīng)用 display: flex -
@supports ( display: flex ) { .foo { display: flex; } }另外，使用像 and 和 not 這樣的運算符，我們甚至可以創(chuàng)建更復(fù)雜的特性查詢。比如，我們可以檢測瀏覽器是否僅僅支持老的 Flexbox 語法 -
@supports ( display: flexbox ) and ( not ( display: flex ) ) { .foo { display: flexbox; } }支持情況
2. 表格布局
CSS 表格布局模塊 所定義的系統(tǒng)用于創(chuàng)建基于表格的布局。它與 彈性盒布局 模塊相似，但它更明確地為頁面布局而設(shè)計，它們之間存在許多不同的特性。
明確項目定位
網(wǎng)格由表格容器(通過 display: grid 創(chuàng)建)和表格項(子組件)組成。在我們的 CSS 中，我們可以清楚的組織表格項的位置和順序，而這與它們的標記(指 HTML 標記)無關(guān)。
例如，我寫過一篇 使用 CSS 表格進行圣懷布局 ，這篇文章中展示了通過這個模塊如果創(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; } }靈活的長度
CSS Grid 模塊引入了一個新的長度單位，fr，它代表了表格容器中剩余空間的一個等分。
它使得我們在表格容器根據(jù)可用空間來為表格項分配高度和寬度成為可能。例如在圣杯布局(Holy Grail Layout)中，我希望 main 分區(qū)占據(jù)兩個邊欄之外的所有空間。我寫了一段簡單的代碼來做這個事情 -
.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 變量。這個模塊引入了一種由創(chuàng)建作者定義變量的方法，這個變量可以像 CSS 屬性一樣賦值。
比如，假設(shè)在我們的樣式表中多處用到一個主題顏色，我們可以將其抽象出來保存到變量中，再引用變量，以此代替多次直接寫出實際的值。
:root { --theme-colour: cornflowerblue; } h2 { color: var(--theme-colour); } a { color: var(--theme-colour); } strong { color: var(--theme-colour); }目前在像 SASS 這樣 CSS 預(yù)處理器中已經(jīng)可以做到這些事情，但 CSS 變量在瀏覽器中具有活性。也就是說，它們的值可以實時更新。例如，要改變上例中 --theme-color 屬性的值，我們只需要這樣做 -
const rootEl = document.documentElement; rootEl.style.setProperty('--theme-colour', 'plum');看完上述內(nèi)容，你們對值得學(xué)習(xí)的三個CSS 新特性分別是什么有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
網(wǎng)站標題：值得學(xué)習(xí)的三個CSS新特性分別是什么
當前路徑：http://www.ef60e0e.cn/article/gcceoj.html
