CSS 新世界

“CSS新世界三部曲”（《CSS世界》《CSS選擇器世界》《CSS新世界》作者，前端開發工程師，國內知名前端博客“鑫空間-鑫生活”博主，目前就職於閱文集團用戶體驗設計部（YUX），擔任前端技術專家。他從2007年開始接觸前端，十多年來一直工作在前端開發一線，在HTML/CSS等與交互體驗關係密切的領域花了大量的時間學習和研究，有比較多的心得體會。

第 1章 概述　1
1.1 CSS3出現的歷史和背景　1
1.2 模塊化的CSS新世界　2

第 2章 需要提前瞭解的知識　4
2.1 互通互聯的CSS數據類型　4
2.1.1 為什麽要關註CSS數據類型　4
2.1.2 幾個常見數據類型的簡單介紹　5
2.2 學會看懂CSS屬性值定義語法　7
2.2.1 學習CSS屬性值定義語法的好處　7
2.2.2 CSS屬性值定義語法詳解　8
2.3 瞭解CSS全局關鍵字屬性值　12
2.3.1 用過都說好的繼承關鍵字inherit　12
2.3.2 可以一用的初始值關鍵字initial　12
2.3.3 瞭解一下不固定值關鍵字unset　14
2.3.4 我個人很喜歡的恢復關鍵字revert　15
2.4 指代所有CSS屬性的all屬性　17
2.5 CSS新特性的漸進增強處理技巧　18
2.5.1 直接使用CSS新特性　18
2.5.2 利用屬性值的語法差異實現兼容　19
2.5.3 借助偽類或偽元素區分瀏覽器的技巧　21
2.5.4 @supports規則下的漸進增強處理　23
2.5.5 對CSS新特性漸進增強處理的總結　26

第3章 從增強已有的CSS屬性開始　28
3.1 貫穿全書的尺寸體系　28
3.1.1 從width:fit-content聲明開始　29
3.1.2 stretch、available和fill-available關鍵字究竟用哪個　32
3.1.3 深入瞭解min-content關鍵字　35
3.1.4 快速瞭解max-content關鍵字　39
3.2 深入瞭解CSS邏輯屬性　40
3.2.1 CSS邏輯屬性有限的使用場景　41
3.2.2 inline/block與start/end元素　43
3.2.3 width/height屬性與inline-size/block-size邏輯屬性　44
3.2.4 由margin/padding/border演變而來的邏輯屬性　44
3.2.5 text-align屬性支持的邏輯屬性值　45
3.2.6 最有用的CSS邏輯屬性inset　46
3.3 在CSS邊框上做文章　47
3.3.1 曇花一現的CSS多邊框　47
3.3.2 獨一無二的border-image屬性　47
3.3.3 border-image屬性與漸變邊框　57
3.4 position屬性的增強　60
3.4.1 深入瞭解sticky屬性值與黏性定位　61
3.4.2 position:sticky聲明的精彩應用—層次滾動　65
3.5 font-family屬性和@font-face規則新特性　66
3.5.1 system-ui等全新的通用字體族　66
3.5.2 local()函數與系統字體的調用　73
3.5.3 unicode-range屬性的詳細介紹　74
3.5.4 woff/woff2字體　75
3.5.5 font-display屬性與自定義字體的加載渲染　77
3.6 字符單元的中斷與換行　79
3.6.1 使用keep-all屬性值優化中文排版　80
3.6.2 break-all屬性值的問題和line-break屬性　81
3.6.3 hyphens屬性與連字符　83
3.6.4 與精確換行的控制　85
3.6.5 overflow-wrap:anywhere聲明有什麽用　86
3.7 text-align屬性相關的新特性　88
3.7.1 match-parent等新屬性值　88
3.7.2 text-align屬性的字符對齊特性　8
3.8 text-decoration屬性全新升級　90
3.8.1 text-decoration屬性現在是一種縮寫　90
3.8.2 text-decoration屬性的累加特性　91
3.8.3 唯一實用的wavy波浪線　91
3.8.4 可能需要text-underline-position:under聲明　92
3.8.5 更需要text-underline-offset屬性　94
3.8.6 講一講text-decoration-skip屬性的故事　95
3.9 color屬性與顏色設置　97
3.9.1 148個顏色關鍵字　98
3.9.2 transparent關鍵字　99
3.9.3 currentColor關鍵字　100
3.9.4 RGB顏色和HSL顏色的新語法　101
3.10 必學必會的background屬性新特性　103
3.10.1 最實用的當屬background-size屬性　103
3.10.2 background屬性最成功的設計—多背景　108
3.10.3 background-clip屬性與背景顯示區域限制　110
3.10.4 background-clip:text聲明與漸變文字效果　111
3.10.5 background-origin屬性與背景定位原點控制　112
3.10.6 space和round平鋪模式　113
3.10.7 可以指定background-position的起始方位了　114
3.11 outline相關新屬性outline-offset　116
3.12 cursor屬性新增的手形效果　117
3.12.1 放大手形zoom-in和縮小手形zoom-out簡介　117
3.12.2 抓取手形grab和放手手形grabbing簡介　118

第4章 更細致的樣式表現　119
4.1 透明度控制屬性opacity　119
4.1.1 opacity屬性的疊加計算規則　119
4.1.2 opacity屬性的邊界特性與應用　120
4.2 深入瞭解圓角屬性border-radius　124
4.2.1 瞭解border-radius屬性的語法　124
4.2.2 弄懂圓角效果是如何產生的　126
4.2.3 border-radius屬性渲染border邊框的細節　127
4.2.4 border-radius屬性的高級應用技巧　129
4.3 box-shadow盒陰影　131
4.3.1 inset關鍵字與內陰影　131
4.3.2 不要忽略第四個長度值　133
4.3.3 多陰影特性與圖形繪制　134
4.3.4 box-shadow動畫與性能優化　137
4.4 CSS 2D變換　138
4.4.1 從基本的變換方法說起　138
4.4.2 transform屬性的若乾細節特性　141
4.4.3 元素應用transform屬性後的變化　144
4.4.4 深入瞭解矩陣函數matrix()　148
4.4.5 常常被遺忘的transform-origin屬性　152
4.4.6 scale()函數縮放和zoom屬性縮放的區別　153
4.4.7 瞭解全新的translate、scale和rotate屬性　154
4.5 簡單實用的calc()函數　155
4.5.1 關於calc()函數　155
4.5.2 瞭解min()、max()和clamp()函數　157

第5章 更強的視覺表現　160
5.1 CSS漸變　160
5.1.1 深入瞭解linear-gradient()線性漸變　160
5.1.2 深入瞭解radial-gradient()徑向漸變　165
5.1.3 瞭解conic-gradient()錐形漸變　170
5.1.4 重復漸變　173
5.2 CSS 3D變換　174
5.2.1 從常用的3D變換函數說起　174
5.2.2 必不可少的perspective屬性　176
5.2.3 用translateZ()函數尋找透視位置　177
5.2.4 指定perspective透視點的兩種寫法　178
5.2.5 理解perspective-origin屬性　179
5.2.6 transform-style:preserve-3d聲明的含義　180
5.2.7 backface-visibility屬性的作用　180
5.2.8 值得學習的旋轉木馬案例　182
5.2.9 3D變換與GPU加速　184
5.3 CSS過渡　184
5.3.1 你可能不知道的transition屬性知識　185
5.3.2 瞭解三次貝塞爾時間函數類型　188
5.3.3 transition與visibility屬性的應用指南　190
5.4 CSS動畫　192
5.4.1 初識animation屬性　193
5.4.2 @keyframes規則的語法和特性　194
5.4.3 動畫命名與數據類型　196
5.4.4 負延時與即時播放效果　198
5.4.5 reverse和alternate關鍵字的區別和應用　200
5.4.6 動畫播放次數可以是小數　203
5.4.7 forwards和backwards屬性值究竟是什麽意思　204
5.4.8 如何暫停和重啟CSS動畫　207
5.4.9 深入理解steps()函數　209
5.4.10 標簽嵌套與動畫實現的小技巧　212

第6章 全新的佈局方式　214
6.1 分欄佈局　214
6.1.1 重點關註columns屬性　215
6.1.2 column-gap和gap屬性的關系　217
6.1.3 瞭解column-rule、column-span和column-fill屬性　218
6.1.4 分欄佈局實現兩端對齊佈局　220
6.1.5 break-inside屬性與元素斷點位置的控制　221
6.1.6 box-decoration-break屬性與元素斷點裝飾的控制　222
6.2 彈性佈局　224
6.2.1 設置display:flex聲明發生了什麽　226
6.2.2 flex-direction屬性與整體佈局方向　228
6.2.3 flex-wrap屬性與整體佈局的換行表現　229
6.2.4 熟練使用flex-flow屬性　230
6.2.5 CSS全新的對齊特性綜述　231
6.2.6 justify-content屬性與整體佈局的水平對齊　233
6.2.7 垂直對齊屬性align-items與align-self　234
6.2.8 align-content屬性與整體佈局的垂直對齊　236
6.2.9 order屬性與單個子項的順序控制　238
6.2.10 必讀：深入理解flex屬性　238
6.2.11 應該在什麽時候使用flex:0/1/none/auto　243
6.2.12 詳細瞭解flex-basis屬性與尺寸計算規則　250
6.2.13 彈性佈局最後一行不對齊的處理　258
6.3 網格佈局　263
6.3.1 grid-template-columns和grid-template-rows屬性簡介　264
6.3.2 瞭解網格佈局專用單位fr　269
6.3.3 詳細介紹minmax()和fit-content()函數　271
6.3.4 repeat()函數的詳細介紹　273
6.3.5 瞭解grid-template-areas屬性　278
6.3.6 縮寫屬性grid-template　279
6.3.7 瞭解grid-auto-columns和grid-auto-rows屬性　282
6.3.8 深入瞭解grid-auto-flow屬性　283
6.3.9 縮寫屬性grid　286
6.3.10 間隙設置屬性column-gap和row-gap（grid-column-gap和grid- row-gap）　288
6.3.11 縮寫屬性gap（grid-gap）　289
6.3.12 元素對齊屬性justify-items和align-items　290
6.3.13 縮寫屬性place-items　294
6.3.14 整體對齊屬性justify-content和align-content　294
6.3.15 縮寫屬性place-content　297
6.3.16 區間範圍設置屬性grid-column-start/grid-column-end和rid-row-start/ grid-row-end　298
6.3.17 縮寫屬性grid-column和grid-row　303
6.3.18 縮寫屬性grid-area外加區域範圍設置　304
6.3.19 grid子項對齊屬性justify-self和align-self　307
6.3.20 縮寫屬性place-self　307
6.4 CSS Shapes佈局　308
6.4.1 詳細瞭解shape-outside屬性　308
6.4.2 瞭解shape-margin屬性　313
6.4.3 瞭解shape-image-threshold屬性　314
6.4.4 CSS Shapes佈局案例　315

第7章 不同設備的適配與響應　317
7.1 @media規則　317
7.1.1 @media規則的詳細介紹　318
7.1.2 對深色模式和動畫關閉的支持檢測　322
7.1.3 對鼠標行為和觸摸行為的支持檢測　325
7.2 環境變量函數env()　328
7.3 rem和vw單位與移動端適配最佳實踐　330
7.3.1 瞭解視區相對單位　331
7.3.2 calc()函數下的最佳實踐　332
7.3.3 適合新手的純vw單位的佈局　334
7.4 使用touch-action屬性控制設備的觸摸行為　335
7.4.1 touch-action屬性的常見應用　335
7.4.2 瞭解touch-action屬性各個屬性值的含義　336
7.5 image-set()函數與多倍圖設置　337

第8章 CSS的變量函數var()與自定義屬性　340
8.1 CSS變量的語法、特性和細節　340
8.1.1 CSS自定義屬性的命名　341
8.1.2 var()函數的語法和特性　341
8.1.3 CSS自定義屬性的作用域　344
8.1.4 CSS自定義屬性值的細節　346
8.2 CSS自定義屬性的設置與獲取　348
8.2.1 在HTML標簽中設置CSS自定義屬性　348
8.2.2 在JavaScript中設置和獲取CSS自定義屬性　348
8.3 使用content屬性顯示CSS自定義屬性值的技巧　349
8.4 CSS變量的自定義語法技術簡介　350
8.4.1 使用CSS變量自定義全新的CSS語法　351
8.4.2 CSS變量模擬CSS新特性　352

第9章 文本字符處理能力的升級　354
9.1 文字的美化與裝飾　354
9.1.1 文字陰影屬性text-shadow　354
9.1.2 文字描邊屬性text-stroke　355
9.1.3 文字顏色填充屬性text-fill-color　358
9.1.4 學會使用text-emphasis屬性進行強調裝飾　362
9.2 文字的旋轉與閱讀方向　365
9.2.1 文字方向控制屬性text-orientation　365
9.2.2 文字橫向合並屬性text-combine-upright　366
9.2.3 瞭解unicode-bidi屬性的新屬性值　368
9.3 文本字符的尺寸控制　370
9.3.1 text-size-adjust屬性到底有沒有用　370
9.3.2 使用ch新單位換個心情　371
9.3.3 使用tab-size屬性控制代碼縮進的大小　372
9.4 文字渲染與字體呈現　374
9.4.1 瞭解text-rendering屬性　374
9.4.2 瞭解文字平滑屬性font-smooth　376
9.4.3 font-stretch屬性與字符胖瘦控制　377
9.4.4 font-synthesis屬性與中文體驗增強　380
9.5 字體特徵和變體　382
9.5.1 升級後的font-variant屬性　382
9.5.2 瞭解字距調整屬性font-kerning　393
9.5.3 font-feature-settings屬性的定位　394
9.6 可變字體　395
9.6.1 什麽是可變字體　395
9.6.2 可變字體與font-variation-settings屬性　399
9.6.3 瞭解font-optical-sizing屬性　400

第 10章 圖片等多媒體的處理　402
10.1 圖片和視頻元素的內在尺寸控制　402
10.1.1 超級好用的object-fit屬性　403
10.1.2 理解object-position屬性的作用規則　405
10.2 使用image-orientation屬性糾正圖片的方向　406
10.3 image-rendering屬性與圖像的渲染　408
10.4 不常用的圖像類型函數　411
10.4.1 實現圖像半透明疊加的cross-fade()函數　411
10.4.2 神奇的element()函數　413

第 11章 更絢麗的視覺表現　415
11.1 深入瞭解CSS濾鏡屬性filter　416
11.1.1 filter屬性支持的濾鏡函數詳解　416
11.1.2 更進一步的濾鏡技術　427
11.1.3 引用SVG濾鏡技術　427
11.2 姐妹花濾鏡屬性backdrop-filter　429
11.2.1 backdrop-filter屬性與filter屬性的異同　429
11.2.2 backdrop-filter屬性與毛玻璃效果　430
11.3 深入瞭解CSS混合模式　433
11.3.1 詳細瞭解各種混合模式效果　434
11.3.2 濾鏡和混合模式的化合反應　446
11.4 混合模式屬性background-blend-mode　448
11.4.1 background-blend-mode屬性的常見應用　448
11.4.2 深入瞭解background-blend-mode屬性的作用細節　449
11.5 使用isolation: isolate聲明隔離混合模式　454
11.5.1 isolation屬性　454
11.5.2 isolation:isolate聲明的作用原理　455

第 12章 更豐富的圖形處理　457
12.1 超級實用的CSS遮罩　457
12.1.1 mask-image屬性的詳細介紹　457
12.1.2 mask-mode屬性的簡單介紹　464
12.1.3 mask-repeat屬性的簡單介紹　465
12.1.4 mask-position屬性的簡單介紹　465
12.1.5 mask-clip屬性的詳細介紹　466
12.1.6 mask-origin屬性的簡單介紹　468
12.1.7 mask-size屬性的簡單介紹　468
12.1.8 瞭解mask-type屬性　469
12.1.9 mask-composite屬性的詳細介紹　469
12.1.10 CSS遮罩的一些經典應用示例　472
12.1.11 瞭解-webkit-mask-box-image和mask-border屬性　475
12.2 同樣實用的CSS剪裁屬性clip-path　478
12.2.1 快速瞭解clip-path屬性的各個屬性值　479
12.2.2 深入瞭解nonzero和evenodd填充規則　488
12.2.3 clip-path屬性的精彩應用示例　490
12.3 -webkit-box-reflect屬性與倒影效果的實現　492
12.3.1 -webkit-box-reflect屬性的簡單介紹　493
12.3.2 Firefox瀏覽器實現投影效果的解決方案　494
12.4 使用offset屬性實現元素的不規則運動　496
12.4.1 瞭解offset屬性演變的歷史　498
12.4.2 offset-anchor屬性的簡單介紹　498
12.4.3 offset-distance屬性的簡單介紹　499
12.4.4 offset-path屬性的詳細介紹　501
12.4.5 快速瞭解offset-position屬性　505
12.4.6 理解offset-rotate屬性　506

第 13章 用戶行為與體驗增強　508
13.1 滾動行為相關　508
13.1.1 scroll-behavior屬性與頁面平滑滾動　508
13.1.2 使用overscroll-behavior屬性實現當滾動嵌套時終止滾動　509
13.1.3 瞭解overflow-anchor屬性誕生的背景　511
13.1.4 CSS Scroll Snap簡介　513
13.1.5 CSS Scrollbars與滾動條樣式的自定義　516
13.2 點擊行為相關　519
13.2.1 你不知道的pointer-events:none聲明　519
13.2.2 觸摸行為設置屬性touch-action　521
13.3 拉伸行為相關　521
13.4 輸入行為相關　523
13.5 選擇行為相關　524
13.5.1 聊聊user-select屬性　524
13.5.2 使用::selection改變文字被選中後的顏色　526
13.6 打印行為相關　527
13.6.1 快速瞭解color-adjust屬性　527
13.6.2 page-break系列屬性與分頁的控制　529
13.6.3 orphans/widows屬性與內容行數的限制　531
13.6.4 瞭解@page規則　532
13.7 性能增強　532
13.7.1 慎用will-change屬性提高動畫性能　533
13.7.2 深入瞭解contain屬性　535
13.7.3 content-visibility屬性　540

第 14章 SVG元素的CSS控制　541
14.1 使用CSS屬性直接繪制SVG圖形　541
14.2 CSS屬性下的填充設置　545
14.2.1 fill屬性在Web開發中的應用　545
14.2.2 快速瞭解fill-opacity和fill-rule屬性　547
14.3 CSS屬性下的描邊設置　550
14.3.1 使用stroke屬性實現全兼容的文字描邊效果　550
14.3.2 使用stroke-dasharray屬性實現伸縮自如的虛線效果　552
14.3.3 stroke-dashoffset屬性的經典Web應用舉例　553
14.4 CSS屬性下的標記設置　555
14.4.1 瞭解marker-start/marker-end屬性與起止點的標記　555
14.4.2 瞭解marker-mid屬性與轉折點的標記　556
14.5 其他常見的SVG CSS屬性　557
14.5.1 使用paint-order屬性實現外描邊效果　557
14.5.2 使用vector-effect屬性讓描邊不會縮放　559
14.5.3 使用text-anchor屬性讓文字塊水平居中顯示　560
14.5.4 使用dominant-baseline屬性讓文字塊垂直居中顯示　561
14.5.5 alignment-baseline和dominant-baseline屬性的區別 562

第 15章 Houdini是CSS新的未來嗎　564
15.1 瞭解CSS Paint API　564
15.1.1 CSS變量讓CSS Paint API如虎添翼　567
15.1.2 簡單的總結　568
15.2 瞭解CSS Properties & Values API　568
15.3 瞭解CSS Parser API　570
15.4 詳細瞭解CSS Layout API　571
15.4.1 layout()函數的參數之間的邏輯關系　573
15.4.2 文本居中同時一側對齊的佈局案例　575
15.5 快速瞭解CSS Typed OM　577
15.6 簡單瞭解Animation Worklet　578
15.7 瞭解Font Metrics API　579