中圖網(wǎng)小程序
一鍵登錄
更方便
本類五星書更多>
-
>
全國計算機等級考試最新真考題庫模擬考場及詳解·二級MSOffice高級應用
-
>
決戰(zhàn)行測5000題(言語理解與表達)
-
>
軟件性能測試.分析與調(diào)優(yōu)實踐之路
-
>
第一行代碼Android
-
>
JAVA持續(xù)交付
-
>
EXCEL最強教科書(完全版)(全彩印刷)
-
>
深度學習
深入PostCSSWeb設計 版權信息
- ISBN：9787121318177
- 條形碼：9787121318177 ; 978-7-121-31817-7
- 裝幀：一般膠版紙
- 冊數(shù)：暫無
- 重量：暫無
- 所屬分類：>>
深入PostCSSWeb設計 本書特色
PostCSS是目前CSS處理器中*流行的一個處理器。PostCSS依托其強大的插件生態(tài)系統(tǒng)，為CSS處理器增加了無窮的可能性。本書共十四章內(nèi)容，包括介紹PostCSS，創(chuàng)建變量和混合宏，嵌套規(guī)則，創(chuàng)建媒體查詢，管理顏色、圖片和字體，創(chuàng)建網(wǎng)格，動畫元素，PostCSS插件開發(fā)，簡寫型插件、降級插件和包型插件，定制處理器，管理自定義語法，混合處理器，排除、解決PostCSS的相關問題，為未來做準備。以上內(nèi)容將帶你深入了解PostCSS以及如何使用PostCSS。如果你還沒有準備好去了解PostCSS能做什么，那么，請跟著這本書的步驟進行系統(tǒng)而深入的學習，你將進入到CSS的全新世界。
深入PostCSSWeb設計 內(nèi)容簡介
PostCSS是一種工具，一款已成長為像Sass和LESS一樣主流的處理器，這一切都歸功于它的強大、速度和易用性。《深入PostCSS Web設計》是使用PostCSS的完全指南，《深入PostCSS Web設計》將指導你如何編寫優(yōu)秀的樣式，并將其運用到Web頁面，同時讓你的樣式保持可維護性。這《深入PostCSS Web設計》將向你展示如何利用PostCSS簡化樣式表的整個過程。它涵蓋了給Web頁面添加動態(tài)的、現(xiàn)代的樣式特性的各種技術。隨著內(nèi)容的深入，你將學習如何使用PostCSS來讓CSS更具模塊化的特性、更易于維護。讀完《深入PostCSS Web設計》，你將掌握如何給Web添加CSS樣式表，以及如何創(chuàng)建高執(zhí)行，可維護的樣式表。 ◎添加支持PostCSS的混合宏、變量以及條件支持。 ◎探索代碼嵌套的不同方式，如BEM和PostCSS的嵌套。 ◎使用PostCSS優(yōu)化媒體查詢，獲得*性能。 ◎使用PostCSS處理器給元素，如圖像、字體、網(wǎng)格、SVG和高清圖像添加樣式。 ◎熟悉使用插件和使用PostCSS API擴展插件。 ◎定制自己的處理器并在不同的網(wǎng)站上測試，比如WordPress。 ◎在PostCSS中編寫一個自定義語法，如類似Sass、LESS或Stylus處理器的語法。 ◎提供對未來的CSS特性（如CSS4特性和一些CSS3特性）的支持。
深入PostCSSWeb設計 目錄
1 PostCSS簡介 1
編譯之美 2
PostCSS介紹 2
★PostCSS的優(yōu)勢 3
★PostCSS的陷阱 4
★消除誤解 5
★準備工作 5
搭建開發(fā)環(huán)境 6
★安裝 PostCSS 8
★使用PostCSS創(chuàng)建一個簡單的示例 10
★添加 Source Map 功能 11
★壓縮樣式 13
★自動化編譯 15
代碼審查 16
★PostCSS工作機制 20
★從 Sass 遷移到 PostCSS 21
小結(jié) 22
2 創(chuàng)建變量和混合宏 23
變量和混合宏簡介 23
★設置Sass 24
創(chuàng)建懸停效果示例 27
★使用 LESS編輯CSS 29
過渡到PostCSS 29
添加PostCSS變量支持 29
更新懸停效果示例 30
★進一步思考 33
設置插件順序 35
使用PostCSS創(chuàng)建混合宏 36
更新我們的懸浮效果示例 37
★PostCSS與標準處理器的比較 39
使用PostCSS循環(huán)內(nèi)容 41
★使用@each語句進行遍歷 43
★切換到使用PostCSS 46
小結(jié) 47
3 嵌套規(guī)則 49
嵌套簡介 49
頁面導航 51
★示例的準備工作 52
★從現(xiàn)有處理器進行轉(zhuǎn)換 52
使用PostCSS插件進行過渡 53
★將示例轉(zhuǎn)換成PostCSS生產(chǎn)模式 54
★代碼編譯 56
探索嵌套陷阱 57
★采取更好的方式 60
★重新審視我們的代碼 63
★更新代碼 64
切換到BEM 65
★創(chuàng)建一個簡單的消息盒 67
★編譯并修正代碼 70
★安裝 BEM支持 70
探索更多變化的細節(jié) 74
★修復錯誤 75
小結(jié) 77
4 創(chuàng)建媒體查詢 78
重溫媒體查詢 78
探索PostCSS自定義媒體查詢 79
★從普通CSS開始 81
★使用PostCSS修改案例 82
創(chuàng)建響應式圖片 84
★使用PostCSS創(chuàng)建響應式圖片 85
★響應式圖片的實現(xiàn) 85
★添加高清圖片 88
★后續(xù)步驟 89
★探索媒體查詢的其他可能性 92
添加響應式文本支持 93
優(yōu)化媒體查詢 96
改造對老版本瀏覽器的支持 97
遠離響應式設計 98
探索CSS4的媒體查詢功能 99
小結(jié) 100
5 管理顏色、圖片和字體 101
為網(wǎng)站添加顏色、字體及媒體元素 101
★維護資源鏈接 102
★自動鏈接到對應資源 102
使用PostCSS管理字體 104
創(chuàng)建雪碧圖 106
★案例：創(chuàng)建一個信用卡圖標 107
在PostCSS中使用SVG 110
★使用PostCSS修改圖標 110
★更詳細地探究 111
★考慮替代方案 113
添加對WebP格式圖像的支持 113
★切換WebP圖像 114
★看下文件大小方面的差異 114
操作顏色和調(diào)色板 117
★使用調(diào)色盤展示和混色顏色 118
★案例的詳細解析 119
使用PostCSS創(chuàng)建顏色函數(shù) 120
★使用函數(shù)調(diào)整顏色 121
★解析案例 122
★使用PostCSS濾鏡創(chuàng)建顏色 123
★研究案例的細節(jié) 125
★和CSS3濾鏡對比 126
★給照片添加Instagram效果 127
小結(jié) 128
6 創(chuàng)建網(wǎng)格 130
網(wǎng)格設計的介紹 130
★自動化編譯過程 132
★為Bourbon Neat添加支持 134
使用Bourbon Neat創(chuàng)建一個實例 136
★深入了解我們的Demo 137
探索PostCSS中的網(wǎng)格插件 138
過渡到使用PostCSS-Neat 139
★完善我們的任務列表 141
★測試我們的配置 142
使用Neat和PostCSS來創(chuàng)建一個站點 144
★轉(zhuǎn)換成PostCSS 146
添加響應式能力 147
★糾正設計稿 148
小結(jié) 151
７ 動畫元素 152
回顧基本動畫 152
擺脫jQuery 153
★使用Transit.js庫制作動畫 155
★使用純JavaScript添加動畫 157
★使用jQuery來切換class 158
使用預構(gòu)建庫 160
★解析Demo中的代碼 161
切換到使用Sass 163
★創(chuàng)建一個動畫畫廊 164
★添加收尾工作 167
切換到使用PostCSS 170
探索PostCSS可用的插件選項 170
更新代碼以使用PostCSS 171
★測試我們修改的代碼 173
使用PostCSS創(chuàng)建一個Demo 174
★更新插件 174
★創(chuàng)建Demo 175
★詳細解析一下我們的Demo 176
優(yōu)化動畫 177
使用我們自己的動畫插件 178
更詳細地探索插件 180
小結(jié) 181
8 PostCSS 插件開發(fā) 182
使用插件擴展 PostCSS 182
解析插件的基本結(jié)構(gòu) 183
★index.js 184
★package.json 184
★test.js 186
★Vendor 模塊 187
★List 模塊 187
★API 中的類 187
★API 中的節(jié)點 188
★API 中的方法 188
創(chuàng)建過渡插件 189
★創(chuàng)建測試 192
★修復錯誤 193
★清除*后的錯誤 195
★執(zhí)行測試 196
★分析代碼 197
創(chuàng)建字體插件 198
★插件功能分析 200
★發(fā)布的風險 203
簡化開發(fā)流程 204
插件開發(fā)規(guī)范 205
發(fā)布插件 207
小結(jié) 208
9 簡寫型插件、降級插件和包型插件 209
簡寫型插件 209
包型插件 210
★使用簡寫屬性 211
Rucksack 和簡寫型插件 212
★示例講解 213
★安裝 Rucksack 214
★緩動動畫 214
★內(nèi)容動畫 216
★剖析代碼 217
★使用 Rucksack 修改輪播圖 218
★代碼分析 222
審查和優(yōu)化代碼 223
★使用 cssnano 224
★配置 Stylelint 226
降級處理 227
★檢測兼容性 228
★Oldie 228
★刪除兼容性代碼 230
小結(jié) 232
10 定制處理器 233
創(chuàng)建處理器 233
探索處理器 234
★分析package.json文件 234
★Gulp 任務文件 235
問題剖析 238
★修改 Gulp 任務文件 239
★更新背后的原因 242
優(yōu)化輸出結(jié)果 243
★優(yōu)化 Source Map 243
★瀏覽器前綴 245
★偽類選擇器 246
★更新代碼 247
★處理圖片 249
★解析圖片處理流程 250
添加自動重載功能 251
擴展處理器的功能 252
測試*終的處理器 255
★示例分析 257
訣竅 258
★CSStyle 259
★CSStyle 的優(yōu)勢 260
★示例分析 261
小結(jié) 262
11 管理自定義語法 263
介紹自定義語法 263
準備開發(fā)環(huán)境 264
實現(xiàn)自定義語法的插件 265
★解析內(nèi)容并修復錯誤 267
★解析SCSS內(nèi)容 268
★探索發(fā)生了什么 270
解析CSS 271
★替換RGBA顏色 273
★研究它是如何運作的 274
使用API格式化輸出 275
★分析示例代碼 278
★添加Source Map 279
代碼高亮語法 279
★安裝主題 280
★創(chuàng)建一個HTML主題 281
小結(jié) 282
12 混合處理器 284
邁出**步 284
探索轉(zhuǎn)換過程 285
★選擇插件 286
Pleeease簡介 287
★安裝和配置Pleeease 288
★手動編譯代碼 289
★使用任務編譯代碼 290
★使用Pleeease創(chuàng)建Demo 291
和其他處理器一起編譯代碼 292
使用PreCSS 292
在WordPress中安裝轉(zhuǎn)換器 293
配置生產(chǎn)環(huán)境 293
考慮轉(zhuǎn)換過程 294
修改代碼 295
★拆分樣式 296
★添加瀏覽器前綴 297
★檢查代碼的一致性 299
★壓縮代碼 299
★創(chuàng)建變量 300
★添加rem單位支持 302
★樣式表中的嵌套規(guī)則 303
★樣式表中的循環(huán)規(guī)則 304
★考慮未來的特性 305
編譯和測試修改代碼 305
小結(jié) 308
13 排除、解決PostCSS的相關問題 309
解決一些常見的問題 309
探索一些常見的問題 310
★與操作系統(tǒng)不兼容 310
★“任務名稱”在gulp文件中找不到 311
★找不到＜name of plugin＞模塊 312
★＜name of task＞未定義引用的錯誤 313
★請?zhí)峁㏄ostCSS處理器數(shù)組對象 313
★條目未出現(xiàn)在package.json文件中 314
★編譯的結(jié)果不如預期 315
尋求別人的幫助 317
★在Stack Overflow記錄問題 317
★找到關于PostCSS的Bug 318
小結(jié) 319
14 為未來做準備 320
支持CSS4 320
轉(zhuǎn)換CSS4樣式 321
★驗證電子郵件地址 322
★支持 range輸入框 324
使用cssnext支持未來特性 326
★使用cssnext創(chuàng)建一個簡單網(wǎng)站 327
★創(chuàng)建Demo 327
創(chuàng)建CSS4擴展功能插件 331
★添加支持CSS顏色特性 331
★回到過去 335
★創(chuàng)建自己的插件 337
小結(jié)
編譯之美 2
PostCSS介紹 2
★PostCSS的優(yōu)勢 3
★PostCSS的陷阱 4
★消除誤解 5
★準備工作 5
搭建開發(fā)環(huán)境 6
★安裝 PostCSS 8
★使用PostCSS創(chuàng)建一個簡單的示例 10
★添加 Source Map 功能 11
★壓縮樣式 13
★自動化編譯 15
代碼審查 16
★PostCSS工作機制 20
★從 Sass 遷移到 PostCSS 21
小結(jié) 22
2 創(chuàng)建變量和混合宏 23
變量和混合宏簡介 23
★設置Sass 24
創(chuàng)建懸停效果示例 27
★使用 LESS編輯CSS 29
過渡到PostCSS 29
添加PostCSS變量支持 29
更新懸停效果示例 30
★進一步思考 33
設置插件順序 35
使用PostCSS創(chuàng)建混合宏 36
更新我們的懸浮效果示例 37
★PostCSS與標準處理器的比較 39
使用PostCSS循環(huán)內(nèi)容 41
★使用@each語句進行遍歷 43
★切換到使用PostCSS 46
小結(jié) 47
3 嵌套規(guī)則 49
嵌套簡介 49
頁面導航 51
★示例的準備工作 52
★從現(xiàn)有處理器進行轉(zhuǎn)換 52
使用PostCSS插件進行過渡 53
★將示例轉(zhuǎn)換成PostCSS生產(chǎn)模式 54
★代碼編譯 56
探索嵌套陷阱 57
★采取更好的方式 60
★重新審視我們的代碼 63
★更新代碼 64
切換到BEM 65
★創(chuàng)建一個簡單的消息盒 67
★編譯并修正代碼 70
★安裝 BEM支持 70
探索更多變化的細節(jié) 74
★修復錯誤 75
小結(jié) 77
4 創(chuàng)建媒體查詢 78
重溫媒體查詢 78
探索PostCSS自定義媒體查詢 79
★從普通CSS開始 81
★使用PostCSS修改案例 82
創(chuàng)建響應式圖片 84
★使用PostCSS創(chuàng)建響應式圖片 85
★響應式圖片的實現(xiàn) 85
★添加高清圖片 88
★后續(xù)步驟 89
★探索媒體查詢的其他可能性 92
添加響應式文本支持 93
優(yōu)化媒體查詢 96
改造對老版本瀏覽器的支持 97
遠離響應式設計 98
探索CSS4的媒體查詢功能 99
小結(jié) 100
5 管理顏色、圖片和字體 101
為網(wǎng)站添加顏色、字體及媒體元素 101
★維護資源鏈接 102
★自動鏈接到對應資源 102
使用PostCSS管理字體 104
創(chuàng)建雪碧圖 106
★案例：創(chuàng)建一個信用卡圖標 107
在PostCSS中使用SVG 110
★使用PostCSS修改圖標 110
★更詳細地探究 111
★考慮替代方案 113
添加對WebP格式圖像的支持 113
★切換WebP圖像 114
★看下文件大小方面的差異 114
操作顏色和調(diào)色板 117
★使用調(diào)色盤展示和混色顏色 118
★案例的詳細解析 119
使用PostCSS創(chuàng)建顏色函數(shù) 120
★使用函數(shù)調(diào)整顏色 121
★解析案例 122
★使用PostCSS濾鏡創(chuàng)建顏色 123
★研究案例的細節(jié) 125
★和CSS3濾鏡對比 126
★給照片添加Instagram效果 127
小結(jié) 128
6 創(chuàng)建網(wǎng)格 130
網(wǎng)格設計的介紹 130
★自動化編譯過程 132
★為Bourbon Neat添加支持 134
使用Bourbon Neat創(chuàng)建一個實例 136
★深入了解我們的Demo 137
探索PostCSS中的網(wǎng)格插件 138
過渡到使用PostCSS-Neat 139
★完善我們的任務列表 141
★測試我們的配置 142
使用Neat和PostCSS來創(chuàng)建一個站點 144
★轉(zhuǎn)換成PostCSS 146
添加響應式能力 147
★糾正設計稿 148
小結(jié) 151
７ 動畫元素 152
回顧基本動畫 152
擺脫jQuery 153
★使用Transit.js庫制作動畫 155
★使用純JavaScript添加動畫 157
★使用jQuery來切換class 158
使用預構(gòu)建庫 160
★解析Demo中的代碼 161
切換到使用Sass 163
★創(chuàng)建一個動畫畫廊 164
★添加收尾工作 167
切換到使用PostCSS 170
探索PostCSS可用的插件選項 170
更新代碼以使用PostCSS 171
★測試我們修改的代碼 173
使用PostCSS創(chuàng)建一個Demo 174
★更新插件 174
★創(chuàng)建Demo 175
★詳細解析一下我們的Demo 176
優(yōu)化動畫 177
使用我們自己的動畫插件 178
更詳細地探索插件 180
小結(jié) 181
8 PostCSS 插件開發(fā) 182
使用插件擴展 PostCSS 182
解析插件的基本結(jié)構(gòu) 183
★index.js 184
★package.json 184
★test.js 186
★Vendor 模塊 187
★List 模塊 187
★API 中的類 187
★API 中的節(jié)點 188
★API 中的方法 188
創(chuàng)建過渡插件 189
★創(chuàng)建測試 192
★修復錯誤 193
★清除*后的錯誤 195
★執(zhí)行測試 196
★分析代碼 197
創(chuàng)建字體插件 198
★插件功能分析 200
★發(fā)布的風險 203
簡化開發(fā)流程 204
插件開發(fā)規(guī)范 205
發(fā)布插件 207
小結(jié) 208
9 簡寫型插件、降級插件和包型插件 209
簡寫型插件 209
包型插件 210
★使用簡寫屬性 211
Rucksack 和簡寫型插件 212
★示例講解 213
★安裝 Rucksack 214
★緩動動畫 214
★內(nèi)容動畫 216
★剖析代碼 217
★使用 Rucksack 修改輪播圖 218
★代碼分析 222
審查和優(yōu)化代碼 223
★使用 cssnano 224
★配置 Stylelint 226
降級處理 227
★檢測兼容性 228
★Oldie 228
★刪除兼容性代碼 230
小結(jié) 232
10 定制處理器 233
創(chuàng)建處理器 233
探索處理器 234
★分析package.json文件 234
★Gulp 任務文件 235
問題剖析 238
★修改 Gulp 任務文件 239
★更新背后的原因 242
優(yōu)化輸出結(jié)果 243
★優(yōu)化 Source Map 243
★瀏覽器前綴 245
★偽類選擇器 246
★更新代碼 247
★處理圖片 249
★解析圖片處理流程 250
添加自動重載功能 251
擴展處理器的功能 252
測試*終的處理器 255
★示例分析 257
訣竅 258
★CSStyle 259
★CSStyle 的優(yōu)勢 260
★示例分析 261
小結(jié) 262
11 管理自定義語法 263
介紹自定義語法 263
準備開發(fā)環(huán)境 264
實現(xiàn)自定義語法的插件 265
★解析內(nèi)容并修復錯誤 267
★解析SCSS內(nèi)容 268
★探索發(fā)生了什么 270
解析CSS 271
★替換RGBA顏色 273
★研究它是如何運作的 274
使用API格式化輸出 275
★分析示例代碼 278
★添加Source Map 279
代碼高亮語法 279
★安裝主題 280
★創(chuàng)建一個HTML主題 281
小結(jié) 282
12 混合處理器 284
邁出**步 284
探索轉(zhuǎn)換過程 285
★選擇插件 286
Pleeease簡介 287
★安裝和配置Pleeease 288
★手動編譯代碼 289
★使用任務編譯代碼 290
★使用Pleeease創(chuàng)建Demo 291
和其他處理器一起編譯代碼 292
使用PreCSS 292
在WordPress中安裝轉(zhuǎn)換器 293
配置生產(chǎn)環(huán)境 293
考慮轉(zhuǎn)換過程 294
修改代碼 295
★拆分樣式 296
★添加瀏覽器前綴 297
★檢查代碼的一致性 299
★壓縮代碼 299
★創(chuàng)建變量 300
★添加rem單位支持 302
★樣式表中的嵌套規(guī)則 303
★樣式表中的循環(huán)規(guī)則 304
★考慮未來的特性 305
編譯和測試修改代碼 305
小結(jié) 308
13 排除、解決PostCSS的相關問題 309
解決一些常見的問題 309
探索一些常見的問題 310
★與操作系統(tǒng)不兼容 310
★“任務名稱”在gulp文件中找不到 311
★找不到＜name of plugin＞模塊 312
★＜name of task＞未定義引用的錯誤 313
★請?zhí)峁㏄ostCSS處理器數(shù)組對象 313
★條目未出現(xiàn)在package.json文件中 314
★編譯的結(jié)果不如預期 315
尋求別人的幫助 317
★在Stack Overflow記錄問題 317
★找到關于PostCSS的Bug 318
小結(jié) 319
14 為未來做準備 320
支持CSS4 320
轉(zhuǎn)換CSS4樣式 321
★驗證電子郵件地址 322
★支持 range輸入框 324
使用cssnext支持未來特性 326
★使用cssnext創(chuàng)建一個簡單網(wǎng)站 327
★創(chuàng)建Demo 327
創(chuàng)建CSS4擴展功能插件 331
★添加支持CSS顏色特性 331
★回到過去 335
★創(chuàng)建自己的插件 337
小結(jié)
展開全部
深入PostCSSWeb設計 作者簡介
作者簡介 Alex Libby 從事IT 支持工作，有近20年的多領域終端用戶支持經(jīng)驗，目前在英國的一家全球經(jīng)銷商擔任 MVT 測試開發(fā)者。雖然 Alex 的日常工作是和各種技術打交道，但他最關注的還是開源社區(qū)的動向，尤其是 CSS/CSS3、jQuery 和 HTML5 等技術。到目前為止，Alex 已經(jīng)通過 Packt 出版了10本技術書籍并參與了多本書籍的審校工作，涉及 jQuery、HTML5 視頻、Sass 和 CSS 等技術，《深入PostCSS Web設計》是 Alex 通過 Packt 出版的第11本書。 譯者簡介 廖偉華，常用昵稱“大漠”，W3CPlus創(chuàng)始人，目前就職于淘寶。對HTML5、CSS和CSS處理器等前端腳本語言有非常深入的認識和豐富的實踐經(jīng)驗，專注于CSS、CSS處理器和Web Animation技術的研究，是國內(nèi)最早研究和使用CSS3和CSS處理器技術的一批人。CSS3、Sass和Drupal的中國布道者。2014年出版著作《圖解CSS3：核心技術與案例實戰(zhàn)》。
書友推薦
- >
隨園食單
- >
我從未如此眷戀人間
- >
名家?guī)阕x魯迅:故事新編
- >
推拿
- >
人文閱讀與收藏·良友文學叢書:一天的工作
- >
月亮與六便士
- >
自卑與超越
- >
小考拉的故事-套裝共3冊
本類暢銷
