因為有機會參與一個項目的早期設計，因此搭建的時候不可避免的遇到了如何滿足響應式的問題。翻閱了《響應式Web設計：HTML5和CSS3實踐》和《Implementing Responsive Design》并記錄了篇筆記，以供參考，另一本書的筆記以及在項目開發中的一些心得后續會補上，因為筆記在不斷更新和完善中，如果有紕漏還請幫忙指正。
筆記參考自《響應式Web設計：HTML5和CSS3實踐》，2013年出版內容說不上最新。如下是全書的章的目錄：
- 第 1 章,HTML5、CSS3 及響應式設計入門
- 第 2 章,媒體查詢
- 第 3 章,擁抱流式布局
- 第 4 章,響應式設計中的 HTML5
- 第 5 章,CSS3
- 第 6 章,用 CSS3 創造令人驚艷的美
- 第 7 章,CSS3 的過渡、變形和動畫
- 第 8 章,用 HTML5 和 CSS3 征服表單
- 第 9 章,解決跨瀏覽器問題
第1章 HTML5、CSS3 及響應式設計入門
一些要點：
人們通過手機瀏覽網頁的比率在上升。手機瀏覽器瀏覽網頁時，會讓網頁縮小至可視區域（“視口”），使用者可以對感興趣的內容再單獨放大。但是反復縮小、放大、點錯位置終究不是友好的做法。
預算充足的情況下，我們可以單獨開發“手機版”網站，可以在其中增強一些功能，譬如根據當前GPS來挖掘出有價值數據。多數時候，根據視口大小來匹配不同的視覺效果還是優先選擇。
響應式設計的概念最早提出是指將彈性網格布局、彈性圖片、媒體和媒體查詢結合起來的網頁開發技巧的結合。和以往的做法不同，我們推薦首先對小屏幕進行設計，然后逐漸增強針對大屏幕的設計和內容。
全方位的測試響應式網站，只需要改變瀏覽器窗口大小就能完成大多數測試。當然你可以下載瀏覽器的插件來做到這些，比如Chrome上可以用WindowResizer插件。
-
一些響應式開發的站點
使用HTML5和CSS3能使前端的效果實現變得簡單很多，但是也面臨著瀏覽器不支持的問題。我們可以用一些現代化的工具（庫）來修補它們。
重申一點，預算允許條件下完全定制的移動Web開發比響應式網站開發更合適，但預算有限的前提下響應式Web設計較之標準的固定寬度設計，總是能夠提供更好的用戶體驗。
第2章 媒體查詢：支持不同的視口
關于媒體查詢
- 開始使用媒體查詢吧，它已經被如此廣泛地使用和被瀏覽器所支持。
- 有了媒體查詢，我們就能對設備特性（如視口寬度）設置特定的CSS樣式。
- 媒體查詢的語法（可以拷貝如下代碼到任意CSS的文件后面，然后預覽相關網頁的效果）。
body {
background-color: grey;
}
@media screen and (max-width: 960px) {
body {
background-color: red;
}
}
@media screen and (max-width: 768px) {
body {
background-color: orange;
}
}
@media screen and (max-width: 550px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 320px) {
body {
background-color: green;
}
}
-
在CSS2中可以通過制定<link>標簽的media屬性來為樣式表指定的設備類型（如顯示屏或者打印機）。
<link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css"> -
媒體查詢則不僅是針對設備類型，還能根據設備的特性來應用樣式，如下例為檢測一塊縱向放置的顯示屏。
<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait- screen.css" /> -
你甚至可以在檢測中加上not來顛倒上例中的查詢條件。
<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portrait- screen.css" /> -
也可以將多個表達式組合在一起，如下為增加了視口寬度大于800的顯示屏。
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)" href="800wide-portrait-screen.css" /> -
更進一步還可以寫一個媒體查詢列表，相互之間用逗號隔開，任何一個條件滿足就加載文件。
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen.css" /> -
除了在<head></head>中鏈接CSS文件時候使用媒體查詢，我們也可以在CSS文件中使用媒體查詢。
@media screen and (max-device-width: 400px) { h1 { color: green } } -
還可以在CSS中使用@import指令引入其他的樣式表，謹慎使用這種方式，因為它會增加HTTP的請求從而導致網頁加載速度變慢。
@import url("phone.css") screen and (max-width:360px); -
媒體查詢能使用的特性
媒體查詢中最常用的兩個特性是視口寬度width和屏幕寬度device-width，除此以外還有orientation、aspect-ratio等特性可以檢測到。這些特性幾乎都可以結合max和min結合來創建一個使用范圍。如下phone.css只有在視口寬度在200到300之間才會被引入：
@import url("phone.css") screen and (min-width:200px) and (max-width:360px); -
如何用媒體查詢來改造我們的設計
CSS名為層疊樣式表，意為后面的樣式會覆蓋前面的相同的樣式，因此我們的做法是在前面設置通用的樣式，然后用媒體查詢來進一步重寫相應部分。
-
加載媒體查詢的最佳方法
瀏覽器雖然能忽略與自身不匹配的樣式文件，但卻不一定不下載這些文件。因此，你將樣式文件拆分到不用的樣式文件沒有太大好處（個人喜好或者方便代碼組織的目的除外），這會增加頁面請求HTTP的數量。因此建議用如下的方式在已有的樣式表中追加媒體查詢樣式。
@media screen and (max-width: 768px) {/*樣式*/}
我們的第一個響應式設計
不管如何開始動手做一個響應式設計的頁面吧。這個網站的主題是關于電影，該書作者的初衷是這樣的“我打算自己弄一個And the winner isn't的網站，褒獎哪些本應該獲獎的電影，批評那些不應該獲獎的電影。這里還能視頻剪輯、經典語錄、電影海報，以及證明我沒錯的在線調查”。
1. 從固定寬度設計開始
雖然理論上是從移動（小屏幕）的體驗出發開始設計，但現實中更多的還是將桌面版網頁設計改成響應式的。既然目前和將來相當一段時間內我們都是這么做，我們還是從固定寬度開始。如下是一個固寬度的界面原型，包含了頭部、導航、邊欄、內容區和頁腳。
在此我們先測驗一下HTML4標簽來測驗我們的媒體查詢技巧。如下為HTML4便攜的沒有實際內容的基本頁面結構。
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>And the winner isn't</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!-- the header and navigation -->
<div id="header">
<div id="navigation">
<ul>
<li><a href="#">navigation1</a></li>
<li><a href="#">navigation2</a></li>
</ul>
</div>
</div>
<!-- the sidebar -->
<div id="sidebar">
<p>here is the sidebar</p>
</div>
<!-- the content -->
<div id="content">
<p>here is the content</p>
</div>
<!-- the footer -->
<div id="footer">
<p>Here is the footer</p>
</div>
</div>
</body>
</html>
然后我們為各個模塊加入了一些基本的樣式。
css/main.css
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#header {
margin-right: 10px;
margin-left: 10px;
width: 940px;
background-color: #779307;
}
#navigation ul li {
display: inline-block;
}
#sidebar {
margin-right: 10px;
margin-left: 10px;
float: left;
background-color: #fe9c00;
width: 220px;
}
#content {
margin-right: 10px;
float: right;
margin-left: 10px;
width: 700px;
background-color: #dedede;
}
#footer {
margin-right: 10px;
margin-left: 10px;
clear: both;
background-color: #663300;
width: 940px;
}
在一個視口大于960的瀏覽器中，頁面的瀏覽效果如下。
2. 響應式設計中圖片應該盡可能保持精簡
為了更好的體現固定寬度的設計在視口大小變化時的存在的問題，作者對網頁內容進行了美化。遺憾的是作者并沒有將它放置到Github上，得要我們自己到 andthewinnerisnt 上把網頁內容保存，然后將還未講解到的特性等刪除，以方便按順序來閱讀和增強代碼。這里可能需要稍微花費一點時間，因為很多寫法都已經是優化后的了。為了繼續前進，簡單整理后頁面效果如下（跟作者網站沒太大區別）：
有兩點是需要了解的。
-
使用到的圖片應該盡可能小。
不論是否是響應式Web設計，都應該盡可能減少圖片的大小，頭部和底部的小彩旗就是通過背景圖片的repeat-x來呈現的。
-
關于重置樣式。
各種瀏覽器渲染HTML時會有各種默認樣式，為了統一表現我們通常會導入重置樣式在主樣式文件的開頭。對于HTML5，normalize.css就是不錯的選擇。
你可以網頁窗口拉伸到小于960像素，會看到內容被截斷了。同樣你可以在手機上訪問，想像一下網頁內容在手機上會被截斷成什么樣（開發過程中你可以起個server讓后通過手機訪問頁面; 但是如前面章節提到的，可以簡單地用Chrome的插件（個人因為在公司所有的Chrome插件都被禁用了，所以干脆使用Chrome自帶的模擬器來模擬，但是這個模擬器并不好用，頁面上進行了分辨率設置以后要反復toggle幾次emulate mobile選項才生效。嗯，如果有條件不嫌麻煩就整個真正的移動設備模擬器吧）。如下圖，在Chrome的進行如下設置。
你會發現獲取得到的效果居然還不錯，那是因為瀏覽器默認在一定分辨率下渲染頁面，然后將網頁內容縮小到了?與視口大小匹配。下一節會介紹如何阻止瀏覽器自動調整頁面大小。
3. 阻止移動瀏覽器自動調整大小
IOS和Android的瀏覽器都是基于WebKit核心，這兩種瀏覽器以及其他很多瀏覽器都支持用viewport meta來覆蓋默認的畫布縮放設置。
下面是一個將畫布大小放大到實際尺寸兩倍的示例：
<meta name="viewport" content="initial-scale=2.0,width=device-width, maximum-scale=3, minimum-scale= 0.5" />
在模擬器中加載該頁面可以看到如下效果，夸張的效果已經說明了問題。initial-scale=2.0的意思是將頁面放大n(n=2.0)倍。device-width同時告訴瀏覽器寬度應該等于設備寬度。maximum-scale和minimum-scale還可以用來控制頁面的可縮放范圍。
你甚至可以禁止用戶縮放，不過因為縮放是一個很重要的輔助功能，在實踐中很少使用。
meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
下面是我們最終使用的meta標簽。
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
關于initial-scale要特別說明下，width=device-width設置以后瀏覽器的寬度跟媒體視口一致，經過了initial-scale=1.0的設定以后，呈現的內容大小就是設定的原始內容大小，而不要瀏覽器替你收縮（這是我們進行包含了移動端響應式設計的前置條件）。
拋出另一個問題，在模擬器中當我們設置initial-scale2.0的時候，inspect element內容區域比如#header大小仍舊是960px，為什么不是960*2。只需要假定我們使用了一個類放大鏡的之類的東西導致看到的內容變大了。
4. 針對不同的視口寬度修正設計
我們首先為豎屏的iPad3/4增加媒體查詢，同樣因為Chrome模擬器不支持豎屏設置，我們就手動設置好了。如下為模擬器設置和沒有進行媒體查詢的效果。
然后我們可以增加媒體查詢和樣式設置，可以看看效果。
@media screen and (max-width: 768px) {
#wrapper {
width: 768px;
}
#header, #footer, #navigation {
width: 748px;
}
}
顯示還是有一些問題，我們可以繼續優化，如下應用以后sidebar和content都填滿了寬度。
@media screen and (max-width: 768px) {
#wrapper {
width: 768px;
}
#header,#footer,#navigation {
width: 748px;
}
#content,#sidebar {
padding-right: 10px;
padding-left: 10px;
width: 728px;
}
}
5. 響應式設計中內容始終優先
一個設計原則是，盡可能在多平臺多視口下保留盡可能多的內容，而不是使用display:none等類似的方法來隱藏部分內容。同時你要意識到內容順序的重要性，目前頁面中側邊欄和主內容區的順序決定了側邊欄會顯示在主內容區前面，在窄視口設備下，用戶先看到主內容再看到側邊欄顯然更加合理。因此我們將#content和#siderbar進行互換。雖然標簽換了位置，但頁面在大視口下沒有變化，但是在iPad上變成了首先顯示主內容區，下面才是側邊欄。
在調整好標簽位置以后，我們還可以追加一些樣式，使在iPad上的顯示更加美觀。
@media screen and (max-width: 768px) {
#wrapper,#header,#footer,#navigation {
width: 768px;
margin: 0px;
}
#logo {
text-align:center;
}
#navigation {
text-align: center;
background-image: none;
border-top-color: #bfbfbf;
border-top-style: double;
border-top-width: 4px;
padding-top: 20px;
}
#navigation ul li a {
background-color: #dedede;
line-height: 60px;
font-size: 40px;
}
#content, #sidebar {
margin-top: 20px;
padding-right: 10px;
padding-left: 10px;
width: 728px;
}
.oscarMain {
margin-right: 30px;
margin-top: 0px;
width: 150px;
height: 394px;
}
#sidebar {
border-right: none;
border-top: 2px solid #e8e8e8;
padding-top: 20px;
margin-bottom: 20px;
}
.sideBlock {
width: 46%;
float: left;
}
.overHyped {
margin-top: 0px;
margin-left: 50px;
}
}
6. 媒體查詢只是響應式開發的必要條件之一
盡管我們針對iPad上做了媒體查詢和樣式設置，網站在低分辨率上的iPhone的視口上顯示的仍舊很糟糕。我們雖然使用媒體查詢對視口寬度小于768像素應用了樣式，但是介于768到960像素之間的設備，則沒有對應的媒體查詢代碼，內容因此會被剪切掉。
目前的情形是，我們針對特定的斷點設置了媒體查詢然后使布局發生變化，但是捕捉到下一個視口斷點之前，頁面靜止不變。我們需要更好的策略，能夠在斷點導致的效果突變之前保持伸縮。如何做到這點，正是下一章的內容：將呆板的固定布局修改成靈活的流動布局。
第3章 擁抱流式布局
1. 為什么固定布局經不起考驗
我們使用固定布局，當不同的視口出現的時候，你可以單獨增加媒體檢測，但未來會有更多大小不一的視口出現。
2. 為什么響應式布局需要百分比設計
使用百分比布局創建流動的彈性界面，同時使用媒體查詢來限制元素的變動訪問，將這兩者組合一起構成了響應式設計的核心，基于此可以真正創造出真正完美的設計。
3. 將網頁從固定布局修改為百分比布局
在可預見的未來，我們的網頁制作都是基于設計圖的度量元素的大小、外邊距來寫CSS代碼。我們該如何將固定尺寸轉換為相對尺寸呢？
3.1 需要牢記的公式
目標元素寬度 / 上下文元素寬度 = 百分比寬度
3.2 設置百分比元素的上下文
在我們的例子中，#wrapper是內容區、側邊欄、頁腳設定寬度的上下文，我們需要給他們設定百分比值。當然你也可以給#wrapper設定一個百分比，對于#wrapper而言，百分比是相對于視口尺寸而言的。
我們先來看看頭部，#header（目標元素）寬度為940像素，#wrapper（上下文元素）寬度為940像素。按照計算公司得到的結果是0.979166667，設置到CSS中是：
width: 97.9166667%; /* 940 ÷ 960 */
同樣的設置可以被應用到#navigation和#footer中。
再來看#content和#sidebar，比如我自己改寫的例子中#content的寬度為666像素，#siderbar為220個像素，計算得到百分比分別為：666/960*100=69.375%和（220-2)/960*100%=22.708333333333332%（2像素為border-right的值）。
接下來繼續使用，將頁面各處10像素的內邊距、外邊距也替換為等價的百分比，所有這些間距都是基于960像素的上下文，替換成對應的百分比就是：1.0416667%(10/960)。
3.3 必須時刻牢記上下文
一個需要注意的問題是百分比設置的上下文，在該書的例子中的導航欄中有ul>li>a的結構，我們給a設定了margin-right:25px來控制導航元素之間的間距。但是使用上述的公式將固定限速設置為百分比后發現并不起作用。因沒有為li設定寬度，子節點a找不到上下文的寬度。對此解決辦法有很多，其中一種是直接將margi-right屬性設置到li上來，以為內ul是有設置寬度的。
3.4 用em換成px
最初設計師們使用em是因為在老版本的Internet Explorer無法縮放像素單位的文字。但現代瀏覽器早就支持了，那么用em替代px還有什么優越性呢。有兩點理由：
（1）那:wq些使用Internet Explorer的用戶也能夠縮放文字
（2）這樣做使設計師們的工作變得更加簡單
em的實際大小是相對于上下文字體大小而言的，如果我們給body標簽設置的文字大小是100%，給其他的文字都使用相對單位em，那么這些字體都會受到body上的初始聲明的影響。這樣做的好處是，如果完成了所有文字排版以后客戶提出希望把字體整體調大一些，那么我們只需要修改body的文字大小其他所有文字都會相應變化。
同樣，目標元素尺寸 / 上下文元素尺寸 = 百分比尺寸 這個公式也適用于將文字的像素單位轉換為相對單位。現代瀏覽器的默認字體大小都是16像素(作者疏漏了還是過時了明明是14好么)，因此一開始給body標簽應用如下任何一條規則都是一樣的效果：
font-size: 16px;
font-size: 100%;
font-size: 1em;
舉一個例子，我們為為網站標題設置了如下樣式：
#logo {
display: block;
padding-top: 75px;
color: #0d0c0c;
text-transform: uppercase;
font-family: Arial, "Lucida Grande", Verdana, sans-serif font-size: 48px;
}
#logo span {
color: #dfdada;
}
因為48/16=3,我們可以對字體大小進行改動：
font-size: 3em; /* 48 ÷ 16 = 3*/
如果應用這個規則除了毛病，通常是目標元素的上下文發生了變化，以頁面中的標簽為例：
<h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>
修改后的相對單位樣式如下：
#content h1 {
font-family: Arial, Helvetica, Verdana, sans-serif; text-transform: uppercase;
font-size: 4.3125em; /* 69 ÷ 16 */
}
#content h1 span {
display: block;
line-height: 1.052631579em; /* 40 ÷ 38 */
color: #757474;
font-size: .550724638em; /* 38 ÷ 69 */
}
可以看到，span的元素大小是相對于其父元素的文字的大小，而它的行高是相對于文字本身的大小。
3.5 彈性圖片
現代瀏覽器下要實現圖片隨著流動布局相應縮放大小只需要在CSS中做如下聲明：
img {
max-width: 100%;
}
也可以把這個技術應用到其他多媒體標簽上：
img,object,video,embed {
max-width: 100%;
}
但我們也面臨著一個問題，不論多大的視口都要下載同一張圖片（當然是一張為了兼容大視口的大圖片）未免有些浪費寬帶。
讓圖片隨視口縮放
將奧斯卡圖像的固定寬高刪掉，并設置一個百分比，然后可以拉伸頁面試一把效果。
.oscarMain {
float: left;
margin-top: -28px;
width: 28.9398281%; /* 202 ÷ 698 */
}
給彈性圖片設置閾值
當我們把窗口超過一定分辨率時，圖片也被拉拉大了，我們可以追加一個特定樣式來為圖片設定閾值。
.oscarMain {
float: left;
margin-top: -28px;
width: 28.9398281%; /* 698 ÷ 202 */
max-width: 202px;
}
超級全能的max-width屬性
另一種限制頁面無限擴展的方法是給最外層的#wrapper增加max-width屬性（有使用過Bootstrap的應該不會陌生），如下所示：
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* Holding outermost DIV */
max-width: 1414px;
}
這意味著也頁面會縮放至視的96%，但絕不會超過1414像素寬。
3.6 為不同的屏幕尺寸提供不同的圖片
跟目前工作關聯不大，暫且跳過。
作者推薦了Matt Wilco的做法，大致思路是由服務器端去生成各種尺寸的圖片，并且根據客戶端發送過來的關于resolution大小的信息來決定返回什么尺寸的圖片。
3.7 流動布局和媒體查詢的默契配合
本章前面，我們的導航鏈接在特定的視口寬度下會折成兩行，我們可以使用媒體查詢來修正這個問題。
@media screen and (min-width: 1001px) and (max-width: 1080px) {
#navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
#navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
#navigation ul li a { font-size: 1.1em; }
}
媒體查詢約束流動布局的變動范圍，而流動布局則簡化了從一組媒體查詢樣式過渡到另一組的過渡過程。
3.8 CSS網格系統
該章節介紹了比較流行的幾種網格系統，并用其中一種實現了我們之前所繪的頁面。因為閱讀這本書的時候，Bootstrap已經大行其道并前端開發者所熟知了，就不贅述該書的示例了。但是有一點要注意，Bootstrap這樣的網格系統為我們提供了通過比如cols-md-*等樣式提供了寬度、字體大小等的預設，但在要求嚴格按照設計實現界面的情況下，我們還是要自己來設置它們。
第4章 響應式設計中的HTML5
本章概覽式地介紹了一些HTML5相關知識，更多偏向概念和引導性，操作性不強。
大多數網站可以采用HTML5來編寫。
polyfill腳本：通常指的是一段能給老版本瀏覽帶來新特性的JavaScript代碼。
Modernizr是一個很常用的相對polyfill更加增強了的腳本庫。
時間緊迫可以考慮使用HTML5樣板文件。里面包含了基本樣式normalize.css、polyfill和一些必要的工具如Modernizr。
前端開發工具基本都包含了迅速生成基本文件的功能，這里只稍微對比一下兩個lang和charset的含義：lang="en"指的是語言，比如中文、英文；<meta charset="UTF-8">指的是字符集，可用的類型可就多了只對中文這種語言就有很多種字符集可用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML5的標簽是可以簡略地書寫的，并且一些不符合XHTML1.0的寫法也不會有任何問題，但我們還是推薦盡可能標準的方式來書寫HTML代碼，并且盡可能找到一個平衡：類似于<link>的type屬性可以省略，但標簽要記得閉合并且給屬性加上引號。
有一些標簽在HTML5中被廢棄了，你也許很多都沒有用到過，但是記住要盡可能采用CSS的方式來實現效果，而不是之前的在標簽上加屬性的方式。
-
HTML5增加了一些全新的語義化元素，為什么語義化很重要，因為在以前的做法中我們通過給div家id和class能夠讓其他人在閱讀代碼的時候很好地理解代碼，但是對機器而言就不那么簡單了。HTMl5旨在用全新的語義化標簽來解決這個問題。如下是一些語義化標簽的列表（不打算詳細記錄，那樣也沒有意義）：
- section
- nav
- article
- aside
- hgroup
- header
- footer
- address
HTML5的很多容器都有自己獨立的大綱結構，這意味著你不用總是去想現在是幾級標題，不同父級容器會給不同的標題相應的大小樣式，你只需要在容器中任意使用就好。
有一些網頁工具可以用來測試生成的網頁的大綱結構（個人認為對于排版不佳、長久未讀的代碼還是有些幫助的）。
可以嘗試著把之前自己構建的網頁的元素替換成header、nav、footer，然后修改對應的css中的選擇器。
HTMl5中的文本語義級元素如b, em, i以前會是用來添加文本樣式的并且不推薦為了做樣式而使用它們，但是現在通常有了新的語義可以自己查詢看，不贅述。
遵循WAI-ARIA是指無障礙網頁應用技術，來讓殘障人士能夠訪問網頁中的動態內容，實現這些技術包含的內容有很多，這里只簡單提一下會用到的一些，比如地標角色landmark role（也就是在很多頁面中看到的role="navigation/application/banner/form"等）可以讓屏幕閱讀器在不同的頁面區塊之間輕松跳轉。
Apple公司拒絕在IOS設備上支持Flash的時候極大的促進了HTMl5的發展。
-
使用HTML5方法為頁面添加視頻或者音頻
- 因為早起瀏覽器內置視頻格式的爭議，目前很多瀏覽器支持的不同的格式的視頻或音頻，為了解決這個問題我們可能會為這個視頻或音頻創建多個版本，并都嵌套在video標簽中。
- 為了給IE8以及更低版本的瀏覽器提供備用方案，你可能還需要追加一個Flash甚至媒體文件的下載鏈接。
- audio和video的標簽用法基本一致。
-
響應式視頻
- 給視頻設置固定寬高，當頁面被拉伸的時候，似乎就不怎么響應式了，你可以就本書的例子或者W3C上找一個例子試一試。通過給視頻設置max-width: 100%的方法能夠解決這個問題（本書前面章節針對圖片有提到過這個解決方案）。
-
離線Web應用
- 對于一些應用需要在離線狀態下能夠正常使用。比如一個筆記應用，當用戶的手機網絡斷開時，可能正在編輯一篇筆記，通過使用Web離線功能他就能夠繼續編輯筆記，等到網絡連接上的時候再把內容同步到網絡上。
- HTML5離線應用的運行機制是：為每個需要離線使用的網頁都制定一個.mainfest文件，這個文件羅列了該網頁離線使用時所需要的的所有資源文件。支持離線Web應用的瀏覽器會自動讀取.mainfest文件，下載所羅列的資源列表并緩存至本地以備網絡斷開時使用。
第6章 用CSS3創造令人驚艷的美
一點小感受：總覺得自發的細致閱讀一本書是很沒有動力來源和成效的事情，因為沒有應用到具體項目中，你不會想深究。目前所看的這些章節除了前三章外即時如此，其實只需要有個概念在腦袋中，真的用到的時候有搜索引擎在手然后就行了。急切想翻閱完畢要開始看Linux相關的書籍了~ 以下為第6章簡略筆記：
- 使用CSS3可以替代圖片減少http請求。
- 需要添加瀏覽器私有前綴來保證最大的瀏覽器兼容性，或者使用一些JavaScript，它會自動為CSS3追加瀏覽器私有前綴。
6.1 文字陰影
-
text-shadow: 1px 1px #cccccc;參數分別表示右側陰影大小，下側陰影大小，模糊距離）。 - 顏色可以使用hex、hsl、rgb顏色。
- 大小可以使用px、em、rem。
- 還可以用逗號分隔的方式使用多重文字陰影。
6.2 盒陰影
- 盒陰影的語法和文字陰影完全一樣。
- 可以將text-shadow后的第一個參數指定為inset來設置內陰影。
- 同樣可以設置多重陰影。
6.3 背景漸變
- 線性背景漸變，方法為設定起點、過渡點、終點的顏色方案。
- 徑向背景漸變，可以設置發散形式的漸變，可選擇的類型（圓、橢圓等）很多，能做出很酷炫的效果。
- 重復漸變。
6.4 背景漸變圖案
- 有一些家伙用CSS的背景技術制作了一些圖案能夠在背景中漸變，沒有美工或者帶寬有限減少用大圖的時候，或許是個選擇。
6.5 CSS3的響應性
- 針對上述學習的特性，務必記得針對不同的視口做不同的聲明。
- 為了瀏覽器兼容性，書寫CSS3需要私有前綴，還有一種快速編寫CSS3的方法，就是使用CSS預處理器，比如最流行的SASS和LESS（聞名已久未曾用過）。
6.6 組合使用CSS3屬性
略（結合該書開篇的案例來操作一把上面的新屬性）。
6.7 多重背景圖片
- 在CSS3中我們可以使用多重背景，各自有個子的大小和位置，相互之間用逗號隔開就行。
6.8 更多CSS特性
- 上面是介紹的只是CSS3的一小部分但屬于最常用的。
6.9 可縮放圖標：響應式設計中的完美選擇
- @font-face圖標就是將字符做成圖標的特定字體，以往我們的需要使用很多的圖標圖片，或者組合成一張很大的圖，現在只需要用一種字體就涵蓋所有需要的圖標。比較流行的比如font-awesome就是這樣的原理（哦，原來如此~）。
第7章 CSS3過渡、變形和動畫
7.1 什么是CSS3過渡以及如何使用它
一個超鏈接默認設置了一個樣式，當鼠標hover上去的時候可能會應用到另外一個樣式，這就是一個過渡。過渡可以針對屬性來過渡，比如當hover發生時候過渡。
-
過渡涉及四個屬性：
- transition-property 要過渡的屬性名稱，比如background-color或all
- transition-duration 定義過渡效果持續的時間
- transition-timing-function 定義過渡期間速度如何變化
- transition-delay 可選，定義過渡開始前的延遲事件
-
單獨使用各種過渡屬性創建效果的語法如下：
#content a { transition-property: all; transition-duration: 1s; transition-timing-function: ease; transition-delay: 0s; } -
簡寫語法如下
transition: all 1s ease 0s; -
也可以在不同的時間段內過渡不同的屬性
#content a { /* other setting */ transition-property: border, color, text-shadow; transition-duration: 2s, 3s, 8s; } 過渡調速函數，不太理解可以參考這里
7.2 CSS3中的2D變形
- 有兩種可用的CSS3變形：2D變形和3D變形。其中2D變形實現更廣泛，它允許我們使用如下變形：
- scale：用來縮放大小
- translate：在屏幕內移動元素
- rotate：按照一定的角度旋轉元素
- skew：按照X和Y軸對元素進行斜切
- matrix：將上述若干變形效果組合成單個聲明，并允許你用像素精度來控制變形效果
- 實際項目中可以使用傻瓜矩陣變形工具來完成這樣的事情。
- transform-origin可以用來修改變形效果的起點。
7.3 嘗試CSS3的3D形變
- CSS3的3D形變能創造非常酷的效果，但相對2D的瀏覽器支持性要差一些。
7.4 CSS3動畫效果
如下是一個給h5加上陰影動畫的例子，最開始定義一個關鍵幀的名字，以及在動畫進行到多少的時候的效果，然后在元素h5應用。當然如果想要在特定瀏覽器上執行，得要給 @keyframes 和 animation 都加上私有前綴。
@keyframes warning {
from {
text-shadow: 0px 0px 4px #000000;
}
50% {
text-shadow: 0 0 40px #000000;
}
to {
text-shadow: 0 0 4px #000000;
}
}
.back h5 {
font-size: 4em;
color: #f2050b;
text-align: center;
animation: warning 1.5s infinite ease-in;
}
動畫可以采用的參數有七個可以獨立設置的屬性值，除了像下面這樣列出來你也可以像上例那樣寫縮寫。
animation-name: warning;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-play-state: running;
animation-delay: 0s;
animation-fill-mode: none;
CSS3過渡讓效果的初始按照可定義的速度進行，形變使使得元素大小、偏移等值脫離初始，動畫則定義了一個變化的過程，三者結合起來能產生非常豐富的效果。 該書示例有結合示例進行演示，在此跳過，有興趣可以自己參考~
7.5 本章小結
本章學習了CSS3過渡、形變和動畫的內容，學習這些新特性的最終目的是使用CSS3來替代JavaScript制作一些優雅降級的增強效果，從而使代碼更簡潔和豐富。下一章將開始學習表單中HTML5和CSS3的應用。
第8章 用HTML5和CSS3征服表單
8.1 HTML5表單
HTML5表單不僅包含了一些新的視覺元素，還具備了基本的客戶端驗證的功能，而過去這些一般都需要依賴JavaScript。如下列舉了這些新的表單特性：
8.1.1 一個示例表單構建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 首先定義了一個id為redemption的表單 -->
<form id="redemption" method="post">
<!-- hgroup中的h1和h2用于顯示標題和說明文字 -->
<hgroup>
<h1>Oscar Redemption</h1>
<h2>Here's your chance to set the record straight: tell us what
year the wrong film got nominated, and which film <b>should</b>
have received a nod...</h2>
</hgroup>
</form>
<fieldset>
<legend>About the offending film (part 1 of 3)</legend>
<div>
<label for="film">The film in question?</label>
<input id="film" name="film" type="text" placeholder="e.g. King 3
Kong" required aria-required="true" >
</div>
</fieldset>
</body>
</html>
因為書中的例子其實并沒有提供連貫的例子，如下只貼出一些片段用于粘貼在上面的表單示例中方便查看效果。
8.1.2 placeholder
占位符是HTML5表單中非常頻繁被使用的一個屬性，輸入框獲取焦點后會自動消失。
8.1.3 required
為確保表單必須輸入值，可以添加required屬性，當輸入不符合條件時候瀏覽器會給出提示，并且表單默認不會提交。注：aria-required是為了方便屏幕閱讀器用戶，第四章有介紹過WAI-ARIA。
8.1.4 autofocus
autofocus可以讓表單加載完成時就有一個表單域被默認自動聚焦。
<fieldset>
<legend>autofocus example</legend>
<div>
<label for="search">Search the site...</label>
<input id="search" name="search" type="search" placeholder="Wyatt Earp"
autofocus>
</div>
</fieldset>
8.1.5 autocomplete
很多瀏覽器提供了自動完成功能來幫助用戶完成輸入，但是通常會關閉這個功能，因為它不僅能保護敏感數據（例如銀行卡賬戶），還可以讓用戶用心填寫表單而不是隨便輸入一個值（使用者可能通過自動完成來選擇曾填寫過的假的電話號碼）。
下面的代碼是一個禁止自動完成的表單項：
<fieldset>
<legend>autocomplete example</legend>
<div>
<label for="tel">Telephone (so we can berate you if you're wrong)</label>
<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required aria-required="true" >
</div>
</fieldset>
也可以給表單本身設置屬性來禁止整個表單的自動完成功能：
<form id="redemption" method="post" autocomplete="off">
autofus可以讓表單加載完成時就有一個表單被默認自動聚焦。
8.1.6 list及對應的detail元素
<fieldset>
<legend>list example</legend>
<div>
<label for="awardWon">Award Won</label>
<input id="awardWon" name="awardWon" type="text" list="awards">
<datalist id="awards">
<select>
<option value="Best Picture"></option>
<option value="Best Director"></option>
<option value="Best Adapted Screenplay"></option>
<option value="Best Original Screenplay"></option>
</select>
</datalist>
</div>
</fieldset>
使用了list屬性的輸入框看起來就是一個普通的文本輸入框，list屬性的值就是datalist元素的id，開始輸入時會顯示一個數據選擇框。注：使用select包裹option是為了便于老版本瀏覽器的降級。
8.1.7 HTML5的新輸入類型
- 郵箱地址
<input type="email" /> - 數字
<input type="number"/> - URL地址
<input type="url"/> - 電話號碼
< input type="tel"/> - 搜索輸入框
<inputtype="search"/>和普通文本框表現一樣只是個別瀏覽器渲染上有細微差別 - 正則表達式
<input pattern="([a-zA-Z])"/> - 顏色選擇器
<input type="color"目前很少瀏覽器支持該特性（@13年） - 滑動條
<input type="range" min="1" max = "10" />
8.1.8 日期和時間輸入類型
如下多種的日期時間輸入類型提供了不同的度量單位，輸出結果值會略有不同：
- date
- month
- week
- time
- datetime和datetime-local
8.2 如何給不支持新特性的瀏覽器打補丁
盡管說了很多HTML5表單的新特新，但實際使用的時候 （1）支持表單新特性的瀏覽器在具體實現上有所不同（2）對完全不不支持新特的瀏覽器如何處理。
第四章提過一個Modernizr的JavaScript框用于向缺少HTML5/CSS3特性支持的瀏覽器打補丁，Webshims Lib就是構建于Modernizr和jQuery之上的。
它利用了Modernizr的加載功能，只加載實際所需要的補丁。
通過打補丁不僅使老版本的瀏覽器受益，很多新的劉瀏覽器也沒有完全實現HTML5的表單特性，網頁中引入Webshims Lib可以修補這些瀏覽器的缺陷。
Webshims Lib的使用很簡單：
- 下載Webshims Lib包，解壓
- 從包解壓出來的文件夾中導入依賴的jQuery、Modernizr、polyfiller文件
- 執行javascript:
$.webshims.polyfill()來初始化腳本用于加載所需的補丁
8.3 使用CSS3美化HTML5表單
作者使用第七章介紹的CSS3知識，用類似圓角、陰影等屬性稍微潤色了下表單，此處略過。除了之前學習的CSS3屬性外，CSS3還專門提供了一些針對表單的偽類選擇器：
- input:required
- input:focus:invalid
- input:focus:valid
可以通過這些偽類來書寫一些樣式規則，從而增強表單的用戶體驗。
8.4 小結
本章學習了如何使用一堆新的HTML5表單屬性，從而讓表單更加好用。并且我們介紹了如何使用工具來進行JavaScript對象檢測有條件地加載JavaScript補丁腳本，從而保證這些在新舊瀏覽器上都能提供類似的用戶體驗。
