Some Interesting Possibilities with CSS4

CSS4 is definitely still a work in progress, meaning that many of the new features that the W3C editing team is working on still have the possibility of removal and others may be added on. Does this mean it is time to quit working with CSS3? Of course not! CSS4 builds on CSS3, so certainly continue your path to becoming a master CSS3 developer. In addition, CSS4 is still a long way from being released and implemented on browsers. So why are we even reviewing this futuristic version?

For one, taking a look at some of the possibilities with CSS, Level 4, is quite exciting. Two, you may be more encouraged to hang onto some designs that seem utterly impossible right now. And, three, maybe it will give you a head start on learning CSS4 so that it doesn’t seem too overwhelming when it is finally released.

The W3C folks have edited drafts available for preview for both Selectors and Media Queries. You can view the Media Queries Level 4, Editor’s Draft 30 August 2013 and the Selectors Level 4, Editor’s Draft 21 August 2013, which is pretty cool of the team to let us in on the work in progress. The team is a bit farther ahead on Selectors Level 4, with a latest working draft of Selectors Level 4, released on 2 May 2013. So, without further ado, let’s dive in!

Media Queries Level 4

Simply put, media queries allow for responsive design. Media queries were first introduced to CSS in version 3 and allowed developers to create styling decisions based on the browser on which the web page loaded. Level 4 queries are very new, as in less-than-a-month new. You may not have even known that the W3C team publicly released their editing draft. Some of the changes being made to existing CSS3 features are as follows:

  • Possible media features changes – a “(feature) will evaluate to true if (feature:x) will evaluate to true for a value x other than zero or zero followed by a unit identifier (i.e., other than 0, 0px, 0em, etc.) or the keyword ‘none’.”
  • Invalid media types may include ‘and’, ‘not’, ‘only’, and ‘or’.
  • White space may now be required after ‘not’ and ‘only’ and also around the keyword ‘and’.

But these changes are nothing to get too excited about. The new media features – the stuff to look forward to – may include the following additions:

  1. Script
  2. Pointer
  3. Hover
  4. Luminosity

Keep in mind that all of the changes and new features listed above may change by the release of the working draft for Media Queries Level 4. These are simply a “work in progress”, as explicitly stated by the W3C team.

Script

Stu on Stucox.com describes Script much more succintly than the quite dense editor’s draft. Basically, Script is supposed to query whether or not the ECMAScript (like JavaScript) is supported. In other words, script provides a more standard way of querying for JS (and other client-side scripting) code. You save a bit of time running one of any number of techniques for determining whether JS is available with this slick new feature.

Pointer

This query would affect just what it sounds like it does: a pointing device (i.e. mouse) or lack thereof. Settings include ‘none’, if no pointing device is present; ‘coarse’, if the pointing device is of lesser accuracy, such as a touch screen; and ‘fine’ if the pointer is quite accurate, such as with a mouse or stylus-based touch pad.

Hover

This feature simply would allow you to query whether or not a pointing device can hover. For instance, a mouse can hover but a touch screen cannot. Just as with the Pointer query, Hover would allow for much more accurate interactive features on a responsive web page.

Luminosity

Finally, this query would provide the option to control the ambient luminosity of a device on which the web page is displayed. Three values are included: ‘dim’ for dark environments, ‘normal’ for when the environmental lighting does not require any adjustment on the part of the device, and ‘washed’ for an exceptionally bright environment, such as outdoor sunlight.

As with CSS3 queries, the Level 4 queries will also all be dynamic, meaning that you can simply plug in or unplug an input and your styles will change as needed.

Selectors Level 4

The selectors for CSS4 are much further along in development than media queries. So, there is a lot to discuss. The following is just a high-level overview of what the W3C team has currently created, and you may notice that most of the changes are mainly added effects to pseudo-classes. Of course, some of these may be furthed revamped or completely removed by the time CSS4 is actually released.

Negation and Matches-any Pseudo-classes

In CSS3, with the negation pseudo-class, :not( ), only one simple selector was allowed as the argument. In Level 4, however, :not( ) can now include a list of selectors. Now, no longer will selector lists have to be broken into seperate blocks of code for each selector.

p:not(.active, .visible) {
   color: yellow;
}

The same is true of the :matches( ) class, a new pseudo-class that would allow for matching styles to certain elements. Just use the :matches( ) class to group a list of selectors together, and voila! you have one line of code grouping items for matching.

article:matches(.active, .visible) {
	background: green;
}

Attribute Selectors: Case Sensitivity

Currently in the CSS4 version, the case of attributes will no longer have to be case sensitive with the use of the identifier ‘i’ before the closing bracket ]. For instance, in

[frame=hsides i] { border-style: solid none; }

the ‘hsides’ attribute will apply to the ‘frame’ whether it is ‘hsides’, ‘HSIDES’, ‘Hsides’, etc. And this is true even in XML with case-sensitive attribute values. This will be nice for preventing a great deal of debugging.

Linguistic Pseudo-classes

New to CSS4 is a :dir( ) pseudo-class. As a directionality pseudo-class, it is a factor used in HTML5 to help determine the directionality of elements, along with other factors such as surrounding text. A :dir(rtl) pseudo-class will give an element a directionality of right-to-left, while a :dir(ltr) will have a directionality of left-to-right. Keep in mind that the :dir( ) is not the same thing as [dir=...] attribute selectors, since :dir( ) matches the value as determined by the UA.

Also new to linguistic pseudo-classes occurs with the :lang( ) class. Now :lang( ) can perform wildcard matching. For instance, :lang(de-DE) would match all of the matching language tags, not just ‘de-DE’ and ‘de-DE-1996′. Wildcard matching on the primary language, or first subtag, is done with an asterisk. For instance, *-CH would match ‘de-CH’, ‘it-CH’, etc.

Location Pseudo-classes

Not to be confused with geocoding or similar technologies, the Location pseudo-classes refer to the visitor’s location on your site. A couple of useful changes may be coming to location pseudo-classes in CSS4. One of them is a hyperlink pseudo-class currently named :any-link in which it stands for any element that is the source anchor of a hyperlink.

Another cool feature is the :local-link pseudo-class which styles hyperlinks, depending on the website visitor’s location on the site. This pseudo-class also can differentiate between internal and external links. In non-functional use, :local-link refers to an element that has a source anchor hyperlink whose target is the same as the element’s document URL. In functional use, :local-link can be in a hierarchical scheme as follows:

  • :local-link(0) – refers to a link with a target within the same domain
  • :local-link(1) – refers to a link with the same target origin and first path segment
  • :local-link(2) – refers to a link whose target is the same origin and first and second path segments
  • And so on and so forth…

Finally, the :scope pseudo-class stands for elements that are in the reference element set. With selectors such as the QuerySelector( ) call in [SELECTORS-API2] or even the scoped <style> in HTML5, the reference element set gives a point of reference for selectors to match.

Time-dimensional Pseudo-classes

The time-dimensional pseudo-classes allow for classification of elements within certain timeframes of, say, a speech rendering of a document or a video. The :current pseudo-class is for the element or its ancestor that is active at the moment. For instance, a paragraph being read aloud would be highlighted with the following:

:current(p, li, dt, dd) {
  background: yellow;
}

The :past pseudo-class refers to an element specified to happen before a :current element. A :future pseudo-class then, of course, refers to an element defined to occur after a :current element.

Drag-and-drop Pseudo-classes

Another new feature in Selectors Level 4 is the :drop pseudo-class, which is applied to those elements defined as areas on the page specified to be “drop zones”, or in other words, slots on which a user can drop a dragged element. The functional :drop( ) pseudo-class simply goes beyond the regular :drop function to allow for extra filters:

  • :drop(active) – if the user lets go of a dragged item, it would drop in this exact spot.
  • :drop(valid) – this only matches the drop target if it is valid for the item being dragged. If not, then it will match all of the drop targets.
  • :drop(invalid) – this only matches the drop target if it is invalid for the item being dragged. If not, then it will match nothing.

Structural Pseudo-classes

A newly added feature to the current structural pseudo-classes :empty and :root is the :blank pseudo-class. This one is similar to :empty, except that it also refers to the characters between elements. For instance, take a look at the following:

<p>
</p>

This would be considered :blank but not :empty because of the line break and other possible whitespace sections within.

Another structural pseudo-class update is the addition of the :nth-match(An+B of <selector>) and :nth-last-match(An+B of <selector>) pseudo-classes. The :nth-match stands for items with siblings of (An+B-1) that match a certain selector list that comes before it; the :nth-last-match is similar except it refers to a matching selector list after it in the document.

Reference Combinators

A new pseudo-class in Selectors Level 4 allows for the targeting of connected elements using E /FOO/ F, whereas one element is ID-referenced by the FOO attribute of another element. This follows the same rules as for Attribute Selectors. An example given by the crew at W3C involves highlighting an input when the label is hovered on, as follows:

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

Targeting a Parent

CSS4 proposes the possible targeting of a parent using E! > F, where the E element is the parent of the F element. With this, it would be possible to, say, target the parent of an element when that element is hovered on.

For example, in a drop down menu when the last li was active, the parent li always loses focus under CSS3. With the ability to target the parent, however, it is possible to give the parent li a certain color when the child li is active, as shown below.

ul! li:hover {
	  color: blue;
}

Grid Structural Selectors

Columns are already possible in CSS3, but very difficult to isolate for styling. This is what CSS4 would make possible – an easy method for working with individual columns. The first big feature is the column combinator ‘||’ which allows for selection of a column that has a specified set of features. The :nth-column(n) allows for styling of specified columns, starting the count from the beginning. The :nth-last-column(n) starts the count from the end. Both :nth-column and :nth-last-column can include ‘odd’ and ‘even’ values so that it is easy to, say, make every odd column the color red.

Conclusion

There are some very exciting features in CSS4, and several that solve some very complicated code problems for CSS developers. With more features being added slowly and older ones being revamped, it is quite the task for the W3C team. More than likely it will be awhile before we see a released version. For now, keep learning CSS3 inside and out so that when version 4 arrives, your learning curve will be that less painful.

Published September 19th, 2013 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

6 Responses

Comments are now closed on this post.

  • sryo, September 19, 2013

    “There will never be a CSS4.” http://www.xanthir.com/b4Ko0

  • Patrick, September 20, 2013

    The rate of website design and development technological growth is alarming.

    Whether there will be CSS4 or not, the truth remains that “It’s a world of endless possibilities”.

    Whatever comes up, we will be ready!

  • Johnny, September 21, 2013

    Yeah, the parent selector is the biggest thing in my opinion. It’s going to change CSS.

  • David, September 23, 2013

    Definitely hope there will be be a CSS4, the CSS could use some updates.

  • SelenIT, September 24, 2013

    The CSS language has no versions as a whole. It consists of several separate sets of features, called modules, which independently increment their level. E.g. CSS Selectors module is now at level 3, going to update to level 4, while some other modules like CSS Variables start right from the level 1. Historically, most modules issued after CSS2.0 spec, had level 3 and thus went under umbrella term “CSS3″, but calling 4th level modules “CSS4″ will imply that new modules of 1st level are “CSS1″, which sounds confusing and ridiculous. I believe that it’s better just to call them all “new features of CSS”.

    By the way, what does WS3 stand for?

    • Tara Hornor, September 26, 2013

      Thanks for explaining this, SelenIT. Personally, I think it’s all semantics anyway.

      “WS3″ – I have no idea! Whoops! I will change my typo to W3C. Thanks for pointing this out. :)