第七章、设备
7.1 媒体类型
三种方法指定媒体：
1. <link rel="stylesheet" href="style.css" media="screen" />
2. @import url(style.css) screen
3. @media screen{body{font-family: arial}}
媒体分组：
1.分页媒体——媒体由页面组成，例如打印文档，而非屏幕上的Web页面那样是长长的一篇文档
2.栅格媒体——重点考虑固定宽度字符，例如盲文媒体需要让文字具有可遇见的一致宽度，以便用户能够理解
7.1.1 all
应用于以下全部媒体类型
7.1.2 braille
布莱叶盲文，是一种通过触觉表达字符的方法
7.1.3 embossed
浮雕媒体类型与盲文类型类似，但用于盲文打印机的输出
7.1.4 handheld
手持类型用于指定移动电话等手持设备
7.1.5 print
打印媒体类型指定印刷媒体输出
7.1.6 projection
演示媒体类型用于放映设备的输出，通常指投影仪
7.1.7 screen
屏幕媒体类型主要用于电脑屏幕
7.1.8 speech
语音媒体类型用于会以声音读出页面内容的任何设备，例如屏幕阅读器或其他辅助设备
7.1.9 tty
电传打字机媒体类型
7.1.10 tv
电视媒体类型
7.2 媒体查询
媒体查询由两部分组成：一个媒体类型，加上零个或多个用来检查媒体特性的查询
<link rel="stylesheet" href="style.css" media="screen and (min-width:800px) and (max-width:1500px)" />
viewport视口元数据标签
device-width：设备的实际像素宽度(横向放置时)
device-height：设备的实际像素高度(横向放置时)
width：视口横向放置时的初始像素宽度
height：视口横向放置时的初始像素高度
initial-scale：缩放指在计算视口尺寸时要乘以的倍数
minimum-scale：用户可以缩放的最小值
maxmum-scale：用户可以缩放的最大值
user-scalable：是否允许用户进行缩放
7.2.1 width
媒体特性应用于视口(连续媒体)或页框(分页媒体)的宽度
7.2.2 height
视口的高度
7.2.3 device-width
设备的整个渲染表面(可显示内容区域)的宽度
7.2.4 device-height
对应的高度
7.2.5 orientation
两个可选值：landscape(横放)和portrait(竖放)
7.2.6 aspect-ratio
视口宽度和高度的比值
7.2.7 device-aspect-ratio
整个显示区域宽度和高度的比值
7.2.8 color
每种色彩成分所用的字位数量
7.2.9 color-index(颜色索引)
查询设备可以同时显示的颜色数量
7.2.10 monochrome(单色)
设备支持的单色显示颜色字位数
7.2.11 resolution(分辨率)
以每英寸点数(DPI)或每厘米点数(DPCM)描述设备的像素密度
7.2.12 scan(扫描)
电视机专属的
7.2.13 grid(栅格)
设备是基于栅格还是位图
7.2.14 transform-2d
在二维尺度上是否可以使用CSS变换
7.2.15 transform-3d
在三维尺度上是否可以使用CSS变换
7.2.16 transition(过渡)
是否可以使用CSS过渡效果，可以就设置为1，不行就设置为0
7.2.17 animation
是否可以使用CSS动画效果
7.3 Modernizr
7.4 打印样式表
如果你的HTML和CSS经过了良好的设计，打印样式表通常可以非常简洁，而且可以很好地在整个网站通用
注意点：
1.用户需要的是内容，而不是导航或其他元素，静态媒体上是用不到的，广告也一样
2.考虑是需要扩展屏幕样式表(通过为样式表使用all媒体类型)来保持原有的品牌设计还是完全替换他(使用screen作为媒体类型)
3.衬线字体在印刷上更易读，无衬线字体在屏幕上更易读
4.避免在打印样式中改变字体的大小
5.让所有容器宽度都撑满页面且去掉外边距。移除留下的空白
6.不要用浮动容器
7.在打印的时候通常或默认禁止背景图像或背景颜色，所以要确保你指定了暗色作为字体颜色，白色背景更易读
8.设置背景为白
9.对于要隐藏的元素，去掉他们的背景
10.为链接增加下划线
11.使用适合打印媒体的单位，例如pt、in或cm
7.5 移动设备
要为移动设备提供网站，需要注意事项：
1.等待时间
2.小屏幕尺寸
3.像素密度——某些移动设备拥有足够高的像素密度
4.方向——很多移动设置支持横向和竖向持握方式之间的切换
5.较慢的处理器
6.电池寿命
7.成本
8.特性——某些特性(例如:focus、:hover和position:fixed)在这些设备上可能无效
7.5.1 另一个网站
提供独立一个网站，应做到以下几点
1.提供一个转到移动网站的链接
2.提供一个转到常规网站的链接
3.尽量多的使用CSS图像合(Sprites)并技术
4.考虑用文字链接代替图像
5.考虑使用单列布局
6.以纵向滚动为目标而不是横向滚动
7.增加font-size值
8.避免任何依赖鼠标的互动，如:hover
9.避免任何依赖键盘的互动，如:focus
10.在触屏设置上用:active来区分状态，在按钮设备上用:focus来区分状态
11.避免浮动元素
12.使用百分比和流体布局而不是固定像素尺寸
13.使用HTML5的input type，例如tel和email来提示设备如何帮助用户更方便的输入信息
14.避免CPU密集型操作，例如转移负载到GPU、变换、过渡和动画
7.5.2 使用媒体查询指定移动设备
这种方法会带来不可忽视的性能影响。用户会被强制下载所有的样式表
7.5.3 做一个应用程序代替
7.6 其他设备
内建浏览器的机顶盒、游戏主机、智能电视的内置浏览器、Google TV等
7.7 搜索引擎优化
白帽：善意而利用他的。编写良好的内容，并且加上合理的链接
灰帽：试图欺骗系统，但也只是在没有其他好方法可用时用来实现善意目的。一个例子就是通过text-indent:-9999px;对浏览器隐藏、但对屏幕阅读器显示某些文字
黑帽：纯粹想要欺骗系统
三种方法指定媒体：
1. <link rel="stylesheet" href="style.css" media="screen" />
2. @import url(style.css) screen
3. @media screen{body{font-family: arial}}
媒体分组：
1.分页媒体——媒体由页面组成，例如打印文档，而非屏幕上的Web页面那样是长长的一篇文档
2.栅格媒体——重点考虑固定宽度字符，例如盲文媒体需要让文字具有可遇见的一致宽度，以便用户能够理解
7.1.1 all
应用于以下全部媒体类型
7.1.2 braille
布莱叶盲文，是一种通过触觉表达字符的方法
7.1.3 embossed
浮雕媒体类型与盲文类型类似，但用于盲文打印机的输出
7.1.4 handheld
手持类型用于指定移动电话等手持设备
7.1.5 print
打印媒体类型指定印刷媒体输出
7.1.6 projection
演示媒体类型用于放映设备的输出，通常指投影仪
7.1.7 screen
屏幕媒体类型主要用于电脑屏幕
7.1.8 speech
语音媒体类型用于会以声音读出页面内容的任何设备，例如屏幕阅读器或其他辅助设备
7.1.9 tty
电传打字机媒体类型
7.1.10 tv
电视媒体类型
7.2 媒体查询
媒体查询由两部分组成：一个媒体类型，加上零个或多个用来检查媒体特性的查询
<link rel="stylesheet" href="style.css" media="screen and (min-width:800px) and (max-width:1500px)" />
viewport视口元数据标签
device-width：设备的实际像素宽度(横向放置时)
device-height：设备的实际像素高度(横向放置时)
width：视口横向放置时的初始像素宽度
height：视口横向放置时的初始像素高度
initial-scale：缩放指在计算视口尺寸时要乘以的倍数
minimum-scale：用户可以缩放的最小值
maxmum-scale：用户可以缩放的最大值
user-scalable：是否允许用户进行缩放
7.2.1 width
媒体特性应用于视口(连续媒体)或页框(分页媒体)的宽度
7.2.2 height
视口的高度
7.2.3 device-width
设备的整个渲染表面(可显示内容区域)的宽度
7.2.4 device-height
对应的高度
7.2.5 orientation
两个可选值：landscape(横放)和portrait(竖放)
7.2.6 aspect-ratio
视口宽度和高度的比值
7.2.7 device-aspect-ratio
整个显示区域宽度和高度的比值
7.2.8 color
每种色彩成分所用的字位数量
7.2.9 color-index(颜色索引)
查询设备可以同时显示的颜色数量
7.2.10 monochrome(单色)
设备支持的单色显示颜色字位数
7.2.11 resolution(分辨率)
以每英寸点数(DPI)或每厘米点数(DPCM)描述设备的像素密度
7.2.12 scan(扫描)
电视机专属的
7.2.13 grid(栅格)
设备是基于栅格还是位图
7.2.14 transform-2d
在二维尺度上是否可以使用CSS变换
7.2.15 transform-3d
在三维尺度上是否可以使用CSS变换
7.2.16 transition(过渡)
是否可以使用CSS过渡效果，可以就设置为1，不行就设置为0
7.2.17 animation
是否可以使用CSS动画效果
7.3 Modernizr
7.4 打印样式表
如果你的HTML和CSS经过了良好的设计，打印样式表通常可以非常简洁，而且可以很好地在整个网站通用
注意点：
1.用户需要的是内容，而不是导航或其他元素，静态媒体上是用不到的，广告也一样
2.考虑是需要扩展屏幕样式表(通过为样式表使用all媒体类型)来保持原有的品牌设计还是完全替换他(使用screen作为媒体类型)
3.衬线字体在印刷上更易读，无衬线字体在屏幕上更易读
4.避免在打印样式中改变字体的大小
5.让所有容器宽度都撑满页面且去掉外边距。移除留下的空白
6.不要用浮动容器
7.在打印的时候通常或默认禁止背景图像或背景颜色，所以要确保你指定了暗色作为字体颜色，白色背景更易读
8.设置背景为白
9.对于要隐藏的元素，去掉他们的背景
10.为链接增加下划线
11.使用适合打印媒体的单位，例如pt、in或cm
7.5 移动设备
要为移动设备提供网站，需要注意事项：
1.等待时间
2.小屏幕尺寸
3.像素密度——某些移动设备拥有足够高的像素密度
4.方向——很多移动设置支持横向和竖向持握方式之间的切换
5.较慢的处理器
6.电池寿命
7.成本
8.特性——某些特性(例如:focus、:hover和position:fixed)在这些设备上可能无效
7.5.1 另一个网站
提供独立一个网站，应做到以下几点
1.提供一个转到移动网站的链接
2.提供一个转到常规网站的链接
3.尽量多的使用CSS图像合(Sprites)并技术
4.考虑用文字链接代替图像
5.考虑使用单列布局
6.以纵向滚动为目标而不是横向滚动
7.增加font-size值
8.避免任何依赖鼠标的互动，如:hover
9.避免任何依赖键盘的互动，如:focus
10.在触屏设置上用:active来区分状态，在按钮设备上用:focus来区分状态
11.避免浮动元素
12.使用百分比和流体布局而不是固定像素尺寸
13.使用HTML5的input type，例如tel和email来提示设备如何帮助用户更方便的输入信息
14.避免CPU密集型操作，例如转移负载到GPU、变换、过渡和动画
7.5.2 使用媒体查询指定移动设备
这种方法会带来不可忽视的性能影响。用户会被强制下载所有的样式表
7.5.3 做一个应用程序代替
7.6 其他设备
内建浏览器的机顶盒、游戏主机、智能电视的内置浏览器、Google TV等
7.7 搜索引擎优化
白帽：善意而利用他的。编写良好的内容，并且加上合理的链接
灰帽：试图欺骗系统，但也只是在没有其他好方法可用时用来实现善意目的。一个例子就是通过text-indent:-9999px;对浏览器隐藏、但对屏幕阅读器显示某些文字
黑帽：纯粹想要欺骗系统
第八章、性能
8.1 净荷：注意文件大小
我们既要考虑代码的字符数量，又要考虑他们所带来的影响
互联网通过TCP/IP网络协议来传输数据，信息会被划分为若干个包。最大传输单元在以太网中其大小通常是1500字节。如果包大小超过这个限制就会对性能产生影响。为了避开包大小限制，提供尽可能小的数据量。
如果CSS文件大小超过288KB，IE7及更低版本仅会解析文件的前288KB代码
8.1.1 命名规范
使用驼峰命名可以让代码易读，同时避免引入额外的分隔符
8.1.2 文件命名
应一贯使用小写字母来命名文件，避免将点号放在文件名的开头，文件名中只使用拉丁字母、数字、连字符和点号
8.1.3 文件夹结构
将所有引用文件与CSS放置在同一目录下
css
img
font
asset
其中asset用来放置那些无法合理分配到其他类别中的引用文件，例如flash文件等
8.1.4 语法
1.空白符
选择器和左大括号之间的空格是不必要的
紧跟属性名的冒号与属性值之间的空格是不必要的
使用逗号分割的属性值之间的空格是不必要的
右大括号后面的回车是不必要的
!important前的空格是不必要的
2.结尾分号
最后一个属性之后的结尾分号是不需要的
3.背景颜色
background:blue;
4.零和属性值单位
没必要使用单位
5.取消比那可
border:0;
6.零和小数点
font-size:.12em
7.margin/padding缩写
8.颜色
三位体的每一部分由两个相同的字符组成，则可以将其缩写为一个
9.压缩图片尺寸
GIF：适合制作按钮图片，边框硬朗的图片以及非常注重颜色精确度的图片。GIF是一种无损压缩格式。如果不需要透明效果可以关闭透明度支持
JPEG：有损压缩，适合存储照片或颜色丰富的复杂图像，不支持透明
PNG：无损格式，适合替代GIF
8.1.5 精简
YUI Compressor是一个基于Java开发的用于精简JS和CSS文件的工具
8.1.6 压缩
HTTP1.1在其规范中支持三种压缩方式：gzip、deflate和compress
8.1.7 Apache
Apache用于文件压缩的模块是mod_deflate
8.1.8 Microsoft IIS
8.1.9 内容分发网络和域名
1.浏览器对其同一时间能保持的网络连接数做了一定的限制(通常是35个左右)
2.Browserscope(www.browserscope.org)用来比较浏览器网络连接数等各种特性
3.服务器请求动态内容的时候，对图片或CSS文件等静态文件的请求中也会包含cookie。每一个单独cookie最大长度限制是4KB每一个域名最多可存放20个cookie
解决方法：
1)针对静态内容的请求不会再附带cookie
2)网站的连接数限制不再是针对一个域名，而是两个域名
8.1.10 减少HTTP请求数远比文件大小重要
8.1.11 域名查询
DNS是一种将域名和IP地址相互映射的名册。此时浏览器会首先尝试找到css.domian.ocm这个域名指向哪台服务器，查询是有缓存的
8.1.12 连接
在建立连接的过程中，数据包需要经过放置在用户计算机和服务器之间的若干个路由器
8.1.13 发送
在建立好连接之后，用户所使用的浏览器会向服务器发送数据
8.1.14 等待
服务器接收到用户的请求后开始对其进行处理
8.1.15 接收
服务器返回了数据，浏览器进行接收
8.1.16 CSS文件合并
8.1.17 CSS图片合并
三种缺点：
1.对于那些大小不确定的图片，该技术不适用
2.一个集合了超多图片的大文件，对于设计师和CSS开发者来说很难管理
3.合并图片中的位置一改变，将会出现连锁影响
8.2 data URI
将图片编码为一长串字符数据。有很多缺点：
1.无法在更细的粒度上控制图片缓存
2.编码后的图片实际上比常规图片还要大三分之一
3.IE7及更低版本不支持data URI
4.IE8限制data URI数据量最多为32KB
8.3 缓存
1.浏览器缓存——存储在客户端
2.代理缓存——由介于客户端与服务器之间的互联网服务提供商(ISP)或第三方提供的缓存
3.网关缓存——由植入缓存服务器或CDN等Web服务器所有者部署的缓存
缓存机制主要有两种验证器：
1.使用文件的最后更改时间作为验证标识，这个值叫做Last-Modified，以日期格式存储在响应头部返回
2.在HTTP1.1中引入的，ETag。一种文件唯一标识符。不仅针对文件唯一，针对不同服务器也保持唯一性。所以网关缓存或者负载均衡服务器可能会导致头部信息无法预料
8.4 应缓存哪些内容
CSS文件一般都是静态的，所以很适于缓存
8.5 版本
1.文件名中引入版本号或日期以达到版本控制的目的
2.在URL地址中加入查询字符串绕开缓存
8.6 离线存储
通过使用html标签中的manifest属性
8.7 渲染和解析
1.浏览器首先读取HTML文档，然后按照从上往下的顺序依次请求HTML中引用的文件
2.一旦发现@import规则，就会立即导入其引用的文件
3.JS文件采用的是串行读取方式，因此直到执行完毕之前，他们会阻塞页面剩余部分的下载
4.当解析CSS代码时，他会安装从右往左的顺序读取选择器，如果我们在其后面追加一个特殊性略低的选择器，比如标签名称，那首先读取的还是标签名称
5.最低效的选择器就是通用选择器(*)
8.8 使用JS修改属性
$('#id').css('heihgt','100px');
$('#id').css('width','100px');
使用直接修改style的方法会致使浏览器重绘页面两次
$('#id').addClass('modified');
给元素追加class就可以修改CSS，只有一次重绘
我们既要考虑代码的字符数量，又要考虑他们所带来的影响
互联网通过TCP/IP网络协议来传输数据，信息会被划分为若干个包。最大传输单元在以太网中其大小通常是1500字节。如果包大小超过这个限制就会对性能产生影响。为了避开包大小限制，提供尽可能小的数据量。
如果CSS文件大小超过288KB，IE7及更低版本仅会解析文件的前288KB代码
8.1.1 命名规范
使用驼峰命名可以让代码易读，同时避免引入额外的分隔符
8.1.2 文件命名
应一贯使用小写字母来命名文件，避免将点号放在文件名的开头，文件名中只使用拉丁字母、数字、连字符和点号
8.1.3 文件夹结构
将所有引用文件与CSS放置在同一目录下
css
img
font
asset
其中asset用来放置那些无法合理分配到其他类别中的引用文件，例如flash文件等
8.1.4 语法
1.空白符
选择器和左大括号之间的空格是不必要的
紧跟属性名的冒号与属性值之间的空格是不必要的
使用逗号分割的属性值之间的空格是不必要的
右大括号后面的回车是不必要的
!important前的空格是不必要的
2.结尾分号
最后一个属性之后的结尾分号是不需要的
3.背景颜色
background:blue;
4.零和属性值单位
没必要使用单位
5.取消比那可
border:0;
6.零和小数点
font-size:.12em
7.margin/padding缩写
8.颜色
三位体的每一部分由两个相同的字符组成，则可以将其缩写为一个
9.压缩图片尺寸
GIF：适合制作按钮图片，边框硬朗的图片以及非常注重颜色精确度的图片。GIF是一种无损压缩格式。如果不需要透明效果可以关闭透明度支持
JPEG：有损压缩，适合存储照片或颜色丰富的复杂图像，不支持透明
PNG：无损格式，适合替代GIF
8.1.5 精简
YUI Compressor是一个基于Java开发的用于精简JS和CSS文件的工具
8.1.6 压缩
HTTP1.1在其规范中支持三种压缩方式：gzip、deflate和compress
8.1.7 Apache
Apache用于文件压缩的模块是mod_deflate
8.1.8 Microsoft IIS
8.1.9 内容分发网络和域名
1.浏览器对其同一时间能保持的网络连接数做了一定的限制(通常是35个左右)
2.Browserscope(www.browserscope.org)用来比较浏览器网络连接数等各种特性
3.服务器请求动态内容的时候，对图片或CSS文件等静态文件的请求中也会包含cookie。每一个单独cookie最大长度限制是4KB每一个域名最多可存放20个cookie
解决方法：
1)针对静态内容的请求不会再附带cookie
2)网站的连接数限制不再是针对一个域名，而是两个域名
8.1.10 减少HTTP请求数远比文件大小重要
8.1.11 域名查询
DNS是一种将域名和IP地址相互映射的名册。此时浏览器会首先尝试找到css.domian.ocm这个域名指向哪台服务器，查询是有缓存的
8.1.12 连接
在建立连接的过程中，数据包需要经过放置在用户计算机和服务器之间的若干个路由器
8.1.13 发送
在建立好连接之后，用户所使用的浏览器会向服务器发送数据
8.1.14 等待
服务器接收到用户的请求后开始对其进行处理
8.1.15 接收
服务器返回了数据，浏览器进行接收
8.1.16 CSS文件合并
8.1.17 CSS图片合并
三种缺点：
1.对于那些大小不确定的图片，该技术不适用
2.一个集合了超多图片的大文件，对于设计师和CSS开发者来说很难管理
3.合并图片中的位置一改变，将会出现连锁影响
8.2 data URI
将图片编码为一长串字符数据。有很多缺点：
1.无法在更细的粒度上控制图片缓存
2.编码后的图片实际上比常规图片还要大三分之一
3.IE7及更低版本不支持data URI
4.IE8限制data URI数据量最多为32KB
8.3 缓存
1.浏览器缓存——存储在客户端
2.代理缓存——由介于客户端与服务器之间的互联网服务提供商(ISP)或第三方提供的缓存
3.网关缓存——由植入缓存服务器或CDN等Web服务器所有者部署的缓存
缓存机制主要有两种验证器：
1.使用文件的最后更改时间作为验证标识，这个值叫做Last-Modified，以日期格式存储在响应头部返回
2.在HTTP1.1中引入的，ETag。一种文件唯一标识符。不仅针对文件唯一，针对不同服务器也保持唯一性。所以网关缓存或者负载均衡服务器可能会导致头部信息无法预料
8.4 应缓存哪些内容
CSS文件一般都是静态的，所以很适于缓存
8.5 版本
1.文件名中引入版本号或日期以达到版本控制的目的
2.在URL地址中加入查询字符串绕开缓存
8.6 离线存储
通过使用html标签中的manifest属性
8.7 渲染和解析
1.浏览器首先读取HTML文档，然后按照从上往下的顺序依次请求HTML中引用的文件
2.一旦发现@import规则，就会立即导入其引用的文件
3.JS文件采用的是串行读取方式，因此直到执行完毕之前，他们会阻塞页面剩余部分的下载
4.当解析CSS代码时，他会安装从右往左的顺序读取选择器，如果我们在其后面追加一个特殊性略低的选择器，比如标签名称，那首先读取的还是标签名称
5.最低效的选择器就是通用选择器(*)
8.8 使用JS修改属性
$('#id').css('heihgt','100px');
$('#id').css('width','100px');
使用直接修改style的方法会致使浏览器重绘页面两次
$('#id').addClass('modified');
给元素追加class就可以修改CSS，只有一次重绘
posted on
浙公网安备 33010602011771号