最全的 CSS2.1 和 CSS3+ 的区别一览

开发 前端
抛开浏览器的兼容性问题,这篇文章把所有的变化整理到一篇文章中便于学习和查阅。尽管我尽量确保收录了所有的新特性,但是不能保证没有遗漏。

大家都知道我们习惯性称作的 CSS3 对于 CSS2.1 有很多的修改和补充。抛开浏览器的兼容性问题,这篇文章把所有的变化整理到一篇文章中便于学习和查阅。尽管我尽量确保收录了所有的新特性,但是不能保证没有遗漏,欢迎大家留言。

新属性

下面是 CSS3 新增的 CSS3 属性列表。 

  • animation (and eight associated longhand properties)
  • background-clip
  • background-origin
  • background-size
  • border-radius (and four associated longhand properties)
  • border-image (and six associated longhand properties)
  • box-decoration-break
  • box-shadow
  • box-sizing
  • columns (and thirteen associated multi-column properties)
  • clear-after
  • flex (and eleven associated flexbox properties)
  • font-stretch
  • font-size-adjust
  • font-synthesis
  • font-kerning
  • font-variant-caps
  • hanging-punctuation
  • hyphens
  • icon
  • image-resolution
  • image-orientation
  • line-break
  • object-fit
  • object-position
  • opacity
  • outline-offset
  • overflow-wrap / word-wrap
  • backface-visibility
  • perspective
  • perspective-origin
  • pointer-events (for HTML)
  • resize
  • tab-size
  • text-align-last
  • text-decoration-line
  • text-decoration-skip
  • text-decoration-position
  • text-decoration-style
  • text-emphasis (and three associated properties)
  • text-justify
  • text-orientation
  • text-overflow
  • transform
  • transform-style
  • text-shadow
  • transition (and four associated longhand properties)
  • word-break
  • word-spacing
  • writing-mode

新的值

在 CSS3 中为 CSS2.1 新增的取值,下面是每个属性新值的列表。

  • Value “local” for the background-attachment property
  • Value "rgba()" for any property that accepts a color value
  • Value "hsl()" for any property that accepts a color value
  • Value "hsla()" for any property that accepts a color value
  • Value "currentColor" for any property that accepts a color value
  • Value "inset()" for the clip property
  • Value "linear-gradient()" for any property that accepts an image value
  • Value "radial-gradient()" for any property that accepts an image value
  • Value "repeating-linear-gradient()" for any property that accepts an image value
  • Value "repeating-radial-gradient()" for any property that accepts an image value
  • Value "image()" for any property that accepts an image value
  • Multiple comma-separated images for any property that accepts an image value
  • Multiple comma-separated background-related values to match multiple background image declarations
  • Value "center" for the position property
  • Value "page" for the position property
  • Value "space" for the background-repeat property
  • Value "round" for the background-repeat property
  • 15 new values for the cursor property
  • Values "flex" and "inline-flex" for the display property
  • Values "all-small-caps", "petite-caps", "all-petite-caps", "titling-caps", and "unicase" for the font-variant property
  • Multiple, space-separated values for the letter-spacing property
  • New values for the text-align property, including "<string>", "match-parent", "start", "end", and "start end"
  • text-decoration is now a shorthand property
  • Keywords "hanging" and "each-line" declared along with length or percentage values for the tfext-indent property
  • Value "full-width" for the text-transform property
  • rem units for lengths
  • calc() units for lengths
  • toggle() units
  • Angle units (deg, grad, rad, turn)
  • Time units (s, ms)

新选择器

下面是 CSS3 中新增的选择器。

  • Substring matching attribute selectors ([att^=val], [att$=val], [att*=val])
  • :target pseudo-class
  • New pseudo-classes: :enabled, :disabled, :checked, and :indeterminate
  • :root pseudo-class
  • New expression-based structural pseudo-classes: :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type()
  • Other new structural pseudo-classes: :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty
  • The negation pseudo-class :not()
  • Four pseudo-elements with double-colon syntax (::first-line, ::first-letter,::before, ::after)
  • The following-sibling combinator (p ~ img)
  • ::selection pseudo-class (removed from the spec, but everyone uses it)

其它新特性

其它 CSS2.1 没有包含的特性。

  • @font-face
  • Media Queries
  • Keyframe animations using @keyframes
  • Conditional styles using @supports
  • Namespacing using @namespace
  • Regions
  • Filters

仍在变化中的特性

上面的列表并不详尽,还有很多仍然在发展中的规范,并没有太多的浏览器支持,下面是这些新模块的列表。

原文链接:http://www.cnblogs.com/lhb25/archive/2013/02/21/differences-between-css2-and-css3.html

责任编辑:张伟 来源: 博客园
相关推荐

2010-03-26 09:32:54

CSS

2010-09-08 09:33:09

CSSlink@import

2010-09-01 15:11:09

linkimportCSS

2010-08-30 10:32:38

SPANDIV

2010-09-10 11:32:23

CSS绝对定位CSS相对定位

2017-10-17 12:43:17

前端CSS布局

2009-07-16 14:09:24

Flex3到Flex4

2010-09-13 13:01:34

CSSpxem

2010-09-08 17:11:29

CSS块元素CSS内联元素

2010-08-20 14:11:26

IE火狐浏览器

2010-09-01 15:24:23

员工

2015-01-12 09:40:00

光纤SDN光传输

2019-04-25 16:03:00

深度学习编程人工智能

2010-10-14 16:55:00

MySQL联结查询

2009-03-03 20:44:06

桌面虚拟化Xendesktop虚拟化

2017-03-06 16:34:12

虚拟个人助理

2020-02-17 15:29:00

石墨文档

2021-06-08 09:47:44

Java面向对象

2011-01-11 09:53:28

linux进程

2011-01-11 10:06:14

linux进程
点赞
收藏

51CTO技术栈公众号