CSS3 has been a hot topic nowadays in web development. As it slowly crawl into every website, the World Wide Web Consortium (W3C – an International Community who develop Web Standards) has released the very first draft of CSS4 specification document 3 months ago.
I know it’s way too early to talk about it now, everyone still busy picking up and discovering CSS3. But hey, if you’re curious and want to be cutting edge (like me 😉 ), read on. Mind you, you will not able to play with it as no web browser actually supports any of these rules yet.
There are a few new rules that could save web developers’ lives. Some notable rules in CSS4 are:
Parent Selector
This would be my favourite addition. This awesome selector ($ sign) allows us to style a parent element based on its child element.
$fieldset > input.error {
background-color:red;
}
Refer to code above, <fieldset> background color would appear as red color if its children <input> element has error class. This is the best example I could think of and of course, there are many more. The “$” means that the rule is applied to the <fieldset> instead of <input>.
Reference Combinators
This combinator consists of two slashes in between CSS qualified names. We can use slashes to define the association between two compound selectors.
label:matches(:hover, :focus) /for/ input {
box-shadow: yellow 0 0 10px;
}
The above example highlights an <input> element when its <label> is focused or hovered-over. The association is made by the for attribute of the label.
Location Pseudo-classes
CSS4 added a few interesting pseudo-classes to handle links.
- :any-link
- :local-link
- :target
- :scope
- :link and :visited
We can use :any-link pseudo-class to style general links and :local-link pseudo-class allows us to style links within the same host. First thing come into my mind was styling external link without the help of javascript.
a:any-link {
color:blue;
}
a:local-link {
color:red;
}
a:not(:local-link) {
background: transparent url(arrow.gif) no-repeat 0 0;
}
From the code above, all links will have a default blue color. Local link will display as red. External link will get blue color plus a non-repeat background image.
UI states Pseudo-classes
CSS4 has a set of UI states pseudo-classes allow us to style elements depend on their user interface state. The following is the list of new pseudo-classes:
- :enabled and :disabled
- :checked
- :inderterminate
- :default
- :valid and :invalid
- :in-range and :out-of-range
- :required and :optional
- :read-only and :read-write
Pseudo-classes such as :in-range, :out-of-range will require the implementation of HTML5 form range element because it apply only to elements that have range limitations.
<input type="range" name="points" min="1" max="10" />
Logical Combinations
CSS4 introduce a new logical combination pseudo-class called :matches(). This matches-any pseudo-class allows us to simplifies the process of writing long and nested CSS.
:matches(section, article, footer) ul {
margin:0;
}
/* short for */
section ul, article, footer ul {
margin:0;
}
/* or, you use use it this way */
:matches(:hover, :focus) {
color:red;
}
Example above shows how one can use :matches to simplify code. The latter will match any element that is being hovered or focused.
Conclusion
There are a few more new features from CSS4 which are not mentioned, and perhaps somemore will be added as well. It’s really exciting to see what CSS4 has in store for us. A few of these new pseudo-classes, parent selector definitely able to make web developers’ lives easier. There are many features that I hope W3C would add it in such as variable declaration to reduce the amount of code redundancy in CSS. Keep going with CSS3 and preparing yourself for CSS4!
