CSS4 is definitely still a work in progress, meaning that many of the new features that the WS3 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 WS3 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 WS3 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:
Script
Pointer
Hover
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 WS3 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 WS3 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.
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.
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
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:
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:
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 WS3 involves highlighting an input when the label is hovered on, as follows:
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.
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 WS3 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.