New Web Development Standards - Future CSS Tools [Part One]

One of the greatest challenges for web developers is recreating content exactly the way designers intended and clients want on a web page. Changes that are seemingly simple in Photoshop or InDesign (like adding or nudging a column and creating rich layouts where print flows around images) can be arduous to re-create on a web page only using HTML and CSS.

Then, to complicate the process even more, clients make special requests for transitions like a turning page, blending/overlaying content and animations. This is to say nothing of all the stand-alone requests like calendars, shopping carts and sliders or dealing with cross-browser testing (read: Internet Explorer). As a result, complicated code from client-side scripts, Jquery libraries, plugins and more are introduced just to get the job done.

Web developers work coding miracles to deliver, but how clean or manageable the code is for future updating is…well, let’s just say less than ideal.

This is our constant battle: functionality vs. design.

In my search for new innovations to ease the tension between these two warring principles, I discovered what I believe to be some of the most promising and exciting HTML and CSS tools on the horizon. Here, I discuss two of those tools: CSS Regions and CSS Custom Filters.

CSS Regions for Rich Magazine-Like Layouts

Some of the common sophistication exercised by designers when creating and laying out content for print is often taken for granted when you attempt to transition the same design to the web. Current web standards just don’t offer many options in native HTML/CSS support. However, Adobe has recognized this apparent conundrum and is introducing CSS Regions—a declarative way to express magazine-like layouts with simple CSS—to solve the problem.

One of the common ways Adobe expects CSS Regions to be used is in creating on-screen paginated presentations. Typically, websites are navigated by some form of scrolling through an entire page, whereas pagination will do exactly what the name suggests: create a ‘paginated’ presentation that separates content into pages navigated with arrow keys, buttons or a swipe gesture. The idea itself is not innovative, but using pure CSS to achieve it is.

To learn more about CSS Regions, check out these sources:

• Article - CSS Regions: Rich Page Layouts with HTML & CSS3
• More about Pagination Templates in CSS
• CSS Regions W3C Specification
• Javascript Prototype

CSS Custom Filters for Cinematic Effects

Formerly known as CSS Shaders, CSS Custom Filters are meant to be an easy way to create cinematic experiences for the web. The need to create more dynamic, expressive content is growing. To deliver that content today, web developers often resort to scripts, flash or some type of plugin.

CSS Custom Filters will allow advancements in effects developers can add to content through simple CSS like grayscale, sepia tone, hue-rotate, blur, drop-shadow, saturate, warp, bend and rotate. This means writing just a few lines of code instead of writing or hunting a lengthy script to create a folding map or a stack of slightly bent playing cards!

To learn more about CSS Custom Filters, check out these sources:

• Explore CSS FilterLab
• Download Code & Samples on GitHub
• CSS Custom Filters W3C Specification

Be sure to check back for a second post detailing additional promising and exciting tools in the world of HTML and CSS.

Photo Credit: jainaj

Jesse is a Web Developer at Kuno Creative who regularly contributes his technical expertise to Kuno's blog. He carries a Master of Science in Mass Communcations and has more than three years of experience in web development and design.