Differences Between CSS2.1 and CSS3+


Most of us know that with the introduction of what we customarily call “CSS3″1, there have been changes and additions to CSS, compared to what we had in CSS2.1.
Putting all cross-browser issues aside, I thought it would be nice to be able to document all these changes into a single post and keep it up to date.
So if you want a list of everything that’s been introduced into the CSS spec since CSS2.1, here it is.

New Properties

Following is a list of CSS properties that were not defined in the CSS2.1 specification.
• 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

New Values

Properties from CSS2.1 have new values added to them in CSS3. Following are those new values and which property each belongs to.
• 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)

New Selectors

Following is a list of selectors introduced in 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)

Other Miscallaneous New Features

Other new features not part of CSS2.1 include:
• @font-face
• Media Queries
• Keyframe animations using @keyframes
• Conditional styles using @supports
• Namespacing using @namespace
• Regions
• Filters

Features Still in Flux

The lists above aren't exhaustive. There's a lot that's still in major flux in the spec and that doesn't have much browser support. Below is a list of many of the new modules, which have loads of new features not mentioned above.

Summary

This isn't exactly the most useful post, but I kind of wanted to have a single reference that I can use to look up stuff like this, for ideas and whatnot.
In conclusion, if you don't see a CSS feature listed here, then it almost certainly belongs to CSS2.1, or else I've left it out for whatever reason.
As always, I've done what I can to ensure I've included everything, but feel free to add anything in the comments and I'll update accordingly.

Post by Louis Lazaris