本文和大家分享的是今年非常值得一學的3
個css
學習css有所幫助。
css
特效查詢
(feature queries)
不久前，我單獨寫過了這篇文章 the one css feature i really want
提及到自己期期待 css
特性。如今它受到了大多數瀏覽器的支援除了
ie 。特性查詢你只需要使用 @support ,
它允許我們嵌入
css的表示式進行條件判斷，如果支援的瀏覽器則會執行 包含的語句。乙個經常想到的便是 判斷對於 flex
的支援。
@supports ( display: flex )
}除此之外，使用 and
以及 not
我們可以實現更加複雜的查詢語句。舉個例子，我們可以判斷這個瀏覽器是不是只支援老闆 flex
語法。@supports ( display: flexbox )
and( not ( display: flex ) )
}grid layout
網格布局
css的網格布局第一了一套建立單元格布局的系統。和
flex
布局有些相似，但是它確實更多針對頁面布局而誕生，它擁有非常的語法屬性。
網格布局是由(display:grid)
的容器下，使用 網格布局，我們可以明確設定這些單元格元素的放置位置和順序。
比如我們實現
可以實現簡單的 holy graillayout
，大致就是一種等高的布局。自己寫了一篇專門的文章 the holy grail layout with css grid
介紹具體的實現。
.hg__header .hg__footer .hg__main .hg__left .hg__right
.hg
@media screen and (max-width: 600px)
}可伸縮的長度
css grid
的布局，帶來了新的單位 fr .
用於表示剩餘空間所佔的大小。它允許我們為元素指定寬高，而實際的大小取決於剩餘的空間大小。比如在
holy grail layout
布局中，我希望 .main
選區中佔據兩邊剩餘的空間。
.hg
空白間距
我們可以通過 grid-row-gap grid-column-gap, and grid-gap
來實現對於網格布局的間隔控制。它接受乙個百分比單位，表示網格區域的具體長度。
.hg
css
變數 關於 css
自定義變數
新的草案介紹可以通過自定義變數進行 css
的賦值。
比如我們如果當算設定主題色，我們需要在樣式表的很多地方用到這樣的顏色。我們可以將這些顏色設定為變數，然後在其他地方引用，而不是直接進行賦值。(
寫過less sass
的應該可以體會到它的好處)
:root
h1 a strong
當然這種特性 less
和 sass
已經很早支援了，但是
css實現這個支援也有一定得好處，比如我們可以通過
js 實現顏色值得統一更新。
const rootel = document.documentelement;
rootel.style.setproperty('--theme-colour', 'plum');
css3的新特性
1.文字陰影text shadow text shadow 偏移量x 偏移量y 模糊度 顏色 注意 水平偏移量 正值向右，負值向左 垂直偏移量 正值向下，負值向上 模糊度不能為負數 可設定多個text shadow，每個用逗號分隔 例子 text shadow 1px 2px 3px red,2px...
css3新的特性
圓角邊框border radius 水平值 垂直值 border top left radius 1px 2px 設定左上角圓角 border bottom right radius 設定左下角圓角 border top left radius 設定右上角圓角 border bottom right...
CSS3的新特性
css3實現圓角 border radius 陰影 box shadow 對文字加特效 text shadow 線性漸變 gradient 旋轉 transform transform rotate 9deg scale 0.85,0.90 translate 0px,30px skew 9deg,...