A Designer’s Perspective: CSS4 & the Future of Web Design

50

Even though CSS3 specs are still in development process, there are already some drafts proposed by W3C regarding CSS4.

Here is an overview of what the future is bringing to us.

Until now, it was impossible to select the parent selector of a given element. CSS4 should provide the possibility to target the parent of any given element without having to rely on pure JavaScript or external libraries like J-Query.

From a designer perspective, one issue that has to be faced is the difference between touch input devices and standard user input devices. One of the differences is the fact that touch devices cannot react to a hover state.  For instance when we have a menu that expands on the hover state of the mouse pointer, we won’t be able to have the same interaction on smartphones. The new specification aims at allowing to query for an ‘hover’ capability instead of querying for specific devices and this avoid an endless list of media queries to target all of the devices. This feature would allow tackling design differences in a more structured and easier way.

CSS4 in the actual draft is expected to provide the possibility to calculate CSS values without the need of JavaScript.  Properties can be calculated with common values mixing all of the units available (px, em’s etc.). This could turn out to be an exciting feature to design better responsive or adaptive layouts for different devices. If we mix this feature with the new ability to use and define variables from within CSS, the time needed for writing style sheets could be dramatically reduced. As of now this feature was implemented with Less and Sass, which are CSS Dynamic languages in the form of external JavaScript libraries.

Still from a designer point of view, one exciting area that is being taking into consideration in the CSS4 drafts is the use of graphic filters on elements just by using CSS. The simpler implementation of this feature could allow the designer to avoid creating different graphic elements to be included in the HTML file (raising the download size of the document) by applying a bunch of effect to one base element.

Right now the draft includes basic effects like grayscale, blur, contrast, saturation, brightness and some other, but the coolest feature that should be implemented is the use of custom filters based on shaders.

Shaders are small programs that are common in 3D environment and are used to manipulate 3D vertices and the color of pixels. With the use of CSS shaders, HTML elements are turned into some sort of 3D meshes that can be deformed and modified. For instance, the often seen effects of a flipping page effect created in flash, could be replicated with CSS.

These shaders are programmed using the language based on the WebGL shader specifics, but difference between WebGL shaders and CSS shaders are that the first one works in the canvas element while the second one should work on any element of the web page.

 

Overall it will take some time to standardize these specifications. As mentioned above, there are still many CSS3 modules that need to be worked on before they become a standard for the browsers, but I believe that the direction taken for the future development of the CSS standard will bridge even more the gap between a graphic and a web designer and allow an easier process in the design between desktop and mobile devices.

Fabrizio Fabricatore

Sr. Multimedia Designer