响应式Web设计:HTML5和CSS3实战(第2版)
第六章 CSS3 高级技术
6.1 CSS3 文字阴影特效
- 基本语法：
.element{
text-shadow: 1px 1px 1px #ccc;
}
- 缩写值的规则是“右偏移量，下偏移量，模糊距离（阴影从有到无的渐变距离），色值”
- 想把阴影向左上方偏移，可以使用负值
.element{
text-shadow: -2px -3px 0px #ccc;
}
/* 去除阴影效果，可以用text-shadow: none; */
6.1.1 省略blur值
- 如果不设置模糊距离，浏览器会自动取前两个值作为偏移量
.element{
text-shadow: 1px 1px #ccc;
}
6.1.2 多文字阴影
- 可以添加多个阴影效果，以逗号分隔，而且css可以忽略空白，可以如下书写增加可读性
.element{
text-shadow:
2px 3px #ccc, /* right and down */
-3px -3px #999; /* left and up */
}
6.2 盒阴影
- 默认的box-shadow是设置在元素外部的
- 可以设置inset来容许元素内部使用box-shadow
6.2.1 内阴影
- inset关键字
.element {
box-shadow: inset 0 0 30px #999;
}
6.2.2 多重阴影
- 也是用逗号分隔
- 会按照从底部到顶部（从最后一个到第一个）的顺序被添加
- 即，代码中越接近顶层的效果在浏览器中展示的时候也越接近“顶层”
.element{
box-shadow:
inset 0 0 30px #ccc, /* up */
inset 0 0 30px #999; /* down */
}
6.2.3 阴影尺寸（偏移）
- 可以让你在各个方向上缩小阴影效果
- 原理是：模糊距离被负的阴影尺寸抵消了
6.3 背景渐变
6.3.1 线性渐变语法
- 默认从顶部开始
- 最简单的是：
.element{
background: linear-gradient(red, blue);
}
- 确认渐变方向
- 渐变将从你设定的反方向开始，当没有设置方向时，渐变默认从顶部到底部
- 下边代码的渐变方向设定为顶部右侧，即底部左侧开始，红色变为蓝色
.element{
background: linear-gradient(to top right, red, blue);
/*或者数学比较好，用角度*/
background: linear-gradient(45deg, red, blue);
}
- 如果容器不是正方形，是一个矩形，那么45deg指的是右上角的顶点，而不是真真切切的45度
- 也可以让渐变从不可见区域开始
.element{
background: linear-gradient(red -50%, blue);
}
- 色标
- 使用色标定义复杂的渐变效果
- 建议不要混用单位
- 可以在一个渐变效果中添加多个色标
- 色标用逗号进行分隔
- 第一部分是颜色
- 第二部分是颜色的位置
- 色标用逗号进行分隔
.element{
background: linear-gradient(#f90 0, #f90 2%, #555 2%, #eee 50%, #555 98%, #f90 100%);
}
- 兼容旧浏览器
- 兼容不支持背景渐变效果的浏览器，只需要在之前定义一个背景颜色就可以
- 目的是老旧浏览器至少会渲染一个背景
.thing{
background: red;
background: linear-gradient(45deg, red, blue);
}
6.3.2 径向渐变背景
- 效果一般是从一个中心发散成为圆形或者椭圆的渐变效果
.thing{
background: radial-gradient(12em circle at bottom, red, orange, yellow);
}
6.3.3 为响应式而生的关键字
- 按照比例设置渐变效果大小比按照固定像素设置更有用
- 线上渐变效果生成器：http://www.colorzilla.com/gradient-editor/
6.4 重复渐变
- background: repeating-radial-gradient(black, 0px, orange 5px, red 10px);
- 标记色标之间的距离可以用像素值，也可以用百分比
- 为了展示最佳效果，建议用同一种计量单位
6.5 渐变背景制作图案的使用场景
- 渐变图案在小视口中比较好看
- 视口较大时，纯色背景更好一些
6.6 多张背景图片
- CSS3中可以在一个元素上堆叠多个背景图片
- css中先出现的图片会被安置在越靠近用户的位置
.element{
/*img01离用户最近*/
background:
url('../img01.jpg'),
url('../img02.jpg'),
url('../img03.jpg') left bottom, black;
}
6.6.1 背景大小
- 使用 background-size 为每个图片设置大小
- 可以使用百分比，像素或者以下关键词
- auto 让图片保持原有大小
- cover 保持图片比例，拓展至覆盖整个元素
- contain 保持图片比例，拓展图片让其最长边保持在元素内部
6.6.2 背景位置
- background-position: top 50px right 100px, 40px 40px, top center;
- 上面代码表示为三张图片各自设置位置
- 背景位置默认在左上角
6.6.3 背景属性的缩写
- 首先不建议使用缩写
- 建议顺序
- 多重背景图片
- 声明背景大小
- 然后声明背景位置
- 最后声明背景重复与否
6.7 高分辨率背景图
- 不同视口下加载不同分辨率的图像
.bg{
background-image: url('bg.jpg');
}
@media (min-resolution: 1.5dppx) {
.bg {
background-image: url('bg@1_5x.jpg');
}
}
6.8 CSS滤镜
- 可以用滤镜中的drop-shadow创建三角形阴影
- drop-shadow语法和box-shadow相似
.filter{
filter: drop-shadow(8px 8px 6px #333);
}
- 常见filter
- blur(3px) 模糊
- grayscale(.8) 灰度
- invert(.9) 反转
- opacity(.2) 透明度
- 滤镜属于渲染前必须进行的计算工作，所以对性能影响很大
- 因此慎重使用滤镜效果
- 选择器对性能的影响可以忽略不计
第八章 CSS3过渡、变形和动画
- 过渡——transition
- 变形——transform
- 动画——animation
8.1什么是CSS3过渡以及如何使用它
- 当元素的CSS状态改变时，过渡是最简单的创造视觉效果的方式。
- 如：我们在给超链接设置样式的时候，一般都会设置一个悬停状态的效果
- transition: box-shadow 1s;
- 在box-shadow上，将会耗时1秒，从现存状态切换到悬停状态。
8.1.1 过渡的简写语法
- 倾向使用缩写版，
- 这样我只要定义过渡的时长和需要过渡的属性即可。
- transition: all 1s ease 0s;
- 第一个和时间相关的值会被应用给transition-duration
- 第二个则会被应用到transition-delay上
8.1.2 在不同时间段内过渡不同属性
- 多个属性过渡时，这些属性不必步调一致
.style {
/* ...（其他样式）... */
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
}
8.1.3 过渡调速函数
- 贝塞尔曲线，本质上是缓动函数
- ease（默认）、linear、ease-in、ease-out、ease-in-out和cubic-bezier
8.2 CSS的2D变形
- 过渡是从一种状态平滑转换到另一种状态
- 变形则定义了元素将会变成什么样子
- 想象一下《变形金刚》里的擎天柱，他通过变形来变成一部卡车。而在机器人与卡车之间的阶段，我们称之为过渡（从一个状态过渡到另一个状态）。
- 变形是在文档流外发生的
- 一个变形的元素不会影响它附近未变形的元素的位置。
8.2.1 scale
- 因为变形在文档流之外，所以如下设置的样式变形，并不会导致同类位置的变动
.scale:hover {
transform: scale(1.4);
}
8.2.2 translate
- translate会告知浏览器按照一定的度量值移动元素，可以使用像素或者百分比
- 第一个值是X轴上偏移的距离
- 第二个是Y轴上偏移的距离
- 正值会让元素向右或者向下移动，负值则会让元素向左或者向上移动。
.translate:hover {
transform: translate(-20px, -20px);
}
+ 如果你只传入一个值，它会被应用到X轴上。
+ 如果你想指定一个轴进行移动，可以使用translateX或者translateY。
- 解决绝对居中
.inner {
position: absolute;
width: 200px;
background-color: #999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
8.2.3 rotate
- rotate允许你旋转一个元素
- 括号中的值只能以度为单位（如90deg）。正值时会进行顺时针旋转，而负值则会逆时针旋转。
.rotate:hover {
transform: rotate(30deg);
}
8.2.4 skew
- skew（斜切）会让元素在一个或者两个轴上变形偏斜。
- 第一个值是X轴上的斜切（本例中是40度）
- 第二个值是Y轴上的斜切（本例中是12度）
- 忽略第二个值意味着仅有的值只会应用在X轴上（水平方向）。
.skew:hover {
transform: skew(40deg, 12deg);
}
8.2.5 matrix
- matrix（矩阵）变形的语法超级复杂
.matrix:hover {
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
}
- 傻瓜式的矩阵变形工具
8.2.6 transform-origin属性
- 在CSS里，默认的变形原点（浏览器中作为变形中心的点）是在正中心：
- 元素X轴的50%和Y轴的50%处
- 这和SVG默认的左上角（或者0 0）是不同的。
- 使用transform-origin，我们可以修改变形原点
.matrix:hover {
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
transform-origin: 270px 20px;
}
8.3 CSS3的3D变形
- 使用perspective属性来设置用户视点到3D场景的距离。
- 结构:
<div class="flipper">
<span class="flipper-object flipper-vertical">
<span class="panel front">The Front</span>
<span class="panel back">The Back</span>
</span>
</div>
- 样式：
.flipper {
perspective: 400px;
position: relative;
}
/* 我们将父元素设置为相对定位，从而创造一个上下文来放置flipper-object。 */
.flipper-object {
position: absolute;
transition: transform 1s;
transform-style: preserve-3d;
}
- 使用backface-visibility属性把它设置为hidden来隐藏元素的背面
8.4 CSS3动画效果
- 相较于3D变形，CSS3动画的支持度更高。
- 将在元素翻转后为其添加脉冲动画效果。
- 这里只定义了一个简单的关键帧选择器：100%。
- 也可以设置多个关键帧选择器（推荐你使用百分比）。你可以把它们想象成时间轴上的点。
- 这里只定义了一个简单的关键帧选择器：100%。
@keyframes pulse {
100% {
text-shadow: 0 0 5px #bbb;
box-shadow: 0 0 3px 4px #bbb;
}
}
- 最好使用一个能代表动画效果的名字，因为一个关键帧声明可以在项目中多处复用。
- 使用：
.flipper:hover .flipper-horizontal {
transform: rotateY(180deg);
animation: pulse 1s 1s infinite alternate both;
}
- animation-fill-mode属性
- animation-fill-mode: forwards;
- 这指使元素保留动画结束时的值。
第九章 表单
9.1-2 理解HTML5表单中的元素
- 每一个输入元素都有一个对应的label元素
- 然后一并被包裹在div元素中（我们也可以把用label把input包裹起来）。
<fieldset>
<legend>About the offending film (part 1 of 3)</legend>
<div>
<label for="film">The film in question?</label>
<input id="film" name="film" type="text" placeholder="e.g. King
Kong" required>
</div>
9.2.1 placeholder
- 为占位符文本添加样式
- 可以使用:placeholder-shown伪类选择器来为placeholder属性添加样式
- 要用前缀添加工具来兼容各种版本
input:placeholder-shown {
color: #333;
}
9.2.2 required
- 用于多种类型的输入元素来确保表单域中必须输入值
- range、color、button和hidden类型的输入元素不能使用required，
- 这几种输入类型几乎都有默认值。
9.2.3 autofocus
- 可以让表单在加载完成时即有一个表单域被默认选中
- 如果多个表单域都添加了autofocus属性，在不同的浏览器上表现是不一致的
- 在Safari上，最后一个添加autofocus的表单域会被选中，
- 在Firefox和Chrome上会选中第一个添加autofocus属性的元素。
- 带有autofocus的表单域，则会阻止空格键的默认行为
9.2.4 autocomplete
- 禁用自动补全功能的表单项
<div>
<label for="tel">Telephone</label>
<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required>
</div>
- 也可以给整个表单（不是fieldset）设置属性来禁用自动补全功能
<form id="redemption" method="post" autocomplete="off">
9.2.5 list及对应的datalist元素
- 可以在用户开始在输入框中输入值的时候，显示一组备选值
- list属性中的值（awards）同时也是datalist元素的id
- 这样就可以让datalist与输入框关联起来
<div>
<label for="awardWon">Award Won</label>
<input id="awardWon" name="awardWon" type="text" list="awards">
<datalist id="awards">
<select>
<option value="Best Picture"></option>
<option value="Best Director"></option>
<option value="Best Adapted Screenplay"></option>
<option value="Best Original Screenplay"></option>
</select>
</datalist>
</div>
9.3 HTML5的新输入类型
9.3.1 email
- 当与required组合使用时，如果提交一个不符合格式的地址，浏览器会生成警告信息
<div>
<label for="email">Your Email address</label>
<input id="email" name="email" type="email" placeholder="dwight.schultz@gmail.com" required>
</div>
- 许多触摸屏设备（如安卓、iPhone等）会根据输入类型改变键盘模式
9.3.2 number
- 如果你输入的不是数字
- Chrome和Firefox会在表单提交的时候在表单域上弹出一个警告框
- 而Safari则相反，它什么都不会做，并且让其顺利提交。
- IE11则会在输入框失焦的时候快速清除其中的内容。
<div>
<label for="yearOfCrime">Year Of Crime</label>
<input id="yearOfCrime" name="yearOfCrime" type="number" min="1929" max="2015" required>
</div>
9.3.3 url
<div>
<label for="web">Your Web address</label>
<input id="web" name="web" type="url" placeholder="www.mysite.com">
</div>
9.3.4 tel
- IE11、Chrome和Firefox等现代浏览器上，tel类型都设计为数字类型格式
- 它的表现和普通文本输入框一样。
- 当输入无效值，它们都 没有 在输入框失焦或表单提交时提供任何合理的警告信息。
<div>
<label for="tel">Telephone</label>
<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required>
</div>
9.3.5 search
- 移动设备上经常会提供一个更富有针对性的键盘
<div>
<label for="search">Search the site...</label>
<input id="search" name="search" type="search" placeholder="Wyatt Earp">
</div>
9.3.6 pattern
- 让输入域只接受某种特定格式的输入
<div>
<label for="name">Your Name (first and last)</label>
<input id="name" name="name" pattern="([a-zA-Z]{3,30}\s*)+[a-zA- Z]{3,30}" placeholder="Dwight Schultz" required>
</div>
9.3.7 color
- 让输入域接受颜色输入
<div>
<label for="color">Your favorite color</label>
<input id="color" name="color" type="color">
</div>
9.3.8 日期和时间输入类型
- date
<input id="date" type="date" name="date">
- month
<input id="month" type="month" name="month">
- week
<input id="week" type="week" name="week">
- time
<input id="time" type="time" name="time">
9.3.9 范围值
- range输入类型会生成一个滑动条
<input type="range" min="1" max="10" value="5">
- 一大问题是它从来不给用户显示当前的输入值
- 可以通过JavaScript实现。我们将上例中的代码稍作修改
- 获取滑动条当前的输入值，将其显示在id为range的元素（span标签）中
<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10" value="5" onchange="showValue(this.value)">
<span id="range">5</span>
<script>
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
</script>
9.4 如何给不支持新特性的浏览器打补丁
- 在一些老式浏览器或不支持的浏览器上使用这些新特性
- 可以考虑使用Webshims Lib (http://afarkas.github.io/webshim/demos )
- Webshims最便捷的地方就是按需打补丁
- 如果在原生支持HTML5新特性的浏览器上查看网页，则仅会给网页加入一丁点儿的冗余代码。
- 而对于老版本浏览器，虽然它们需要加载更多的代码
- 可以考虑使用Webshims Lib (http://afarkas.github.io/webshim/demos )
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
// 引入你需要的功能
webshim.polyfill('forms');
</script>
9.5使用CSS美化HTML5表单
9.5.1 显示必填项
- 仅通过CSS就告诉用户此输入域为必填项
input:required {
/* 样式*/
}
- 来标记被聚焦的必填项
input:focus:required {
/* 样式*/
}
- 当鼠标悬停于item上时，如果item-general-sibling是与其拥有共同父元素并且位于它后方的兄弟元素，那么样式会被应用到item-general-sibling上
input:focus:required {
/* 样式*/
}
- 当鼠标悬停于item上时，如果item-general-sibling是与其拥有共同父元素并且位于它后方的兄弟元素，那么样式会被应用到item-general-sibling上
.item:hover ~ .item-general-sibling {} {
/* 样式*/
}
- 当鼠标悬停在元素上时，如果item-adjacent-sibling是紧跟item的兄弟元素，那么样式会被应用到item-adjacent-sibling上。
.item:hover + .item-adjacent-sibling {} {
/* 样式*/
}
- 为相关的label元素添加样式（重要）
<div class="form-Input_Wrapper">
<label for="film">The film in question?</label>
<input id="film" name="film" type="text" placeholder="e.g. King Kong" required/>
</div>
input: required + label: after {
content: "*";
font - size: 2.1em;
position: relative;
top: 6 px;
display: inline - flex;
margin-left: .2 ch;
transition: color, 1s;
}
input: required: invalid + label: after {
color: red;
}
input: required: valid + label: after {
color: green;
}
9.5.2 创造一个背景填充效果
- 我们不能在两个背景图片间添加过渡效果（因为浏览器要将声明光栅化为图片）
- 然而，我们可以在相关属性的值中间添加过渡效果
- 如background-position和background-size
- 使用上面的办法来创造一个填充效果，告知用户input或者textarea被聚焦。
input: not([type = "range"]), textarea {
min-height: 30 px;
padding: 2 px;
font-size: 17 px;
border: 1 px solid# ebebeb;
outline: none;
transition: transform .4s, box-shadow .4s, background-position .2s;
background: radial-gradient(400 px circle, #fff 99 % , transparent 99 % ), #f1f1f1;
background-position: -400 px 90 px, 0 0;
background-repeat: no-repeat, no-repeat;
border-radius: 0;
position: relative;
}
input: not([type = "range"]): focus, textarea: focus {
background-position: 0 0, 0 0;
}
- 解析
- 在第一个规则里，我们生成了一个白色径向渐变，但是它被放置在视线外。
- 定义在其后侧的背景颜色（紧跟在radial-gradient后的HEX值）并没有被偏移，所以它能提供一个默认的颜色。
- 当输入域被聚焦时，radial-gradient上的背景位置会设定为默认。
- 因为我们给背景图片设置了过渡，所以可以在两者之间看到漂亮的过渡效果。
- 最终我们实现了在用户输入时，输入域被填充为不同的颜色。
第十章 实现响应式Web设计
10.1 尽快让设计在浏览器和真实设备上运行起来
- 让设计决定断点
- 总是从最小的屏幕尺寸开始设计，渐渐地使视口尺寸增大
- 这样你就能知道在哪个地方加入断点。
- 首先为最小的视口编写CSS，然后在媒体查询中修改其在较大视口下的表现。
- 总是从最小的屏幕尺寸开始设计，渐渐地使视口尺寸增大
.rule {
/* 小型视口样式*/
}
@media(min - width: 40e m) {
.rule {
/* 中型视口样式*/
}
}
@media(min - width: 70e m) {
.rule {
/* 大型视口样式*/
}
}
10.2 在真实设备上观察和使用设计
- 早测试，常测试！
- 使用像BrowserSync这样的工具来同步你的工作 （ https://browsersync.io/ ）
- 配置完成后，当你保存你的工作时，诸如CSS等的变化就会被注入到浏览器上，而无需你不断地刷新屏幕。
- 它还能通过WIFI将在不同设备上的浏览器刷新。
- 这节省了拿起每个测试设备点击刷新的时间。
- 它甚至能同步滚动和点击
10.3 拥抱渐进增强
- 应该编写能够精确描述你的内容的HTML5标记
- 基于文本和内容的网站
- 正确使用main、header、footer、article、section和aside等元素
- 构建Web应用或者图形化UI组件
- 需要思考一下如何提炼成有效的标记
- 在HTML上的优化越多
- 你在CSS和JavaScript上为老式浏览器所做的优化就越少
- 基于文本和内容的网站
10.4 确定需要支持的浏览器
- 有的时候根据项目需要，你要从更为高级的浏览器开始编写
- 如，在你的项目中JavaScript是必需的
10.4.1 等价的功能，而不是等价的外观
- 网站在每个浏览器上的外观和工作方式一样是不现实也是不可取的
- “支持老式浏览器”并不意味着“在老式浏览器上看起来一模一样”。
10.4.2 选择要支持的浏览器
- 如果这是个新项目，并且没有统计数据
- 我通常会遵循“前两个版本”策略
- 即是指当前的浏览器版本和之前的两个浏览器版本。
- 如果IE12是目前的浏览器版本，那么你就要兼容IE10和IE11（前两个版本）。
- 我通常会遵循“前两个版本”策略
10.5 分层的用户体验
- 基本体验是站点的最小可行版本
- 增强体验则是包括所有功能并且最为美观的版本
- 然后通过Modernizr，我们可以根据浏览器的兼容性优化体验。
- 实现体验分层
- Modernizr为基于浏览器兼容性的优化提供了最为稳健的方式
- 当编写CSS的时候，“基础”版本代码由以下内容组成
- 没有被媒体查询包裹的代码
- 没有被Modernizr添加选择器的代码
10.6将CSS断点与JavaScript联系起来
- JavaScript总是返回宽度的像素值而不是REM值
@media(min-width: 20rem) {
body::after {
content: "Splus";
font-size: 0;
}
}
@media(min-width: 47.5rem) {
body::after {
content: "Mplus";
font-size: 0;
}
}
@media(min-width: 62.5rem) {
body::after {
content: "Lplus";
font-size: 0;
}
}
- 在每一个我们想和JavaScript沟通的断点处，我们使用了after伪元素
- 你也可以使用before伪元素
- 将其内容设置为断点的名称
- 在JavaScript中，我们可以阅读这个值
- 我们将这个值赋给一个变量
var size = window.getComputedStyle(document.body,':after').
getPropertyValue('content');
- 下面是一个简单的自我调用函数（自我调用意味着它在浏览器解析它的时候马上被调用）
- 来根据视口大小弹出不同的信息
;(function alertSize() {
if (size.indexOf("Splus") != -1) {
alert('I will run functions for small screens');
}
if (size.indexOf("Mplus") != -1) {
alert('At medium sizes, a different function could run');
}
if (size.indexOf("Lplus") != -1) {
alert('Large screen here, different functions if needed');
}
})();
10.7 避免在生产中使用CSS框架
- 最为有名的两个是Bootstrap（http://getbootstrap.com/ ）和Foundation（http://foundation.zurb.com/ ）
- 在快速制作原型方面有巨大的优势
- 例如，把交互方式展现给客户看
- 在生产中应该避免使用它们
- 首先，从技术上看，添加一个框架会为你的项目带来过多的冗余代码。
- 其次，从美学的角度上看，因为这种框架十分普及，所以你的项目会和无数个其他项目看起来一模一样。
- 最后，如果你只是在你的项目里复制粘贴代码，然后调整至符合你的需求，那么你就不可能充分理解它们的原理。
10.8 尽可能使用最简单的代码
- 需要为列表中的第五个元素添加不同的样式
- 并且你能操作标记，那就不要像下面这样使用nth-child选择器：
.list-item:nth-child(5) {
/* 样式*/
}
- 直接在标记上添加HTML类是更为明智的做法
<li class="list-item specific-class">Item</li>
- 然后使用类来添加样式：
- 不仅更易懂，而且支持度也更高（旧版本的IE浏览器并不支持nth-child选择器）
.specific-class {
/* 样式*/
}
10.9 根据视口隐藏、展示和加载内容
- 响应式Web设计中有一个常用的准则：
- 如果你在小屏幕上不加载某一部分，那么在大屏幕上也不应该加载。
- 意味着在每一个视口下用户都应该能达到同样的目的（购买产品、阅读文章、完成交互）
- 随着屏幕的尺寸越来越大，我们也没有必要去增加额外的部分（窗口小部件、广告、链接等）来填充空白。
- 将复杂的可视化工作交给CSS
- JavaScript可以实现单独使用CSS无法实现的交互效果
- 如果可能的话，在涉及视觉效果的时候，我们仍然应该将工作交给CSS来完成,这意味着:
- 不要单独使用JavaScript实现菜单移入、移出、打开、关闭的动画效果
- jQuery的show和hide
- 不要单独使用JavaScript实现菜单移入、移出、打开、关闭的动画效果
- 相反，应该使用JavaScript在相关的部分上做简单的类变换，然后让类去触发CSS展示相关的动画效果。
- 如果你在小屏幕上不加载某一部分，那么在大屏幕上也不应该加载。
10.10 验证器和代码检测工具
- 官方： https://validator.w3.org/
- 更好的方法是为你的HTML、CSS和JavaScript安装和配置检测工具
10.11 性能
- 基础条例：
- (1) 减少你的资源数（例如，不要加载15个JavaScript文件，而应该将它们拼成一个）。
- (2) 减小你的页面大小（如果你能压缩图片，那么请压缩）。
- (3) 延迟加载非必需资源（如果你可以将CSS和JavaScript的加载延迟到页面加载完成后，就可以大幅缩短初始化时间）。
- (4) 保证页面尽快可用（通常是上述所有步骤的副产物）。
- 有很多工具可以度量和优化性能
- 我最喜欢的是https://www.webpagetest.org/
- 会显示出一份完整的页面分析
- 还会按照幻灯片的方式显示出页面的加载过程，让你知道如何改进页面加载速度
- 我最喜欢的是https://www.webpagetest.org/
