前端文摘：最全的 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

仍在變化中的特性

　　上面的列表並不詳盡，還有很多仍然在發展中的規范，並沒有太多的瀏覽器支持，下面是這些新模塊的列表。

• 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

您可能感興趣的相關文章

• 20個非常絢麗的 CSS3 特性應用演示
• 23個純 CSS3 打造的精美LOGO圖案
• 35個讓人驚訝的 CSS3 動畫效果演示
• 推薦12個漂亮的 CSS3 按鈕實現方案
• 24款非常實用的 CSS3 工具終極收藏

 

本文鏈接：前端文摘：史上最全的 CSS2.1 和 CSS3+ 的區別一覽

編譯來源：夢想天空 ◆ 關注Web前端開發技術 ◆ 分享網頁設計資源