[書籍精讀]《回應式Web設計 HTML5和CSS3實戰(第二版)》精讀筆記分享

寫在前面

• 書籍介紹：本書主要講解了如何運用HTML5和CSS3來進行回應式Web設計，使頁面的設計與開發根據用戶行為以及設備環境(系統平臺、螢屏尺寸、螢屏定向等)來進行相應的回應和調整，
• 我的簡評：回應式Web設計，個人從業經驗上覺得應該是一個很龐大的話題，也是一個實用性很強的方面，作者在本書中講的回應式的內容并不多，后面很多講的都是HTML5與CSS3方面的內容，適合剛入門的前端朋友吧，
• ！！文末有pdf書籍、筆記思維導圖、隨書代碼打包下載地址哦！閱讀「書籍精讀系列」所有筆記，請移步：推薦收藏-JavaScript書籍精讀筆記系列導航

第一章 回應式Web設計基礎

• 回應式Web設計可以讓一個網站同時適配多種設備和多個螢屏，可以讓網站的布局和功能隨用戶的使用環境（螢屏大小、輸入方式、設備/瀏覽器能力）而變化

1.2.什么是回應式Web設計

• 回應式設計，名字是Ethan Marcotte在2010年發明的
• 綜合運用三種已有技術（彈性網格布局、彈性圖片/媒體、媒體查詢）實作了一個解決方案，就叫“回應式Web設計”
• 所謂回應式設計，就是網頁內容會隨著訪問它的視口及設備的不同而呈現不同的樣式

1.3.瀏覽器支持

• 在寫作這一版的2015年年中，IE6、IE7、IE8基本消失了，就連IE9的市場份額也降到了2.45%（IE10只占1.94%，IE11上升到了11.68%）
• 應該勸告自己的客戶或老板，告訴他們為什么給那些“殘疾”瀏覽器寫代碼是錯誤的，而把時間和資源主要放在支持現代瀏覽器和現代平臺上才是最明智的
• 不少新工具，可以把以往需要手工做的事自動化（CSS前處理器（Sass、Less、Stylus、PostCSS）可以幫我們組織代碼、變數、顏色操作和數學運算；像PostCSS這樣的工具可以幫我們完成添加瀏覽器前綴這樣繁瑣的任務；一些清理和驗證工具可以幫我們檢查HTML、CSS和Javascript代碼是否符合標準，自動提示輸入錯誤和語法錯誤）

1.4.第一個回應式例子

• 瀏覽器中用于呈現網頁的區域叫視口（viewport），視口通常并不等于螢屏大小，特別是可以縮放瀏覽器視窗的情況下
• 媒體查詢可以讓我們在某些條件下（如寬度和高度為多少的情況下）為網頁應用樣式
• 人們在剛開始使用媒體查詢的時候，經常會針對當時流行的設備設定斷點
• 回應式設計，那應該與顯示它的設備無關才對，而不是只是在某些螢屏中才最合適
• 首先是基本的樣式，它適用于任何設備，在這個樣式基礎上，在為不同視口、不同能力的設備，漸進增加不同的視覺效果和功能

1.5.示例的不足之處

• 怎么使用標記來構建頁面，才能保證所有元素都具有語意
• 示例中使用了彈性圖片，可是如果用戶使用手機查看頁面，那么他會下載一個很大的圖片（至少2000像素以上），而在螢屏上又只能縮成幾分之一顯示
• 使用SVG（Scalable Vector Graphics，可伸縮矢量圖）可以簡單地適用各種解析度，SVG圖形看起來非常清晰，無論使用什么螢屏

第二章 媒體查詢

寫在前面

• CSS3規范分成很多模塊，媒體查詢（3級）只是其中一個模塊
• 除了古老的IE（8及以下版本），幾乎所有瀏覽器都支持它

2.1.為什么回應式Web設計一需要媒體查詢

• CSS3媒體查詢可以讓我們針對特定的設備能力或條件為網頁應用特定的CSS樣式
• 官方定義：媒體查詢包含媒體型別和零個或多個檢測媒體查詢的運算式，width、height和color都是可用于媒體查詢的特性，使用媒體查詢，可以不必修改內容本身，而讓網頁適配不同的設備
• 真正的編程語言都有相應的語法構造處理一個或多個條件分支

2.3.組合媒體查詢

• 可以將多個媒體查詢串在一起
• @import與媒體查詢（CSS中的@import會增加HTTP請求（進而影響加載速度），因此請慎用）
• 在CSS中使用媒體查詢（更常見的是在CSS檔案內部直接使用媒體查詢；在針對所有設備的媒體查詢中，可以使用簡寫語法，即省略關鍵字all（以及緊隨其后的and））
• 媒體查詢可以測驗哪些特性（CSS媒體查詢4級草案中廢棄了一些特性，特別是device-height、device-width和device-aspect-ratio）

2.4.通過媒體查詢修改設計

• 任何CSS都可以放在媒體查詢中（使用媒體查詢可以從整體上修改一個網站的布局和外觀（通常針對不同的視口大小））
• 針對高解析度設備的媒體查詢

2.5.組織和撰寫媒體查詢的注意事項

• 使用媒體查詢鏈接不同的CSS檔案
• 從瀏覽器的角度看，CSS屬于“阻塞渲染”的資源，換句話說，瀏覽器需要下載并決議鏈接的CSS檔案，然后再渲染頁面
• 在這些瀏覽器看來，不符合媒體查詢指定條件（比如螢屏比媒體查詢的小）的CSS檔案可以延緩執行（deferred），到頁面初始加載后再處理，以便讓用戶感覺頁面加載速度更快
• 阻塞渲染：僅是指該資源是否會暫停瀏覽器的首次頁面渲染，無論CSS是否阻塞渲染，CSS資源都會被下載，只是說非阻塞性資源的優先級比較低而已
• 分隔媒體查詢的利弊（撰寫多個媒體查詢分別對應不同的樣式雖然有好處，多一個檔案就要多一次HTTP請求，在某些條件下，HTTP請求多了會明顯影響頁面加載速度；gzip是一種壓縮和解壓縮的檔案格式，主流一點的服務器都支持gzip壓縮CSS，從而讓服務器發送給設備的檔案明顯“瘦身”（到了設備之后，再解壓成原來的格式））
• 把媒體查詢寫在常規樣式表中

2.7.關于視口的meta標簽

• 為了利用媒體查詢，應該讓小螢屏以其原生大小來顯示網頁，而不是先在980像素寬的視窗中渲染好，讓用戶去放大或縮小
• user-scalable=no是禁止用戶縮放的

2.8.媒體查詢4級

• 可編程的媒體特性（最常見的場景為啟用JavaScript的用戶撰寫特有的CSS規則；CSS媒體查詢4級致力于在CSS中提供更標準的實作方式）
• 互動媒體特性：指標媒體特性用于查詢滑鼠之類的指標設備是否存在，以及存在時其精確的位置
• 懸停媒體特性：懸停媒體特性就是用來測驗用戶是否可以通過某種機制實作在螢屏元素上懸停的
• 環境媒體特性：要能根據用戶的環境來改變設計多好，比如，根據環境光線的亮度

2.9.小結

• 僅有媒體查詢只能實作可適配的Web設計，即從一種布局到另一種布局的切換

第三章 彈性布局與回應式圖片

• 百分比布局使得網頁寬度能夠隨著查看它們的螢屏視窗大小變化，因此得名彈性布局

3.1.將固定像素大小轉換為彈性比例大小

• 回應式設計之父Ethan Marcotte在他2009年的文章“Fluid Grids”中給出：結果=目標/背景關系
• 理想情況下，應該從小螢屏設計向桌面設計轉換
• 對于小螢屏，核心思想就是把內容顯示在一根長條里
• 綜合運用了兩個回應式Web設計的核心技術：將固定大小轉換為比例大小，以及使用媒體查詢相對于視口大小應用CSS規則
• 為什么需要Flexbox：檢討下即有布局技術，比如行內塊、浮動以及表格的缺點
• 行內塊與空白：使用行內塊（inline-block）來布局的最大問題，就是它會在HTML元素間渲染空白；空白對于我來說95%的時間里它都是多余的；另外要說明一下，在行內塊中垂直居中內容也不容易
• 浮動：盡管浮動布局跨平臺一致性很好，但還是有兩個讓人難以釋懷的缺點；第一個，如果給浮動元素的寬度設定百分比，那么最終計算值在不同平臺上結果不一樣（有的瀏覽器向上取整，有的瀏覽器向下取整）；第二個，通常都要清楚浮動，才能避免父盒子/元素折疊
• 表格與表元：別把display：table和display：table-cell與對應的HTML元素搞混

3.2.Flexbox概述

• Flexbox三級跳：Flexbox的超能力，可以概括如下（方便地垂直居中內容；改變元素的視覺次序；在盒子里自動插入空白以及對齊元素，自動對齊元素間的空白；減少不少壓力）
• 瀏覽器對Flexbox的支持：IE9及以下版本不支持Flexbox

3.3.使用Flexbox

• Flex有4個關鍵特性：方向、對齊、次序和彈性
• Flexbox與有與inline-block和inline-table對應的inline-flex變體
• Flexbox的對齊：關于Flexbox的對齊，最重要的是理解坐標軸，有兩個軸，“主軸”和“交叉軸”；有時候，可能只需要把某一個元素按不同方式對齊，這個元素可以使用align-self屬性決定自己的對齊方式；space-between會在子元素之間添加相同寬度的空白，而space-around則在它們兩邊各添加相同寬度的空白
• flex：除了width，還可以通過flex屬性來定義寬度，或者叫“伸縮性（flexiness）”
• 簡單的粘附頁腳：原理是flex屬性會讓內容在空間允許的情況下伸展，頁面主體是伸縮容器，最小高度是100%，所以主內容會盡可能占據所有有效空間
• 改變原始次序：order屬性可以在Flexbox中簡單、明確地修改元素的次序，此處的-1表示要位于其他所有元素之前；flex-flow：row wrap，這個屬性可以讓伸縮項折行，但有些老瀏覽器對這個屬性的支持不好
• Flexbox小結：使用Flexbox可以實作無數種可能的布局，而且得益于其“伸縮性”，這種布局機制非常適合回應式設計

3.4.回應式圖片

• 回應式圖片的固有問題：只有瀏覽器在打開和渲染內容時才會知道使用它的設備的具體情況（螢屏大小、設備能力等）；只有開發者知道自己手里有幾種大小的圖片；Embedded Content規范描述了如何進行簡單的圖片解析度切換（讓擁有高解析度螢屏的用戶看到高解析度的圖片），以及支持“文藝范”，即可以根據視口空間大小顯示完全不同的圖片（類似媒體查詢）
• 通過srcset切換解析度：對于支持srcset屬性的瀏覽器，通過逗號分隔的圖片描述，讓瀏覽器自己決定選擇哪一個，圖片描述首先是圖片名，然后是一個解析度說明
• srcset及sizes聯合切換：sizes屬性僅僅是對瀏覽器給出提示，因此并不保證瀏覽器言聽計從；如果不想讓瀏覽器決定，可以使用picture元素，使用這個元素可以讓瀏覽器交付那你讓它交付的圖片
• picture元素：最后一種情況就是你希望為不同的視口提供不同的圖片

第四章 HTML5與回應式Web設計

4.1.HTML5與回應式Web設計

• 所有現代的瀏覽器都理解HTML5中新的語意元素（新的結構化元素、視頻和音頻標簽），甚至老版本的IE（IE9以下版本）都可以通過引入一小段“膩子腳本”正確渲染這些新元素
• 膩子腳本這個叫法的發明者是Remy Sharp，是想用膩子腳本可以填補墻上的坑洼不平來比喻老版本瀏覽器的功能缺失，因此，JavaScript中的膩子腳本可以讓老舊瀏覽器支持新特性

4.2.開始寫HTML5網頁

• doctype是我們告訴瀏覽器檔案型別的手段，如果沒有這一行，瀏覽器將不知道如何處理后面的內容
• HTML5的doctype短小易懂，只有
• doctype宣告之后是開發的html標簽，也是檔案的根標簽
• 根據W3C的規范，lang屬性指定元素內容以及包含文本的元素屬性使用的主語言
• HTML5不要求這么精確，沒有結束的反斜杠，屬性值也沒加引號，而且沒有type宣告，寬容的HTML5并不在乎這些，后一種寫法跟前一種寫法一樣，完全沒有問題
• 這種松散的語法并不局限于鏈接資源，而是可以在檔案任何地方出現
• 沒有結束標簽的反斜杠，沒有引號，大小寫混用，都沒問題

4.3.寬容的HTML5

• 個人喜歡使用XHTML風格的語法寫HTML5.換句話說，標簽必須關閉，屬性值必須加引號，而且大小寫也必須一致，認為清晰勝過簡潔
• 無論HTML5對語法要求多寬松，都有必要檢驗自己的標記是否有效，有效的標記更容易理解
• HTML5的一大好處就是可以把多個元素放到一個<a>標簽
• 唯一的限制是不能把另一個<a>標簽或button之類的互動性元素放到同一個<a>標簽里，另外也不能把表單放到<a>標簽里

4.4.HTML5的新語意元素

• 大多數網站的結構都很相似，包含頁頭、頁腳、側邊欄、導航條等等
• 單純從代碼來看，任何用戶代理（瀏覽器、螢屏閱讀器、搜索引擎爬蟲等等）都不能確定每個div元素中包含的是什么內容
• 很長時間以來，HTML5都沒有元素用于表示頁面的主內容區
• 現在我們可以使用main標簽來宣告主內容區
• 每個頁面的主內容區只能有一個（兩個主內容就沒有主內容了），而且不能作為article、aside、header、footer、nav等其他HTML5語意元素的后代
• section元素用于定義檔案或應用中一個通用的區塊，關鍵時是要知道這個元素不是為了應用樣式而存在的
• <nav>元素用于包裝指向其他頁面或同一頁面中不同部分的主導航鏈接
• <article>跟<section>元素一樣容易引起誤解，<article>用于包含一個獨立的內容塊
• 明顯可以放到article元素中的內容有博客正文和新聞報道，對于嵌套<article>而言，內部的<article>應該與外部<article>相關
• <aside>元素用于包含與其旁邊內容不相關的內容
• <figure>相關的規范原文：可用于包含注解、圖示、照片、代碼等等
• 用戶單擊一段摘要，就會打開相應的補充內容面板，HTML5為此提供了details和summary元素
• 實踐中，可以將<header>元素用在站點頁頭作為“報頭”，或者在<article>元素中用作某個區塊的引介區，可以在一個頁面中出現多次
• <footer>元素應該用于在相應區塊中包含與區塊相關的內容，可以包含指向其他檔案的鏈接，或者著作權宣告，同樣可以在頁面中出現多次
• <address>元素明顯用于標記聯系人資訊，為最接近的<article>或<body>所用
• 原來規范是不推薦使用h1到h6來標記標題和副標題的
• HTML5規范是這么說：h1到h6元素不能用于標記副標題、字幕、廣告語，除非想把它們用作新區塊或子區塊的標題

4.5.HTML5文本級元素

• HTML5還修訂了一些以前作為行內元素使用的標簽，修訂之后，HTML5規范稱它們為“文本級語意標簽”
• 過去，人們常用<b>元素來加粗文本，而現在，可以把它用作一個添加CSS樣式的標記，
• 正如HTML5規范所說：<b>元素表示只為引人注意而標記的文本，不傳達更多的重要性資訊，也不用于表達其他的愿望或情緒
• 現在的<b>元素并無特殊含義，是文本級的，那就不能用它來包圍一大段其他標記，那種應該用div
• 一般用<em>就只是為了給文本添加樣式，HTML5說：em元素表示內容中需要強調的部分
• 一段文本，用于表示另一種愿望或情緒，或者以突出不同文本形式的方式表達偏離正文的意思，總之，它不僅僅用于把文本標為斜體

4.6.作廢的HTML特性

• HTML5宣布作廢的特性可分兩類：兼容和不兼容，
• 兼容特性還可以用，但在驗證器中會收到警告，現實當中應該盡量不用它們，但用它們也不會出現什么問題
• 不兼容特性可能在某些瀏覽器中仍然可以正確渲染，但確實非常不鼓勵你用，如果你非要用，可能會有問題

4.8.WCAG和WAI-ARIA

• WCAG的宗旨是：提供一份能滿足個人、組織和政府間國際交流需求的Web內容無障礙的標準
• WCAG指南，提供了很多（大部分是常識性的）有關讓網頁無障礙訪問的建議，每個建議對應一個一致性級別：A、AA或AAA
• 強烈建議每一位讀者花一兩個小時看看這份清單
• WAI-ARIA的目標是總體上解決網頁動態內容的無障礙問題，他提供了用于描述自定義部件（Web應用中德動態部分）的角色、狀態和屬性方法，從而可以讓使用輔助閱讀設備的用戶識別并利用這些部件
• 可以使用的ARIA role屬性值：region（默認，不要設定）、alert、alertdialog、application、contentinfo、dialog、document、log、main、marquee、presentation、search或status
• 方便輔助技術的最簡單方式就是盡可能使用正確的元素
• ARIA并非只能用于標記“地標”

4.9.在HTML5中嵌入媒體

• 對很多人來說，是蘋果拒絕在iOS設備中支持Flash才讓HTML5進入它們的視野，Flash的市場份額曾經非常之高（有人甚至認為它阻礙了市場發展），主要用于在網頁中播放視頻
• 雖然HTML5在富媒體方面確實有長足進步，但蘋果的公開支持卻給了它很大的推動，使其媒體工具獲得了社區的廣泛關注
• IE8及更低版本的IE不支持HTML5視頻和音頻
• 在HTML5中添加視頻和音頻很簡單，唯一麻煩的是列出可替代的媒體資源（因為不同的瀏覽器支持的媒體格式不同）
• preload用于控制媒體的預加載，預加載對于快取視頻延遲很有用
• audio與video幾乎一樣，它們的主要區別，當然是音頻沒有視頻需要的播放區域

4.10.回應式HTML5視頻與內嵌框架

• 現在，HTML5視頻的唯一問題就是它不是相應式的

4.11.關于“離線優先”

• 創建回應式網頁及Web應用的理想方式是“離線優先（offline-first）”，就是始終要保證網站和應用始終可以打開，即使不上網也能加載到內容
• 可以使用離線Web應用和LocalStorage（或它們的組合）實作離線優先的體驗，現在有了一個不錯的方案，那就是Service Workers

第五章 CSS3新特性

5.3.便捷的CSS技巧

• 使用CSS多列布局可以通過幾種方式讓文本分成多列顯示
• 一行代碼就可以輕松實作回應式多列

5.4.斷字

• 所謂水平滾動面板，在水平空間允許的情況下，可以看到所有商品，而在空間受限時（比如手機上），面板就可以左右滾動
• 如果使用偽元素，記住為了保證::before和::after顯示，它們必須包含一個content值，就算空白也行
• 老版本安卓設備不支持水平滾動

5.5.在CSS中創建分支

• 特性查詢：CSS原生的分支語法就是特性查詢，屬于CSS Conditional Rules Module Level 3
• 組合條件：可惜的是，并非所有瀏覽器都支持@supports
• Modernizr：使用Modernizr這個JavaScript工具，目前，它是在CSS中實作分支的最可靠方式；所謂漸進增強，就是從最簡單的可用代碼開始，從最基本的功能開始，從支持能力最低的設備開始，逐步增強到支持能力更強的設備；Modernizr是一個放在網頁中用于檢測瀏覽器特性的JavaScript庫；當瀏覽器加載頁面后，就會運行Modernizr內置的所有測驗，如果瀏覽器通過測驗，Modernizr會在html標簽上添加一個類；Modernizr能測驗大多數特性，但不是全部特性

5.6.新CSS3選擇符

• data-*屬性是HTML5引入的一個用于保存資料的屬性
• 在HTML5之前，以數值開頭的ID和類是無效的，HTML5放開了這個限制，說到ID，不能忘了ID不能包含空格，而且必須在網頁中唯一

5.7.CSS3結構化偽類

• 理解nth，n作為數值運算式對于普通人特別是數學不好的人來說就沒那么好理解了
• nth-child選擇符選擇的是同級DOM中子元素，與類無關，而:nth-of-type和:nth-last-of-type就要區分型別了
• JavaScript和jQuery都是從0開始計數的，但CSS3則從1開始計數
• 使用:empty選擇符時要注意，空格跟空是兩碼事，還有，注釋不算內容，也算空的
• CSS3要求把偽元素與偽類區分開，但要注意，IE8及更低版本的IE不支持兩個冒號的語法
• ::first-line是指瀏覽器渲染結果的第一行，而不是標記中文本的第一行

5.8.CSS自定義屬性和變數

• CSS自定義屬性可以存盤資訊，這些資訊可以在樣式表的其他地方使用，也可以通過JavaScript操作
• :root偽類始終參考檔案結構中最外層的親元素
• 自定義屬性以兩個短劃線開頭，接著是自定義屬性的名字，然后，參考自定義屬性的時候可以用var()
• 一方面可以通過這種方式存盤任意多個自定義屬性，另一方面，不管什么時候修改一個自定義屬性的值，所有參考它的規則，無論有多少，都會自動更新，而無需分別去修改每一條規則

5.9.CSS calc

• 瀏覽器對calc()函式的支持也很好，除了Andriod 4.3及以下版本的Chrome

5.10.CSS Level4選擇符

• 相對視口的單位雖然有用，但有些瀏覽器的實作卻很奇怪

5.11.Web排版

• 多年來，Web字體的選擇一直被局限在幾款“安全”字體上
• CSS提供了@font-face規則，用于參考在線字體顯示文本
• 一般會把解壓得到的字體檔案放到與css檔案夾同級的fonts檔案夾中
• 有時需要關注一下自定義字體的大小

5.12.CSS3的新顏色格式及透明

• CSS3新增了兩種宣告顏色的格式：RGB和HSL，這兩種顏色模式還支持alpha通道
• 在定義了一種HSL顏色后，很容易派生出多個相近的顏色，只要修改飽和度和亮度的百分比就行了
• HSL或RGB與十六進制值得區別在于，它們支持透明通道，可以讓原來被元素擋住的東西透過來
• 元素設定opacity影響整個元素，而RGBA和HSLA則只影響元素特定的方面，比如背景

第六章 CSS3高級技術

• CSS3的高級屬性十分適合回應式設計，很多情況下，我們可以用它來替代圖片

6.1.CSS3的文字陰影特效：text-shadow: 1px 1px 1px #ccc;

• 縮寫值的規則是先右后下，第一個值是陰影的右側偏移量，第二個值是陰影的下方偏移量，第三個值是模糊距離（陰影從有到無的漸變距離），最后一個則是色值
• 在CSS中，對于以0開頭的數值，可以將0省去

6.2.盒陰影

• box-shadow，和文字陰影遵循相同的語法

6.3.背景漸變

• 在回應式設計中，你會發現按照比例設定漸變效果大小比按照固定像素設定更為有用

6.4.重復漸變

• 在linear-gradient或者radial-gradient前添加repeagting前綴

6.6.多張背景圖片

• 不支持多重背景的瀏覽器（如IE8及之前的版本）會忽略這條宣告
• 建議不要使用縮寫，并且先宣告多重背景圖片，然后宣告背景大小，最后宣告背景位置

6.9.CSS性能的警告

• 慎重使用濾鏡效果
• CSS3的背景漸變功能使我們減少了對背景圖片的依賴

第七章 SVG與回應式Web設計

• SVG是一種不會過時的、能夠輕松解決多螢屏解析度問題的技術

7.1.SVG的歷史

• SVG的第一個版本是在2001年推出的
• 1.1規范中對SVG的介紹：SVG是XML[XML1.0]中用于描述二維圖形的語言，SVG支持三種圖形物件：矢量圖形形狀（例如由直線和曲線組成的路徑）、影像和文本
• 矢量圖是使用相對點來保存資料的，所以可以縮放到任意大小而不會損失清晰度

7.2.用檔案表示的影像

• SVG是使用標記式語言進行描述的
• SVG使用XML（eXtensible Markup Language，可擴展標記語言）來描述，XML是一種和HTML十分相似的語言
• SVG的根元素：SVG的根元素有width、height和viewbox屬性；視框（viewbox）則定義了SVG中所有形狀都需要遵循的坐標系
• 命名空間：SVG會有一個由生成它的圖形編輯程式定義的命名空間；只是在生成SVG的程式中使用，為了減少SVG的大小，通常會把它們去掉
• 標題和描述標簽：title和desc標簽提高了SVG檔案的可讀性；可以用來在影像不可見的情況下描述影像的內容
• defs標簽：用于儲存所有可以復用的元素定義的地方，如梯度、符號、路徑等
• 元素g：能把其他元素捆綁在一起
• SVG形狀元素：擁有一系列可用的現成形狀（path、rect、circle、ellipse、line、polyline、polygon）
• SVG路徑：SVG路徑和其他形狀有所區別，因為他們是由任意數量的連接點組成的（允許你自由創造你想要的形狀）

7.3.使用流行的影像編輯工具和服務創建SVG

• 最好的選擇是Adobe公司的Illustrator（PC/Mac）
• 使用的是Mac的話，推薦Bohemian Coding的Sketch（只有Mac版）

7.4.在Web頁面中插入SVG

• 在SVG圖片上，可以做很多（基于瀏覽器的）你在普通格式圖片（JPEG、GIF、PNG）上做不到的事
• 使用img標簽：最直接的插入SVG影像的方式就是你將影像插入到HTML檔案中的方式
• 使用object標簽（object標簽式W3C推薦的用于裝載非HTML內容的容器；data和type屬性其實只有一個必須要的，data屬性是你鏈接SVG資源的方式，type屬性描述了內容的MIME型別；通過object標簽插入到頁面的SVG可以被JavaScript訪問，這是采用這種插入方式的一個重要理由，另一個好處是，object可以在瀏覽器不支持引入的資料型別的情況下做出簡單的反饋）
• 把SVG作為背景影像插入：SVG可以在CSS中用作一個背景影像，和其他圖片格式（PNG、JPG、GIF）一樣；在CSS中，瀏覽器總會忽略它所不能理解的那些屬性/值對；如果你對SVG的需求主要是靜態背景圖片或者是圖示之類，強烈建議通過背景影像的方式插入SVG檔案
• 關于data URI的簡短介紹：相對于CSS而言，這是用來引入外部資源的，如影像，也可以利用data URI引入圖片；data URI有不同的編碼方式，并且有大量可用的工具來為你的資源創建data URI
• 生成影像精靈：個人推薦的用于生成影像精靈或者data URI的工具是Iconizr

7.5.行內SVG

• 利用符號復用圖形物件：use元素可以復用所有的SVG內容：梯度、形狀、符號等
• 根據背景關系改變行內SVG顏色：通過對父元素的繼承創造雙色圖示，需要在SVG符號中，把你想設定為單一顏色的路徑的fill屬性設定為currentColor，然后使用CSS中的color屬性設定這個元素額顏色；唯一的壞處是，如果你想在頁面上使用這些圖示，就必須引入同一個SVG代碼
• 復用外部圖形物件資源：可以使用use元素鏈接到外部的SVG檔案，并且抓取你想要使用的部分；有個壞訊息，IE瀏覽器不支持對外符號資源的參考，對于IE9-IE11，我們有膩子腳本（polyfill）

7.6.不同插入方式下可以使用的功能

• 在最新版本的Firefox、 Chrome和Safari中都是一致的， 然而， IE有的時候會不一樣，

7.7.SVG的怪癖

• 無論用什么方式插入，SVG都會使用設備最高的解析度來渲染
• 可以在SVG內部放置它本身的樣式
• 無論是行內還是外部引入的CSS，你都可以做“正常”的CSS行為：改變元素的外觀、添加影片、變換元素等等
• 僅僅用CSS的animation就可以制作很多SVG影片，當你需要添加互動功能、支持IE瀏覽器或者同步一系列事件的時候，最好使用JavaScript實作影片效果

7.8.使用JavaScript添加SVG影片

• 推薦使用GreenSock影片平臺、Velocity.js或者Snap.svg

7.9.優化SVG

• 最簡單的方法是使用自動化工具來優化SVG檔案

7.10.把SVG作為濾鏡

• CSS的濾鏡效果，在IE10和IE11上尚未被支持，慶幸的是， 我們可以依靠SVG在IE10和IE11上創建濾鏡

第八章 CSS3過渡、變形和影片

寫在前面

• CSS3的三個主要代理--過渡（transition）、變形（transform）和影片（animation）
• 當你知道影片的起始狀態和終止狀態，并且需要一個簡單的變形方法時，使用CSS過渡
• 當你需要在視覺上改變某個元素但又不想影響頁面布局的時候，使用CSS變形
• 當你想在一個元素上執行一系列關鍵楨影片時，使用CSS影片

8.1.什么是CSS3過渡以及如何使用它

• CSS3的過渡，顧名思義，允許我們在不同的狀態之間切換
• 注意，在CSS中過渡屬性應用到元素的初始狀態而不是結束狀態上
• 過渡可以用四個屬性宣告：transition-property（要過渡的CSS屬性的名字如background-color）、transition-duration（定義過渡效果持續的時長）、transition-timing-function（定義過渡期間的速度變化）、transition-delay（用戶定義過渡開始前的延遲時間）
• 過渡的支持度非常高，但是和以往一樣，記得使用像Autoprefixer之類的工具來添加相應的瀏覽器私有前綴
• ease、linear、ease-in、ease-out、ease-in-out和cubic-bezier，其實他們就是預置好的貝塞爾曲線，本質上是緩動函式
• 感知速度對用戶來說非常重要，所以我們必須讓網站和應用盡可能快

8.2.CSS的2D變形

• 過渡是從一種狀態平滑轉換到另一種狀態，而變形則定義了元素將會變成什么樣子
• CSS3的2D變形模塊允許我們使用下列變形：scale用來縮放元素（放大和縮小）、translate在螢屏上移動元素（上下左右）、rotate按照一定角度旋轉元素（單位為度）、skew（沿X軸和Y軸對元素進行斜切）、matrix允許你以像素精度控制變形效果
• 要記住，變形時在檔案流外發生的，一個變形的元素不會影響它附近未變形的元素的位置
• 在CSS中，默認的變形原點（瀏覽器中作為變形中心的點）是在正中心：元素X軸的50%和Y軸的50%處，使用transform-origin我們可以修改變形原點

8.3.CSS3的3D變形

• 除了使用perspective外，我還發現了transform3d這個有用的屬性，在這個簡單的屬性里，你可以在X軸（左/右）、 Y軸（上/下）、 Z軸（前/后）上移動元素，
• translate3d中逗號分隔的三個引數分別是X軸上的偏移、 Y軸上的偏移、 Z軸上的偏移
• transform3d的最大用處在于將面板移入移出螢屏，一個基本的、漸進增強的離屏導航模式

8.4.CSS3影片效果

• 相較于3D變形，CSS3影片的支持度更高
• CSS3影片由兩部分組成：首先是關鍵楨宣告，然后是在影片屬性中使用該關鍵楨宣告
• 基本任何影片都可以用關鍵楨實作，因此這個可能性是無限的
• 采用CSS3新特性和技巧的最終目的，是想使用CSS來替代JavaScript制作一些優雅精美的增強效果，讓回應式設計更加簡潔和豐富

第九章 表單

9.2.理解HTML5表單中的元素：

• placeholder、required、autofocus、autocomplete等

9.3.HTML5的新輸入型別：

• email、number、url、tel、search、pattern、color等；
• HTML5新增了很多輸入型別，其中一個作用就是可以在不引入JavaScript代碼的情況下限制用戶輸入的資料，在那些不支持新特性的瀏覽器中，它們會默認降級顯示為一個標準的文本輸入框

9.4.如何給不支持新特性的瀏覽器打補丁

• HTML5表單實際使用還有兩個非常麻煩的問題：一是支持表單新特性的瀏覽器在具體實作上有所不同；二是對完全不支持新特性的瀏覽器如何處理

第十章 實作回應式Web設計

• 擁抱漸進增強：逐步增強的基本想法是，從選擇支持的瀏覽器中選取它們共有的子集方法來開始撰寫你的前端代碼（HTML、CSS、JavaScript），然后，逐步優化你的代碼以適應那些比較強大的瀏覽器和設備
• 確定需要支持的瀏覽器：傾向于在支持的各個瀏覽器上功能一致而非外觀一致
• 分層的用戶體驗：基本體驗是站點的最小可行版本，而增強體驗則是包括所有功能并且最為美觀的版本

寫在后面

• pdf書籍、筆記思維導圖、隨書代碼打包下載地址：https://pan.baidu.com/s/1rZGRe0gzyEKiV9y5qmsgbg(提取碼：fo49)
• 紙質書京東購買地址：https://u.jd.com/0T3tQp（推薦購買紙質書來學習）

標籤：Html/Css

上一篇：CSS的 行內元素 和 塊類元素

下一篇：餐飲類網站滑動導航