10月11月寫的十幾篇CSS文章綜述

1. CSS :visited僞類選擇器隱祕往事回憶錄

主要介紹CSS :visited僞類選擇器，因爲安全方面的限制，不少你覺得可使用的CSS屬性，在:visited這裏都是不能使用的，固然，不少不少其餘怪異的特性。若有興趣，能夠點擊這裏閱讀原文。

2. CSS scroll-behavior與頁面滾動平滑

這篇文章主要介紹經過添加一句簡單的scroll-behavior屬性，就可讓頁面的滾動定位變得很平滑，漸進加強屬性，實際項目可使用，很是適合錨點導航，以及返回頂部這些功能。若有興趣，能夠點擊這裏閱讀原文。

3. 有人考了我一道CSS題目

有人考了我一道CSS佈局相關的問題，我以爲頗有意思，便拿出來分享。若是你也想挑戰一番，能夠訪問這裏。

4. CSS margin-inline和margin-block區別是什麼？

看標題彷佛講的是區別，實際上，就是介紹CSS margin-inline和margin-block這兩個新CSS屬性，以及，算是第一次比較正式介紹CSS邏輯屬性。在CSS3中，inline, block都屬於邏輯屬性範疇，有可能表示x方向，也有可能表示y方向，與文檔流方向有關，想了解相關知識，能夠點擊這裏閱讀原文。

5. 寫給本身看的display:flex佈局教程

如題，就是講display:flex佈局的，文中全部的屬性的樣式表現，均可以經過操做看到實時表現，而非靜態圖片，理解起來要更直觀。同時，不少屬性的規則描述要比現有的不少文章介紹的要更詳盡，對於初學者必定是一個很不錯的學習教程。若是以前沒有學過display:flex佈局，能夠點擊這裏看看究竟有沒有說的好。

6. 寫給本身看的display:grid佈局教程

講display:grid佈局的文章，各個屬性值樣式也是實時預覽。display:grid佈局比display:flex佈局要複雜40%，有人對我這篇文章評價是，終於在這裏看懂了display:grid佈局。說明，相對來說，教程內容仍是比較通俗易懂的。display:grid佈局能夠說是一個二維佈局，更適合大的主體結構的實現。屬性較多，要想熟練使用，須要多多實踐。若有興趣，能夠點擊這裏看看能不能學到寫什麼。

7. 如何HTML標籤和JS中設置CSS3 var變量

這篇文章不純粹是CSS文章，但主要仍是講CSS3 var變量相關的知識的。在CSS文件或者CSS語法中使用CSS原生變量得心應手，可是如何經過JS代碼動態建立或者改變CSS變量值怕是不少人就不知道了。須要用到不太經常使用的一個API，到底是什麼，能夠點擊這裏閱讀這篇短篇。

8. CSS filter:hue-rotate濾鏡實現按鈕快捷複製

傳統按鈕都是經過具體色值進行賦色的，可是有代碼量大，開發維護成本高，且色值之間飽和度亮度存在差別問題。有沒有什麼簡單的方法能夠快速批量產生出各類顏色的按鈕呢？有！就是藉助CSS filter:hue-rotate色調旋轉濾鏡。若是是實現細節有興趣，能夠點擊這裏閱讀原文。

9. CSS前景背景自動配色技術簡介

這篇文章頗有意思，讓CSS有了編程語言的味道。

藉助CSS3的邊界特性和CSS3變量，已經能夠實現根據不一樣的背景色顯示不一樣的前景色進行匹配了。也就是，自動淺色背景使用深色文字，深色背景使用淺色文字，包括邊框也能夠自動配色呈現。對這種技術感興趣的能夠點擊這裏閱讀原文。

10. 純CSS實現任意格式圖標變色的研究

既然CSS filter:hue-rotate能夠經過改變色調複製按鈕，那是否是可使用filter濾鏡把各類格式圖標變成任意顏色呢？由於有這樣的想法，我就研究了下如何使用純CSS改變PNG圖標SVG圖標到指定顏色，並記錄在這篇文章中，裏面包含多種方法，相信你必定會有所收穫，點擊這裏閱讀原文。

11. CSS屆的繪圖板CSS Paint API簡介

這是我第一次以文章的形式介紹CSS Houdini相關知識。CSS Paint API是CSS Houdini的一部分，是目前應用比較多的API之一，能夠當作是CSS屆的繪圖板。看過這篇文章的人都認爲CSS愈來愈有意思了。本文就將經過一個簡單的案例，帶你快速瞭解CSS Paint API，本文屬於前端技術廣度方面的學習，博聞強識。想增長本身CSS知識廣度，走在CSS技術前沿的同窗能夠點擊這裏一探究竟。

12. 5分鐘快速瞭解下CSS color-adjust屬性

color-adjust就算沒有兼容性問題，之後也不會大規模使用，屬於有用但不經常使用的CSS屬性。該屬性已經加入了CSS Color 4規範，與色彩表現呈現有關，是個和用戶體驗走得比較近的CSS屬性，究竟這個屬性是幹嗎的呢？哈哈，能夠點擊這裏快速瞭解下，最多佔用你5分鐘時間，保不許之後能夠用到它。

13. 要不過來了解下CSS Scroll Snap？

CSS Scroll Snap是CSS中一個獨立的模塊，包含多個CSS屬性，例如scroll-snap-type，scroll-snap-align等，是一個和滾動有關的CSS屬性，上面提到的CSS scroll-behavior屬性雖然也是和滾動相關，但二者定位差別較大，Scroll Snap本質上是定位，只是定位時候順便平滑；而scroll-behavior純粹平滑滾動。

CSS Scroll Snap可讓網頁容器滾動中止的時候，自動平滑定位到指定元素的指定位置。那種多屏H5，或者slide切換效果能夠藉助這個CSS實現。更多知識能夠點擊這裏進行獲取。

14. 仍是說說position:sticky吧

我以前傻傻覺得position:sticky就是position:relative和position:fixed的結合體，而後，一番研究下來，發現，position:sticky仍是有不少特性和想的是不同的，你不加以瞭解，你確定會遇到「怎麼sticky沒有效果」這種問題；並且，利用position:sticky能夠實現很精緻的交互佈局效果，這篇文章就介紹了，其餘地方可很少見哦。

另外，有一段時間Chrome放棄了對position:sticky支持，我也就不關心這個聲明瞭，最近偶然發現，臥槽，Chrome又支持了。看來這個聲明之後成爲標準是板上釘釘的事情了，所以，你們放心學習之，不要擔憂之後沒用。學習請訪問這裏。

15. CSS蛋疼應用之：數據上報和HTML驗證

這篇文章介紹了兩個我以爲比較蛋疼但有意思的CSS應用，一個就是純CSS實現數據上報，用戶行爲跟蹤；另一個就是純CSS實現HTML驗證，而且在頁面上進行提示。比較有腦洞，有想法，雖然之後估計用不到，可是，其中新奇的思路說不定對於咱們開闊眼界頗有幫助。若有興趣，請點擊這裏閱讀原文。

16. CSS font-feature-settings 50+關鍵字屬性值完整介紹

這篇文章很是長，介紹CSS font-feature-settings屬性的，CSS font-feature-settings屬性雖然算是兼容性比較好的屬性了，可是，彷佛你們見得少，用得也少，爲何呢？font-feature-settings屬性可讓OpenType字體排版更精美，更符合實際開發須要，可是，每每須要自定義字體的支持，對於英文而言，造一個自定義字體成本過低了，無數多的字體可用，可是，對於中文，嘖嘖，光常見的簡體中文漢字就好幾千，這字體成本很高。沒有了這些內置font特徵的字體，天然CSS font-feature-settings屬性也就沒有效果了，這就是CSS font-feature-settings用得很少的緣由之一。

但，咱們日常開發，仍是少不了和數字字母打交道，所以，瞭解CSS font-feature-settings仍是有價值的，本文更像是一篇CSS科普，完整展現瀏覽器目前支持的50多個字體特徵標籤的做用和樣式表現。詳見這裏 »。

最後，忍不住稱讚下本身，font-feature-settings這篇文章的工做量巨大，且註定不是個熱門CSS屬性，對於我我的而言，其實是投入產出比很低的一件事情，有這個精力在掘金上寫寫小冊這類付費閱讀的東西確定更划算啊。可是，若是我不把這篇文或者整理出來，那這方面的資料就真的稀缺了，寫這篇文章以前我搜索了下，介紹font-feature-settings的中文文章寥寥無幾，佛家有云，我不入地獄誰入地獄，只要可以幫到一部分人，哪怕只是行業的一小撮，也是頗有價值的。

（本文完）