《响应式Web设计：HTML5和CSS3实战(第2版)》06章

作者: Revontulet | 来源:发表于2017-11-07 15:52 被阅读0次

响应式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); 
  }

傻瓜式的矩阵变形工具
- http://www.useragentman.com/matrix/

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%。
  - 也可以设置多个关键帧选择器（推荐你使用百分比）。你可以把它们想象成时间轴上的点。

  @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新特性的浏览器上查看网页，则仅会给网页加入一丁点儿的冗余代码。
  - 而对于老版本浏览器，虽然它们需要加载更多的代码

    <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在相关的部分上做简单的类变换，然后让类去触发CSS展示相关的动画效果。

10.10 验证器和代码检测工具

官方： https://validator.w3.org/
更好的方法是为你的HTML、CSS和JavaScript安装和配置检测工具

10.11 性能

基础条例：
- (1) 减少你的资源数（例如，不要加载15个JavaScript文件，而应该将它们拼成一个）。
- (2) 减小你的页面大小（如果你能压缩图片，那么请压缩）。
- (3) 延迟加载非必需资源（如果你可以将CSS和JavaScript的加载延迟到页面加载完成后，就可以大幅缩短初始化时间）。
- (4) 保证页面尽快可用（通常是上述所有步骤的副产物）。
有很多工具可以度量和优化性能
- 我最喜欢的是https://www.webpagetest.org/
  - 会显示出一份完整的页面分析
  - 还会按照幻灯片的方式显示出页面的加载过程，让你知道如何改进页面加载速度

《响应式Web设计：HTML5和CSS3实战(第2版)》06章

响应式Web设计:HTML5和CSS3实战(第2版)

第六章 CSS3 高级技术

6.1 CSS3 文字阴影特效

6.1.1 省略blur值

6.1.2 多文字阴影

6.2 盒阴影

6.2.1 内阴影

6.2.2 多重阴影

6.2.3 阴影尺寸（偏移）

6.3 背景渐变

6.3.1 线性渐变语法

6.3.2 径向渐变背景

6.3.3 为响应式而生的关键字

6.4 重复渐变

6.5 渐变背景制作图案的使用场景

6.6 多张背景图片

6.6.1 背景大小

6.6.2 背景位置

6.6.3 背景属性的缩写

6.7 高分辨率背景图

6.8 CSS滤镜

第八章 CSS3过渡、变形和动画

8.1什么是CSS3过渡以及如何使用它

8.1.1 过渡的简写语法

8.1.2 在不同时间段内过渡不同属性

8.1.3 过渡调速函数

8.2 CSS的2D变形

8.2.1 scale

8.2.2 translate

8.2.3 rotate

8.2.4 skew

8.2.5 matrix

8.2.6 transform-origin属性

8.3 CSS3的3D变形

8.4 CSS3动画效果

第九章 表单

9.1-2 理解HTML5表单中的元素

9.2.1 placeholder

9.2.2 required

9.2.3 autofocus

9.2.4 autocomplete

9.2.5 list及对应的datalist元素

9.3 HTML5的新输入类型

9.3.1 email

9.3.2 number

9.3.3 url

9.3.4 tel

9.3.5 search

9.3.6 pattern

9.3.7 color

9.3.8 日期和时间输入类型

9.3.9 范围值

9.4 如何给不支持新特性的浏览器打补丁

9.5使用CSS美化HTML5表单

9.5.1 显示必填项

9.5.2 创造一个背景填充效果

第十章 实现响应式Web设计

10.1 尽快让设计在浏览器和真实设备上运行起来

10.2 在真实设备上观察和使用设计

10.3 拥抱渐进增强

10.4 确定需要支持的浏览器

10.4.1 等价的功能，而不是等价的外观

10.4.2 选择要支持的浏览器

10.5 分层的用户体验

10.6将CSS断点与JavaScript联系起来

10.7 避免在生产中使用CSS框架

10.8 尽可能使用最简单的代码

10.9 根据视口隐藏、展示和加载内容

10.10 验证器和代码检测工具

10.11 性能

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

第九章表单

第十章实现响应式Web设计