CSS4 Sneak Peak

Posted by & filed under Tech, Web Development. 11,873 views

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!

SHARE IT

RELATED POSTS

Ecommerce Web Design – What Every Professional Designer Needs To Know
8 Crazy Animations With WebGL and HTML5 Canvas
10 Javascript Text Effects

COMMENTS