[书籍精读]《响应式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）。然后，逐步优化你的代码以适应那些比较强大的浏览器和设备
  • 确定需要支持的浏览器：倾向于在支持的各个浏览器上功能一致而非外观一致
  • 分层的用户体验：基本体验是站点的最小可行版本，而增强体验则是包括所有功能并且最为美观的版本

写在后面

posted @ 2020-05-07 00:20  小磊哥er  阅读(745)  评论(0)  编辑  收藏  举报