CSS 基础教程1—CSS3 介绍

CSS 基础教程1—CSS3 介绍

简介

  CSS3 是层叠样式表（Cascading Style Sheets）语言的最新版本，旨在扩展 CSS2.1。 它带来了许多期待已久的新特性， 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式，如 multi-columns 、 flexible box 与 grid layouts。实验性特性以浏览器引擎为前缀（vendor-prefixed），应避免在生产环境中使用，或极其谨慎地使用，因为将来它们的语法和语义都有可能被更改。
  注：简介来自 MDN web docs。

  知识点

• 什么是 CSS3
• 浏览器引擎前缀

什么是 CSS3

  CSS3是级联样式表 / 层叠样式表(Cascading Style Sheets)语言的最新进化，旨在扩展 CSS2.1。 CSS Level 2 经历了 9 年的时间（从 2002 年 8 月到 2011 年 6 月）才达到 Recommendation（推荐） 状态，主要原因是被一些次要特性拖了后腿。为了加快那些已经确认没有问题的特性的标准化速度，W3C 的 CSS Working Group(CSS 工作组) 作出了一项被称为 Beijing doctrine 的决定，将 CSS 划分为许多小组件，称之为模块。这些模块彼此独立，按照各自的进度来进行标准化。其中一些已经是 W3C Recommendation 状态，也有一些仍是 early Working Drafts（早期工作草案）。当新的需求被肯定后， 新的模块也会同样地添加进来。
  从形式上来说，CSS3 标准自身已经不存在了。每个模块都被独立的标准化，现在标准 CSS 包括了修订后的 CSS2.1 以及完整模块对它的扩充，模块的 level（级别）数并不一致。可以在每个时间点上为 CSS 标准定义一个 snapshots（快照），列出 CSS 2.1 和成熟的模块。 W3C 会定期的发布这些 snapshots，如 2007, 2010, 2015 或 2017。
  目前为止，还没有 level 超过 3 的模块被标准化，未来应该会有所改变。 不过有些模块，比如 Selectors（选择器）4 或 CSS Borders and Backgrounds（边框和背景）Level 4 早已拥有了 Editor’s Draft（编辑草案），即使它们还没达到 First Published Working Draft（初次发布工作草案）状态。

  注：来自 MDN web docs 。

浏览器引擎前缀

  你在阅读 CSS 代码的时候可能会发现这样的代码：

-webkit-transition:width 2s;
-moz-transition:width 2s;
-o-transition:width 2s;
transition:width 2s;

  其实上述的 css 代码会执行的只有一条，浏览器只会响应其中的一条，然后忽略其它几条。 你是不是会感到疑惑，一个 transition 属性会有这么多种写法，-webkit- 、-moz- 、-o- 这些都是什么呢？还是说这些不是一种属性。 -webkit- 、-moz- 、-o- 这些其实就是我们这里要讲到的前缀。这里的前缀是浏览器引擎前缀（ Vendor prefix ），它是浏览器公司在新的或者是正在实验中的 CSS3 功能变为 CSS3 规范之前，提供一种对该功能的支持方式。我们介绍一下这些浏览器引擎前缀：
-moz- ：Firefox 等使用 Mozilla 引擎的浏览器。

• -webkit- ：Safari 、 Chrome 等使用 Webkit 引擎的浏览器。
• -o- ：Opera 浏览器早期。
• -ms- ：IE 和 Edge 等 。

  浏览器引擎前缀的使用方法也一目了然，将前缀放到属性名前即可。这些前缀并非都是需要的，因为有些属性已经被大部分浏览器所支持。但是一般情况下加上这些前缀是不会有问题的，只要记得把不带前缀的放在最后一条即可。