demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

A photograph of Dubai at down in fog

CSS Level 4 And More: What’s Coming In 2014

tools

Estimated reading time: 4 minutes, 30 seconds

Over the last few years web developers have been forced to adapt to several major shifts: the rise of HTML5, a fount of preprocessors and JavaScript frameworks, together with a sweeping series of design trends driven by technological change. and design, flat UIs, and deeply interactive pages have become standard practice in a very short period.

At times it would be nice to stop and catch a breath, but the year ahead will offer no such opportunity: if anything, the pace of innovation will only increase.

“PhotoShop in the browser” becomes a reality

CSS blend modes, currently supported in Chrome Canary, should make it into Chrome main and (with luck) other browsers this year, putting far more visual design power in the hands of designer-developers. CSS Level 4 Color properties and values will tie into this in major ways.

True magazine-style layouts on the web

The CSS Shapes, Regions and Exclusions modules, originally spearheaded by Adobe, combined with the Line Grid and proposed Book and Figures Module, will finally allow rich, adaptable and fully-featured magazine-style layouts, which will be increasingly expected of designers.

Greater industry participation in web standards

While corporations have had a long relationship with the W3C and WHATWG, expect industry input to deepen this year. The most obvious and controversial example of this is EME, the proposal to introduce DRM into the HTML spec. Other areas, such as Adobe’s pushing of the standards above, are largely an unalloyed good.

Vendor prefixes slide into obsolescence

The last few versions of Firefox have been completely prefix-free for CSS , and , as is Internet Explorer 10. Chrome and Safari are not far behind. Expect that trend to continue, with future experimental technologies hidden behind browser flags rather than prefixes.

Flexbox becomes standard practice

While its adoption by web developers has been hampered by the many changes it experienced during development, is finally ready for prime time, and is prefix-free in Firefox, Chrome and IE 11. The slow but steady decline in market share for IE 8 and 9 and the increasing ability of preprocessors to create adaptive code will mean that developers will be able to write standard flexbox layout for web pages without having to worry about older browsers.

CSS gets competitive with preprocessors

The innovations of preprocessors over the last few years has not gone unnoticed by the groups contributing to CSS: they have been recognized as an excellent opportunity to see what features are desired by the community, creating a competitive testbed from which innovations can emerge to be enfolded into CSS itself. The most obvious examples of this are the adoption of calc and CSS variables, which will increasingly be used by developers this year. A number of preprocessors, such as Myth, have started to recognize this trend, and are anticipating what will become standard coding practices in the near future while creating CSS that works in browsers today.

WebGL comes to mobile

Image of a Formula 1 racer rendered in WebGLWith code appearing in the IE 11 beta and long established in other browsers, WebGL has good support across on the desktop, but still struggles to gain share in the mobile space, most especially iPhone and iPad. I suspect that this is partly due to the demand of JavaScript-driven 3D graphics on mobile processors and GPUs.

Frustratingly, WebGL code is in the Apple mobile platform and Chrome for Android, but remains accessible only to iAds and after enabling a browser flag, respectively: I’m hopeful that iOS 8 and Chrome 35 for Android will give web developers equal access to 3D graphics in the mobile browser.

HTML5 moves to Recommendation Status

While it’s a formality from the perspective of most web developers, the enshrining of HTML5 as a standard by the W3C should put to rest the few remaining inconsistencies in the spec and draw to a close a contentious but very successful development process.

Blink starts to emerge

To their immense credit, Google’s movement away from the Webkit codebase and the adoption of the “Blink” engine in Chrome has been entirely seamless so far. In 2014, expect the gap between Blink and Webkit to become more apparent.

Toolset & Workflow Maturation

The last half of 2013 saw the increasing popularity of full-stack web development workflow processes that were built not by major corporations, but from the grassroots. Technologies like Grunt are automating much of the scut-work that developers have traditionally dreaded; Kickstarter-funded projects such as Macaw dangle the promise of finally delivering visually-based web design that produces clean, standards-aware code. My instinct is that in 2014 we’ll see the emergence of a series of robust, fully-featured options for a complex web development pipeline from screen to page.

An Adaptive Image Standard, Finally

Fluid images are a wasteful hack, and the proposed srcset syntax for adaptive images was poorly received. <picture> appears to be resurgent, which makes me very happy. We’ll have to see where this goes, but I am hopeful that 2014 will finally deliver a solution.

That’s what I can see coming from the perspective of mid-January 2014: if you think I’ve missed something – or if there’s a technology that you’re particularly looking forward to – please contribute to the comments.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.