隨著網際網路技術的不斷發展壯大，網路覆蓋率和可聯網設備不斷增加，用戶對可訪問性的需求也與日俱增。《漸進增強的Web設計》是一本網頁設計與開發方面的實用指南，介紹了一種漸進增強的編程方法，利用JavaScript、高級CSS和Ajax製作能實現高度互動體驗的網站，同時還確保代碼庫無需修改就能到處運行。這個法則簡單地說就是建議所有的網站內容和功能都以語義化的HTML為基礎，讓任何具備網路功能的設備都可以使用，然後再在上面無縫疊加基於高級CSS和JavaScript的增強功能。 《漸進增強的Web設計》適合網站設計和開發人員閱讀。
基本介紹
- 中文名：漸進增強的Web設計
- 外文名：Progressive enhancement of Web design
- 類型：Web設計
主要內容
目 錄
第一部分 測試驅動的漸進增強方法
第1章 我們的方法 2
1.1 測試瀏覽器能力 3
1.2 規劃漸進增強：X光透視 4
1.3 從X光到實踐：漸進增強開發的構成 5
1.4 理論結合實踐 6
第2章 漸進增強實踐：X光透視 7
2.1 X光透視概述 7
2.1.1 定義內容層級並將組件映射到HTML 8
2.1.2 編寫基礎標記和儘可能少的安全樣式 10
2.1.3 套用標記、樣式和腳本增強 11
2.2 案例1：規劃新聞網站的結構和組織方式 12
2.2.1 評估內容組織和命名方式 12
2.2.2 藉助原生HTML層級功能實現內容組織 13
2.2.3 構建導航 14
2.2.4 處理分層和動畫內容 15
2.2.5 支持動態過濾和排序 16
2.3 案例2：結賬表單中的工作流、驗證和數據提交 17
2.3.1 解構結賬表單設計 17
2.3.2 標記表單以確保可訪問性 23
2.3.3 添加限制與驗證 24
2.3.4 組合基本和增強體驗 25
2.4 案例3：預算計算器里的互動數據可視化 25
2.4.1 選擇預算線組件的基本標記 26
2.4.2 從基礎標記開始創建可訪問的滑塊 28
2.4.3 製作餅圖 28
2.5 案例4：支持功能完備瀏覽器應用程式的各種功能——照片管理器 30
2.5.1 製作全局導航元素的標記 31
2.5.2 支持專輯和多張照片的複雜互動 32
2.5.3 創建自定義表單和疊加 37
2.5.4 創建返回按鈕支持 38
2.6 在實踐中運用X光的核對清單 39
第3章 編寫有意義的標記 40
3.1 標記文本和圖像 41
3.1.1 用於標記有意義文本的元素 41
3.1.2 列表 45
3.1.3 表格式數據 46
3.1.4 圖像 48
3.1.5 嵌入式富媒體 49
3.1.6 嵌入外部網頁內容 50
3.2 標記互動內容 51
3.2.1 錨連結 51
3.2.2 表單結構 51
3.2.3 表單控制項 53
3.3 創建頁面環境 57
3.3.1 了解何時該用塊級元素或內聯元素 58
3.3.2 用ID和類標識元素 59
3.3.3 用WAI-ARIA路標角色標識頁面主要版塊 60
3.3.4 保持原始碼順序清晰易讀 60
3.3.5 使用title屬性 62
3.4 建立一張HTML文檔 63
3.4.1 DOCTYPE 64
3.4.2 文檔頭 65
3.5 加入可訪問性 68
3.5.1 可訪問性指導原則和法律標準 69
3.5.2 Web內容可訪問性指南 70
第4章 有效套用樣式 71
4.1 將樣式套用到網頁 71
4.1.1 將樣式保存在外部樣式表里 71
4.1.2 連結到外部樣式表 72
4.1.3 使用有意義的命名慣例 74
4.2 為基本和增強體驗添加樣式 74
4.2.1 基本體驗里的安全樣式 75
4.2.2 為增強體驗添加樣式 76
4.3 可訪問性的考慮要點 77
4.4 應對bug和瀏覽器差異 78
4.4.1 條件注釋 78
4.4.2 常見問題和變通方法 79
第5章 編寫增強和互動腳本 83
5.1 如何正確引用JavaScript 83
5.1.1 避免內聯JavaScript 83
5.1.2 引用外部JavaScript 84
5.2 理解JavaScript在基本體驗里的位置 84
5.3 腳本增強的最佳實踐 85
5.3.1 在內容就緒時運行腳本 85
5.3.2 給標記套用行為 85
5.3.3 用JavaScript構建增強標記 87
5.3.4 管理內容可見性 89
5.3.5 套用樣式增強 90
5.4 保持和增強可用性與可訪問性 90
5.4.1 實現鍵盤訪問 91
5.4.2 指派WAI-ARIA屬性 92
5.4.3 測試可訪問性 93
5.4.4 維持狀態和“後退”按鈕 93
第6章 測試瀏覽器能力 95
6.1 EnhanceJS：一套能力測試框架 95
6.2 通過EnhanceJS套用增強 98
6.3 配置EnhanceJS 100
6.3.1 載入額外的樣式表 101
6.3.2 載入額外的腳本 102
6.3.3 自定義體驗切換連結 103
6.3.4 強制通過或不通過EnhanceJS測試 104
6.4 擴展EnhanceJS測試套件 105
6.4.1 用EnhanceJS選項修改測試套件 105
6.4.2 創建EnhanceJS的新實例或多個實例 105
6.4.3 為調試開啟能力測試警告 106
6.5 在伺服器上最佳化EnhanceJS 107
第二部分 漸進增強實戰
第7章 用漸進增強方法構建組件 110
7.1 組件是如何編寫的 110
7.2 在組件各章里導航 111
7.3 可下載的範例代碼 112
第8章 可摺疊內容 113
8.1 X光透視 113
8.2 創建可訪問的可摺疊內容 115
8.2.1 基礎標記和樣式 115
8.2.2 增強標記和樣式 116
8.2.3 實現可摺疊的增強腳本 119
8.3 使用可摺疊腳本 121
第9章 標籤頁 122
9.1 X光透視 122
9.2 創建標籤頁 124
9.2.1 基礎標記和樣式 124
9.2.2 增強標記和樣式 126
9.2.3 標籤頁腳本 130
9.3 讓標籤頁更進一步 132
9.3.1 書籤和歷史(後退按鈕)追蹤 132
9.3.2 自動輪換的標籤頁 135
9.3.3 引用外部標籤內容 136
9.3.4 將標籤頁顯示為手風琴組件 136
9.4 使用標籤頁腳本 136
第10章 工具提示 138
10.1 X光透視 138
10.2 用title內容創建工具提示 142
10.2.1 基礎標記和樣式 142
10.2.2 增強標記和樣式 143
10.2.3 工具提示增強腳本 145
10.3 用錨連結創建工具提示 146
10.4 用外部來源創建工具提示 148
10.5 使用工具提示腳本 150
第11章 樹形控制項 151
11.1 X光透視 151
11.2 創建樹形控制項 154
11.2.1 基礎標記和樣式 154
11.2.2 增強標記和樣式 156
11.2.3 樹形控制項增強腳本 159
11.3 使用樹形控制項腳本 165
第12章 HTML5 canvas圖表 167
12.1 X光透視 168
12.2 基礎標記 169
12.3 創建可訪問的圖表 172
12.3.1 解析表格數據 172
12.3.2 用canvas實現數據可視化 176
12.3.3 添加表格增強樣式 183
12.3.4 保持數據的可訪問性 184
12.4 讓canvas圖表更進一步：visualize.js外掛程式 186
第13章 對話框和疊加層 189
13.1 X光透視 190
13.2 創建對話框 191
13.2.1 基礎標記和樣式 191
13.2.2 增強標記和樣式 193
13.2.3 對話框增強腳本 198
13.3 讓對話框更進一步 202
13.4 使用對話框腳本 202
第14章 按鈕 206
14.1 X光透視 206
14.2 給基於input的按鈕添加樣式 208
14.2.1 基礎標記和樣式 208
14.2.2 增強標記和樣式 210
14.2.3 懸停狀態增強腳本 213
14.3 創建帶有複雜視覺格式的按鈕 214
14.3.1 基礎標記和樣式 215
14.3.2 增強標記和樣式 215
14.3.3 input轉button增強腳本 216
14.4 使用input轉button腳本 219
14.5 讓按鈕更進一步 219
第15章 複選框、單選按鈕和星級評分 221
15.1 X光透視 222
15.2 創建自定義複選框 224
15.2.1 基礎標記 224
15.2.2 增強標記和樣式 225
15.2.3 複選框腳本 228
15.3 創建自定義單選按鈕 230
15.3.1 基礎標記 230
15.3.2 增強標記和樣式 231
15.3.3 單選按鈕腳本 233
15.4 讓自定義input更進一步：星級評分組件 235
15.4.1 基礎標記 236
15.4.2 增強標記和樣式 237
15.4.3 編寫星級評分組件腳本 238
15.5 使用自定義input和星級評分腳本 241
第16章 滑塊 242
16.1 X光透視 242
16.2 創建滑塊 246
16.2.1 基礎標記和樣式 246
16.2.2 增強標記和樣式 247
16.2.3 滑塊腳本 252
16.3 使用滑塊腳本 257
第17章 下拉選單 260
17.1 X光透視 260
17.2 創建可訪問的自定義下拉選單 262
17.2.1 基礎標記和樣式 262
17.2.2 增強標記和樣式 263
17.2.3 自定義下拉選單增強腳本 270
17.3 讓自定義下拉選單更進一步：給選項添加高級樣式 277
17.4 使用自定義下拉選單腳本 279
第18章 列表生成器 281
18.1 X光透視 281
18.2 創建列表生成器 283
18.2.1 基礎標記和樣式 283
18.2.2 增強標記和樣式 284
18.2.3 列表生成器腳本 287
18.3 讓列表生成器更進一步：多項選擇、排序、自動完成和上下文選單 292
18.3.1 多項選擇 292
18.3.2 拖放排序 292
18.3.3 自動完成 293
18.3.4 上下文選單 293
18.4 使用列表生成器腳本 293
第19章 檔案輸入控制項 295
19.1 X光透視 296
19.2 創建自定義的檔案輸入控制項 298
19.2.1 基礎標記和樣式 298
19.2.2 增強標記和樣式 299
19.2.3 自定義檔案輸入控制項的腳本 302
19.3 使用自定義檔案輸入控制項腳本 304
放眼未來 306
