CSS4 – The Next RELEASE

CSS 3 is slowly still making its way onto the web world, but the World Wide Web Consortium (W3C), the known governing body that oversees the development of web standards, is already plotting the future of CSS with new launch of CSS 4. The W3C recently released the first draft of CSS 4, adding dozens of new rules to make web developers’ lives easier. The Internet is constantly evolving and changing continuously — it’s so hard to believe rickrolling is six years old, Internet Explorer 6 is twelve years old, Bootstrap is releasing their 4th version and CSS is nearing the public release of version 4.

The CSS 4 spec is completely brand new and no web browser actually supports any of these rules yet, but if you’re curious what the next few years will mean for CSS, the first draft offers a sneak peek at what’s in store for web developers.

css4

What’s new in CSS4?

The biggest news in the current draft of CSS 4 is support for the much-requested parent or “subject” selector. In CSS, rules are typically applied to the innermost selected element. That is, given the chain body header h1, the actual CSS rule will be applied to the h1 element at the end of the chain. CSS 3 offers no way to, say, style the header tag but only if it has an h1 child element. CSS 4 changes that. So what’s new in CSS4? we’ve taken a look through the entire CSS4 spec, hand-picking the best parts. Here are just a few of them.

 

New and OLD Properties
With the advent of CSS4, some old properties have been reintroduced and some have been given to the world for the very first time.

Among the resurrected properties are text-decoration: blink, text-decoration: marquee, font-style: wordart, and font-family: “Comic Sans MS”, which are designed to bring typography up to the standards set by the Gutenburg press of the thirteenth century.

The newer properties include retina: true (which automatically enhances your images, CSI:Miami-style), background-music: muzak (which gives your eCommerce sites a true shopfront feeling), and -webkit-typos: false (which utilises iOS’ hyper-accurate spellchecking software to automatically fix typos in YouTube comments).

 

Controlling Elements
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:
$ul li.clicked {
background: white;
}

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

The dollar sign may not end up being the subject indicator and the exact syntax will likely change before the spec is finalized. But regardless of the way it ends up being implemented, the subject selector opens up a whole new realm of CSS possibilities.

Other highlights in CSS 4 include some new pseudo selectors like the :matches() pseudo-class which greatly simplifies the process of writing complex, nested CSS. For example, you could write:

:matches(section, article, aside, nav) h1 {
font-size: 3em;
}

The :matches() syntax eliminates the need to write out section h1, article h1 and so on. It’s handy for even simple nestings like the example above, but it becomes really powerful when you’re selecting elements that are two or three levels deep. For more info on :matches(), check out our earlier write-up on Mozilla’s :any() selector, which is the basis for :matches().

 

Presponsive Layout
Responsive design is undoubtedly has turned the big thing of 2013. With @media queries, it’s never been easier to adapt your site for multiple devices and screen sizes, giving your user a better experience. The only real obstacle left in the responsive way is page loads: connection speeds are still worryingly slow for a large proportion of visitors, and the W3C are aware of that. That’s why there’s a proposal for presponsive design, which would let you apply preload states for slower connections.

Of course, this technology doesn’t come cheap. You’ll need a fancy new flux processor chip, which only comes with the latest fibre-optic connections.

@media (flux-capacitor: true) {
88mph {
body { background: url(‘loading.gif’); }
}
}

 

Cascading Scriptsheets
This feature was actually introduced by Internet Explorer under the term behavior. If you’ve ever used a PNG fix, you’ve used this before. It’s incredibly useful for enhancing interaction like never before, and it’s helping to bridge the gap and feud between JavaScript and CSS developers. It uses unobtrusive, function-style syntax, and looks like this:

*:hover {
script: script(alert(‘hello world’));
}

Here’s the equivalent in JavaScript:
var doc = document;
var star = doc.all;

window.hello_world = function(message) {
message = message || ‘hello world’;
alert(message);
}

for(var i = 0; i < star.length; i++) {
if(star[i] && star[i].nodeName) {
star[i].onmouseover = function() {
if(window.hello_world) {
hello_world();
}
}
}
}

 

Proper Email Styling Support
CSS is overrated anyway – W3C.  Yes, you did just read that right. The W3C are working with a range of email providers to give you a consistent, modern approach to styling and authoring HTML emails. This could mean we can finally start using semantic <article>, <section>, and even <div> tags, stop using inline stylesheets, and finally move to a centralised, external stylesheet system — really get things up to date with the rest of the web.

However, they all agreed that “tables were alright”, quoting that “CSS is overrated anyway”, so nothing’s changed. Ah well.

 

Server-side Stylesheets (CLISS)
If you’ve ever had to work in a command-line interface before, you’ll notice that it’s a bit – well, boring – to look at. The CSS4 spec attempts to amend this by introducing the CLISS module. CLISS stands for Command-Line Interface Styling Scriptsheets, and it follows a very similar syntax to the CSS we’re used to working on with websites, but can now be used to make your Terminal a little bit brighter. Currently, there’s support for the Unix, OS X and Windows command-line applications, provided an optional module is installed. Unlike existing styling options within the application, CLISS allows the entire CSS property set, allowing full customization. Right now, the selector stack is very limited (terminal, line, and error), but there’s a lot more in the works.

The syntax looks like this:

terminal {
background: url(“puppies.gif”);
color: #f0f;
transform: rotate(-90deg);
}
terminal error {
display: none; /* Never write bad code again */
}

 

PARENT SELECTOR! LINK
This is the long-awaited Swiss Army knife, the holy grail of CSS. It is the most discussed aspect of the Selectors Level 4 specification, and it gives you a lot more power with CSS. Thanks to the parent selector (also referred to as the subject of the selector), you can easily style elements other than the default last ones in a selectors list. This can be super-useful when styling generated menus, and you avoid having to add classes for styling purposes only.

Let’s see it in action with the most basic example. Suppose we have a menu, a simple list of links. We want to be able to style it, but the PHP on the server is generating the menu, so we can’t change it. The problem arises when we want to style the li element based on the active class added to the anchor; we can style a using a.active {}, but we can’t get to the li element. The easiest thing to do would be to add the active class to the list element, not to the link itself — like so: ul li.active a — so that we can style both the list and the anchor if needed. The problem is that the menu is generated by a script over which we don’t have control, so we end up with ul li a.active.

In the normal structure of a CSS document, we always refer to the last item in the selectors list. In ul li a.active, that would be the link with the active class; in article p span, it would be the span; and so on. Thanks to the parent selector, we can change the subject of the used selector. This gives us incredible power and flexibility when styling:

ul li! a.active {
color: red;
}

Now we can style the li element according to whether the active class has been added to the link. When we add the parent selector, we are saying that we want to style the li element instead of a.active.
We can also manipulate the background color of the whole page just by adding a simple link somewhere in the document:

body! header a.styleSwitcher:hover {
background: red;
}

This applies a red background to the body of the document whenever the user hovers over an anchor with the styleSwitcher class. To do this without the parent selector, you’d have to add custom classes in JavaScript. It’s not impossible, but the native one line in the CSS is definitely the best solution for this.

Note: The first draft of the specification document (dated 29 September 2011) targets the parent selector with a dollar sign before the given selector ($li). The latest draft (22 June 2012) uses new syntax in which the subject of the selector is indicated by an exclamation mark after the given selector (li!). Of course, this could change (it’s just a draft), so don’t forget about it. What matters is that the parent selector will be implemented sooner or later, and the exact syntax is just a matter of preference. It doesn’t matter to me what it looks like, as long as it works properly in the browser.

 

What Are Selectors?
The specification explains selectors as patterns that match against elements in a tree. Most of the selectors from the Level 4 specification are pseudo-classes. Selectors have been with us since the beginning of CSS, but now they are at the fourth level and have gotten a lot of cool new additions. Let’s jump into the action and see what’s interesting. I won’t describe the entire document — only the new additions in Level 4.

LOGICAL COMBINATORS: :MATCHES, :NOT
Let’s start with logical pseudo-classes. The first, :matches, some of you might already know from Mozilla’s :-moz-any(), which was implemented a long time ago in Firefox 4. Thanks to this selector, we can group and match items in our CSS document. Why is it so useful? Well, the most basic use I can think of is to gather multiple definitions of anchor states into one. So, instead of this…
ul.menu li a:link,
ul.menu li a:hover,
ul.menu li a:visited,
ul.menu li a:focus {
color: red;
}
… we can just do this:
ul.menu li a:matches(:link, :hover, :visited, :focus) {
color: red;
}
Simple, right? Although this example might look silly, it shows the power of the :matches pseudo-class, and it can be used in more complicated situations:
article:matches(.active, .visible, #important) {
background: red;
}
The second logical combinator we’ll look at was introduced in the CSS3 specification, but it became even more powerful in Level 4. I’m talking about :not, the simple negation pseudo-class, which now can take a list of selectors as parameters:
p:not(.active, .visible) {
color: red;
}
The code above will apply red to all paragraphs to which the active or visible class are not assigned in the markup.

 

LOCATION PSEUDO-CLASSES: :ANY-LINK, :LOCAL-LINK
Thanks to the location pseudo-classes, we will have more control over the styling of links. First, :any-link (a temporary name that could change) gathers definitions of a:link and a:visited into one, so you don’t have to write them both:
a:link,
a:visited {
color: red;
}
Now, it won’t matter whether a link has been visited or not. It will be styled the same either way:
a:any-link {
color: red;
}
Our second pseudo-class, :local-link, is way more interesting. You could, for example, give a different style to the links that target your home page, leaving all others untouched:
nav :local-link {
text-decoration: none;
}
Thanks to this line of CSS, links pointing to the current page will not have the text-decoration style, so they’ll look different than the others in the menu or breadcrumb.
Let’s see another example:
:not(:local-link(0)) {
color: red;
}
This style will apply red to all external links. (You could add, say, an icon or background image to them if you’d like.)
As you can see in this last example, :local-link can be used with a parameter. The number in the parentheses determines the level of the URL path that will be checked and matched against every given link. Sounds a little complicated, but an example should clarify:
nav :local-link(0) {
color: red;
}
nav :local-link(1) {
color: green;
}
nav :local-link(2) {
color: blue;
}
nav :local-link(3) {
color: yellow;
}
nav :local-link(4) {
color: gray;
}
Suppose the current address is http://end3r.com/2012/10/20/some-title/, and you have these links in the breadcrumb:
Home
http://end3r.com/
2012
http://end3r.com/2012/
October 2012
http://end3r.com/2012/10/
20 October 2012
http://end3r.com/2012/10/20/
Article
http://end3r.com/2012/10/20/some-title/
The first link will be red, the second green, the third blue, then yellow, then gray.

 

TIME-DIMENSIONAL PSEUDO-CLASSES: :PAST, :CURRENT, :FUTURE LINK
This pseudo-classes is very handy for users of screen readers. With only one line of CSS, the word being spoken can be given a different style (think karaoke-style):
p:current {
background: yellow;
}
This will highlight the word being spoken in yellow.
The second use case is styling subtitles for the WebVTT video format, changing their color and other properties. The :past and :future pseudo-classes refer, respectively, to elements that have been selected and ones that will be selected.

 

UI STATE PSEUDO-CLASS: :INDETERMINATE
While the UI elements of online forms can be given many interesting pseudo-classes, such as :enabled, :disabled or :checked, one is quite new: :indeterminate. As you may know, checkboxes and radio buttons have two states, either checked or unchecked. Either state can be enabled using the :checked pseudo-class (and :not(:checked) for unchecked). But what if you want to style inputs that haven’t been used? They’re neither checked nor unchecked, so their state is indeterminate. Easy, right? We can give nice styles to these inputs that haven’t been used yet or for which a default state hasn’t been set:
input.checkbox:indeterminate {
background: #ccc;
}
Similarly, a progress bar could be given an indeterminate state when its percentage of completion is unknown:
progress:indeterminate {
background: #ccc;
}
In this situation, we can target the default state and style it to indicate to the user that the time left to load a resource can’t be determined.

TREE-STRUCTURAL PSEUDO-CLASSES: :NTH-MATCH, :NTH-LAST-MATCH
Tree-structural pseudo-classes are also new and interesting in the Selectors Level 4 specification. With the help of :nth-match, you can now achieve more than ever. Curious how it works? Well, if you take the :nth-child pseudo-class, which selects an item, and combine it with the power of :matches, you’ve got the answer.
Suppose you have a list of links, some of which have the class active, and you want to select only the even-numbered items from the active links. We could use :nth-child(even) to select all of the even-numbered children in the list, but that’s not what we want, because then we wouldn’t be accounting for the active class. Nor is :matches(.active) sufficient, because then we’d be targeting all elements with the class active. This is where :nth-match comes in:
li a:nth-match(even of .active) {
color: red;
}
Thanks to this one line, we can finally select only the even-numbered items from among those that have the active class.
This is just a simple example. We can achieve a lot more using the complex syntax An+B, like so:
p:nth-match(2n+1 of .active, .visible, #important) {
color: red;
}
This combination of selectors we want to match here is more complicated. The :nth-last-match works exactly the same as :nth-match but starts matching from the end of the DOM structure.
GRID-STRUCTURAL PSEUDO-CLASSES: :COLUMN, :NTH-COLUMN, :NTH-LAST-COLUMN LINK
Let’s apply some pseudo-classes to tabular data. We all know that tables are bad for layouts but good for data that warrants it. An HTML table is row-oriented (<tr>), so columns are missing out. Creating a column-based table is possible, but then you’d be missing rows because you can’t have both at the same time, and row-based tables are more popular. Being able to use CSS to style the columns in a table that is row-based and created in the DOM would be useful when you want to, say, alternate background colors. Of course, we could use additional classes or markup; but with a little help from Selectors Level 4, we can do it with grid-structural pseudo-classes.
:column(.total) {
background: red;
}

:nth-column(even) {
background: blue;
}
This will set red as the background color of every cell in the .total column, and blue for every even-numbered column in the table.
Now we can select columns just like rows, and even get crazy with something like :nth-column(3n+2). Just remember that columns are styled based on their order in the DOM structure, not how they are displayed on the page. Of course, a table isn’t the only thing that benefits from grid-structural pseudo-classes: column-based layouts are on the way.

Conclusion
It’s a great time to be working on the web right now, and it’s getting better and better; evolving from strength to strength, enabling people from around the world to connect and make great things like this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s