2021年，7個性價比最高的CSS特性值得一試
--yu-border:1px solid black;其中，–用來聲明變量。使用時候建議搭配作用域使用更加安全放心。
:root{--yu-border:1px solid black;}.class{border:var(--yu-border);<!--等同于 border :1px solid black;-->}
筆者自己使用體驗還是Sass更加方便舒適?？紤]到瀏覽器兼容性，現(xiàn)階段（2021年5月）不建議直接使用CSS原生變量。
2. @supports「https://github.com/supports」
使用方法和@media有些類似。
@supports (display: grid) {.site-content {display: grid;}}
或者
@supports not (display: grid) {.site-content {display: grid;}}
除了not以外，還有or ,and
@supports (transform-origin: 5% 5%) {}也可以用來校驗語法是否正確
瀏覽器支持情況如圖：
3. content-visibility
一句話概括，加強版lazy-loading 這是完完全全的CSS新特性了，之前圖片的lazy-loading只能作用在圖片上，content-visivility是可以作用在任意HTML元素上的。我們看看Google工程師是怎么說的
content-visibility is a really cool new CSS feature to improve site performance. It basically works like lazy loading, only not for images but any HTML element. You can use it to keep any part of your site from loading until it becomes visible.
使用說明：
content-visibility takes three values. By default, it is set to visible, in which case the element loads as usual. Alternatively, you can set it to hidden, in which case the element is not rendered, no matter whether it’s visible or not.
When set to auto, on the other hand, elements outside of the visible area will be skipped and then rendered once they appear on screen.
粗略翻譯一下，大概是說：content-visivlity有三個值，默認是visible，此時元素正常加載。你可以設(shè)置成hidden，那么就不會被加載。設(shè)置成auto時，渲染html時屏幕外的元素會被直接跳過，進入到屏幕范圍后才開始渲染。
talk is chelp,show me code
.content-below-fold {content-visibility: auto;}
瀏覽器支持情況（==有些慘不忍睹==）
等用戶新瀏覽器普及起來可能還要個幾年吧，就像es6是2015年出來的。在2018年以前還是有大量的前端工程師不知道let為何物。
順便一提，假如content-visivlity為hidden時，元素的size默認是0的。假如你希望不渲染這個元素，但是他的寬高還得占著空間時，用contain-intrinsic-size設(shè)置。contain-intrinsic-siz瀏覽器支持和content-visibility是一樣的。
4. Flexbox gaps
在之前的Flexbox布局中，行列間隔非常難設(shè)置。新特性出了個gaps，可以直接設(shè)置gap、row-gap、column-gap。==非常好用！強烈推薦== 話不多說，直接上代碼
.flex-gap-test {display: inline-flex;flex-wrap: wrap;gap: 16px;background:blue;}<div class="flex-gap-test"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>
效果如圖所示：
個人對比gap和margin、padding，覺得還是gap好，margin、padding寫的css不好維護，初次寫可能效率差不多，哪天要改樣式margin、padding改的想吐血。gap反而明了了很多。
5. Transitions, Transforms, Animations
老生常談了，CSS動畫三劍客。講一些新的 舉個例子
div {width: 100px;height: 100px;transition: height 3s;}div:hover {height: 500px;}
上面這個div，因為在 transition: height 3s;設(shè)置了只有在height變化的時候會觸發(fā)動畫，將動畫的過程延續(xù)到了3秒中，所以假如說你要是只改變其中的width是不會觸發(fā)動畫的。只有改變height的時候會觸發(fā)。
Transfromation
div{transform:rotate(45deg)}
動畫是旋轉(zhuǎn)的時候記得加上角度單位“deg”。
CSS Animation
組合動畫 @keyframes關(guān)鍵詞
@keyframes yu-color {from {background-color: blue;}to {background-color: red;}}div:hover {animation-name: yu-color;animation-duration: 2s;}
@keyframes 名字{ 動畫1， 動畫2， }
動畫播放的時候會按照順序執(zhí)行
6. Scroll Snap
這個特性有點類似于抖音，當(dāng)你下滑視頻時，滑倒一定的程度視頻自動往下走，假如沒滑到特定值，則滾動條會彈回去。
.container {scroll-snap-type: y mandatory;}.container div {scroll-snap-align: start;}
主流瀏覽器支持情況還是不錯的，就是不知道為什么qq瀏覽器和UC瀏覽器這個時候慢一拍。
7. :is 和 :where
類選擇器
.main a:hover,.sidebar a:hover,.site-footer a:hover {<!--樣式-->}
可以改寫成
:is(.main, .sidebar, .site-footer) a:hover {<!--樣式-->}
或者
:where(.main, .sidebar, .site-footer) a:hover {<!--樣式-->}
二者主要區(qū)別在于:is選擇器等級較高， :where選擇器等級權(quán)值幾乎為0。
以上7個CSS 特性，如果您認為對您有幫助，請記得 點贊、留言、分享和收藏 哦~~