Over a million developers have joined DZone.
Platinum Partner

CSS4 is coming already

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix.  Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.

CSS4 is on the way. That might sound odd, since CSS3 isn't complete, but W3C doesn't work whole-cloth anymore: after CSS 2.1, they decided to publish later specs one part at a time. So as CSS3 gains new recommendations, CSS4 receives its first.

So far the changes definitely seem to (a) respond to developer demand and (b) offer the developer more control.

Scott Gilbertson at Webmonkey describes the most-requested new feature: the subject selector (current indicator: '$'), which lets you specify more precisely when to apply formatting rules:

CSS 4 includes a means of controlling which element in the selection chain is actually being styled. The easiest way to understand the “subject” selector is by example. Say you want to style a list (ul), but only when the user has clicked on an item in the list. You add a class “clicked” to the item (ul li.clicked) when the user clicks on it, but how do you style the whole list from that class?

With the subject selector it’s simple:

1$ul li.clicked {
2    background: white;

The “$” means that the rule is applied to the ul, rather than the li.clicked as it normally would.

Other highlights include pseudo-classes like matches, simplifying nested CSS, and domain-specific link formatting (local-link).

Read Scott's whole post for a fuller overview of what's new in CSS4.

Finally, for a more complete discussion (way less turgid than the spec), try David Storey's blog post on CSS4 selectors. David is a W3G Working Group member, so you know he knows what he's talking about. And his post really does cover the most important stuff in the full W3C draft.

The Web Dev Zone is brought to you in partnership with Mendix.  Learn more about The Essentials of Digital Innovation and how it needs to be at the heart of every organization.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}