[书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享

写在前面

• 书籍介绍：本书主要讲解了如何运用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标签，也是文档的根标签
• 根据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（推荐购买纸质书来学习）