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

時間 2020-05-07

標籤書籍精讀響應 web 設計 html5 html css3 css 實戰第二筆記分享欄目 HTML 简体版

原文原文鏈接

寫在前面

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

第一章響應式Web設計基礎

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

1.2.什麼是響應式Web設計

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

1.3.瀏覽器支持

在寫做這一版的2015年年中，IE六、IE七、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>
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）。而後，逐步優化你的代碼以適應那些比較強大的瀏覽器和設備
肯定須要支持的瀏覽器：傾向於在支持的各個瀏覽器上功能一致而非外觀一致
分層的用戶體驗：基本體驗是站點的最小可行版本，而加強體驗則是包括全部功能而且最爲美觀的版本