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的中文文章寥寥無幾，佛家有云，我不入地獄誰入地獄，只要能夠幫到一部分人，哪怕只是行業的一小撮，也是很有價值的。 
（本文完）