Peek into CSS48th of May 2012 - Samuli Hakoniemi

We all know that CSS3 has emerged in past couple of years a lot, and everyone is talking about it. There are many new features and properties that are well implemented in modern browsers.

But lately there has been some buzz going around CSS4. CSS Working Group has published a first working draft over half a year ago with many new proposals. CSS4 isn’t going to replace CSS3, but the work on specifications will go on parallel with CSS3 Modules.

In this article I’ll go through some of the most interesting proposals for CSS4. There are many new concepts, including such as parent selector, UI states pseudo-classes, Logical Combinations and Namespaces.

This article is based on my presentation: “CSS3 – The Present and The Future” which contains a section Peek into CSS4.

Table of Contents

Parent Selector

This is the magical selector many developers have been craving for. Earlier there hasn’t been an option to select the parent of an element. In CSS4 this is possible.

Parent selector was earlier proposed to be declared by using “$” rule, eg. $fieldset input:focus. At the moment it is proposed that the rule is following:

fieldset! > input:focus {
  background-color:yellow;
}

If you’re interested in starting to use parent selector today, check jQuery-powered polyfill: cssParentSelector for it.

UI States pseudo-classes

UI states pseudo-classes are meant to target different states an element can have. These are defined in CSS Basic User Interface Module, which have been moved into CSS4 proposal. Some of them, like :enabled and :disabled are already specified in CSS3, while others, like :valid and :invalid are new pseudo-classes in CSS.

Here is the list of UI states pseudo-classes:

  • :enabled / :disabled
  • :checked
  • :indeterminate
  • :default
  • :valid / :invalid
  • :in-range / :out-of-range
  • :required / :optional
  • :read-only / :write-only

Most of them are self-explanatory, but you can read more detailed description from the draft.

Tree-Structural pseudo-classes

Tree-structural pseudo-classes (eg. :nth-child() and :nth-of-type()) has now two new pseudo-classes: :nth-match() and :nth-last-match().

What :nth-match() actually is? It’s very similar to the logic with :nth-child().

:nth-match(an+b of selector-list) notation represents an element that has a parent and has an+b-1 siblings that match the given selector-list before it in the document tree, for any zero or positive integer value of n.

In practice, :nth-match matches with the given selector-list while :nth-child matches with the given selectors children elements. This happens by including of keyword in selector. If you have the selector input:nth-match(even of :enabled), it will first match the subset of input elements that are enabled and then match the even elements from that subset.

Logical Combinators

Logical Combinations consists of two pseudo-classes: :matches() and :not(). The behavior of “Negation pseudo-class” :not() is most likely clear to you – eg. input:not(:disabled) matches with all the input elements that are not disabled. But :matches() might be a bit more strange:

Matches-Any pseudo-class

The :matches() pseudo-class is the standardised version of Mozilla’s :-moz-any() pseudo class. This is useful for when you need a number of similar selector strings, but change one part such as the pseudo-classes.

Instead of writing a:hover, a:focus, a:active, one can write a:matches(:hover, :focus, :active) for same result.

Reference Combinators

Reference combinators allow you to select elements that are referenced by ID by another element. This is better to be explained in practice:

The following example highlights an input element when its label is focused or hovered-over:

label:matches(:hover, :focus) /for/ input { /* association by "for" attribute */
    box-shadow: yellow 0 0 10px;
}

Media Queries Level 4

While writing this article, first draft of Media Queries Level 4 was published. Unfortunately I won’t be writing more about Media Queries in this article, I just suggest reading the draft :).

Namespaces

Namespaces are actually proposed in CSS(3) Namespaces Module, but it’s written pretty much the same time as first proposal of CSS4. And CSS4 proposal is heavily referring to the namespaces, so I feel this one is good to go through when speaking of CSS4.

CSS Namespaces has quite simple syntax. The @namespace declares a namespace prefix and associates it with a given namespace name, and “vertical bar” works as a selector delimiter. Consider following example:

@namespace "http://www.example.com";
@namespace foo "http://www.example.com/foo";

h1 { font-size: 42px; } /* Belongs in example.com */
|h1 { font-size: 36px; } /* Belongs eg. in example.com/bar */
*|h1 { font-size: 32px; } /* Belongs in both namespaces */
foo|h1 { font-size: 28px; } /* Belongs in example.com/foo */

New Properties for Borders

Some new properties for borders are introduced in CSS4. The most obvious one is border-corner-shape, which allows values curve | bevel | scoop | notch. In addition, there are updates on border-images.

For further reading, see CSS Backgrounds and Borders Module Level 4.

Resources

I have to admit that there is lot more in CSS4 Working Draft than it’s included in this article. Therefore I suggest you all to read following resources I’ve gathered about CSS4:

Comments are closed.