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.
Following is a list of CSS properties that were not defined in the CSS2.1 specification.
animation(and eight associated longhand properties)
border-radius(and four associated longhand properties)
border-image(and six associated longhand properties)
columns(and thirteen associated multi-column properties)
flex(and eleven associated flexbox properties)
text-emphasis(and three associated properties)
transition(and four associated longhand properties)
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
- 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
- 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
- Value “page” for the
- Value “space” for the
- Value “round” for the
- 15 new values for the
- Values “flex” and “inline-flex” for the
- Values “all-small-caps”, “petite-caps”, “all-petite-caps”, “titling-caps”, and “unicase” for the
- Multiple, space-separated values for the
- New values for the
text-alignproperty, including “<string>”, “match-parent”, “start”, “end”, and “start end”
text-decorationis now a shorthand property
- Keywords “hanging” and “each-line” declared along with length or percentage values for the
- Value “full-width” for the
remunits for lengths
calc()units for lengths
- Angle units (
- Time units (
Following is a list of selectors introduced in CSS3.
- Substring matching attribute selectors (
- New pseudo-classes:
- New expression-based structural pseudo-classes:
- Other new structural pseudo-classes:
- The negation pseudo-class
- Four pseudo-elements with double-colon syntax (
- The following-sibling combinator (
p ~ img)
::selectionpseudo-class (removed from the spec, but everyone uses it)
Other Miscallaneous New Features
Other new features not part of CSS2.1 include:
- Media Queries
- Keyframe animations using
- Conditional styles using
- Namespacing using
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.
- 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
- New features in CSS Images and Replaced Content
- CSS Masking
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.
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.