Differences Between CSS2.1 and CSS3+

on | 8 Comments

W3C CSS SpecMost 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.


Notes

1. As both Divya Manian and originally Tab Atkins have explained, technically, everything after CSS2.1 is now just supposed to be “CSS”. Personally, I don’t agree with that. Whether we like it or not, these things need branding and the term “CSS3″ is already out there and has been mega-branded. It won’t go away soon and I think it’s wrong to try to remove the “3” from CSS. Supporting this notion is the fact that the term “HTML5″ is used today more than ever, despite attempts to remove versioning from it.

Advertise Here

8 Responses

  1. Thanks for this. I had no idea some of those were new, having only learnt CSS this year.

  2. Nice list Louis, it’s pretty comprehensive. I bet it will be quite difficult to maintain it up to date :)

    Regarding your footer note, I think the main problem wasn’t/isn’t the “CSS3″ term, but the early use of the “CSS4″ term.

    I also agree it’s a bit hard not to use the “CSS3″ term further as it’s pretty fair to do that when speaking about non CSS2.1 features like border-radius.

    After all, Tab Atkins said too that:

    The term “CSS3″ refers to everything published after CSS 2.1

    • Yes, that’s correct. But Tab’s main point was to drop the number altogether. That’s why he puts the term “CSS3″ in quotes, referencing what others call it. Then he says:

      So it would be appropriate to just drop the number entirely and refer to everything from now on as just “CSS”

      I think the term “CSS3″ is link bait (in a good way!) and it helps push the industry into mainstream, and it helps sell products (books, tutorials, video lessons, etc). All of that is good for the industry, the same way the term “Ajax” was good for the industry. It’s amazing how much a single digit can help a branding effort :)

  3. Actually, I think it is pretty useful, thanks for posting it, great reference.

  4. great comparison, by the way we should not forget that some of properties just supports by some browsers. thank you so much.

  5. Robert Lilly:

    Are there any properties, values, etc., that were deprecated?

  6. thanks great article, but i have a probleme with css3 in internet explorer

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.