大家都知道我们习惯性称作的 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
仍在变化中的特性
上面的列表并不详尽,还有很多仍然在发展中的规范,并没有太多的浏览器支持,下面是这些新模块的列表。
- Counter Styles Level 3
- Device Adaptation
- Display Module Level 3
- Line Grid
- Mobile Text Size Adjustment
- CSS Variables
- Box Alignment
- The "all" property
- Exclusions and Shapes
- Generated Content for Paged Media
- Grid Layout
- Grid Template Layout
- Line Layout Module
- New features in Lists and Counters
- Overflow Module
- New features in Paged Media
- New features in CSS Sizing
- Media Queries Level 4
- Selectors Level 4
- ch units
- Viewport relative lengths
- New resolution units
- Compositing and Blending
- New features in CSS speech
- The unicode-range descriptor for @font-face
- New features in CSS Images and Replaced Content
- CSS Masking
原文链接:http://www.cnblogs.com/lhb25/archive/2013/02/21/differences-between-css2-and-css3.html