Why CSS will never catch up with design
Why CSS will never catch up with design
Join the DZone community and get the full member experience.Join For Free
Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.
As someone who experienced the rise of css3, there once was a time I bought into the hype. I was told that css3 was going to make our jobs easier, after all it was conceived to fill a few obvious design gaps that proved quite demanding to achieve with css2.1 (if you're wondering what I'm talking about, just think rounded corners, drop shadows and other (by now) simple visual effects). And for a while the future looked quite rosy indeed. If you were able to do cutting edge front-end development (ie not having to worry about legacy browsers and all round css support) development was actually quite easy. At least, for a short while.
But with css3 gaining more momentum every day, and with an ever increasing range of browsers/versions supporting the newly introduced properties, a different reality is slowly developing. If you still believe rounded corners and drop shadows will pose the main challenge of visual web design in the years to come, better take some time off to reconsider the future of your job.
the design axiom
Graphical design is a complex balance of functional and aesthetic requirements that compliment each other to create both a distinctive and pleasant experience. For a graphical web designer, these requirements are often a real burden on their creative freedom, so creativity comes from multi-dimensional rule-bending and playing around with smaller details. After all, from a functional point of view a button should always look like a button and when you're designing for a specific client you need to stick to a strict graphical styleguide, so you can't do much there to really distinguish yourself.
That's why you'll see that many design trends in web design are often focused on smaller visual cues. Just think of rounded corners, vertical stripes, obvious transparency effects, text-shadows, flaps and whatnot. These are all design-hypes of the recent past that defined modern (generic) site designs, up until the point where everyone was using them and designers were forced to find something new to play around with. If you're looking at the near future, expect subtle animations, uneven drop shadows, triangles and similar elements to pop up all around the web.
So recently I was faced with two interesting design challenges in the small freelance project I mentioned earlier. Simple visual tidbits on paper, but once I sat down to put them into practice it quickly became obvious that even with the current css3 propositions it would be quite a challenge to get them to work. Here's what I was supposed to do:
- 1. make a transparent search box in a full-width header that has a background color. Underneath the header is a (moving) background image which should shine through the transparent part of the search box.
- 2. create a box with a transparent background which uses the color multiply effect from Photoshop. Again the box lies on a moving background image.
The first challenge is tricky because you can't cut holes in a background, especially not if this needs to be done by a deeper-lying (dom-wise) element (the search box positioned within the header). The second challenge is simply impossible to do in css, though some tricky canvas wizardry might help you out there.
css left in the dust
One key problem is that css development is currently aimed at fixing existing shortcomings. We look at design elements that are hard to accomplish with our current css standards and we try to find solutions to fix those shortcomings. But once these solutions exist, there is only a very short period of time where we can happily use them to make our job easier. At the same time, these very elements are become stale and boring at a frighteningly fast rate.
That's the exact moment when designers set out to find new elements to distinguish themselves from their peers, starting the whole cycle anew. Mind you, it's not that we suddenly lost the need for rounded corners and drop shadows, but these elements simply degraded from actual eye-catchers to common design elements. So even if css design could almost immediately match designer's demands, it still wouldn't fix our problem. It's even impossible to try and outsmart designers by adding new graphical options they haven't been using so far, as the bottom line is always the same: once a design trend picks up, designers will look elsewhere for inspiration and the trend will pass just as quick as it surfaced.
The web is here to stay and browser competition is more alive than ever. A couple of years ago development was slow, but these times seem to be officially over. In the coming years we'll see many design hypes as sites and companies will invest more energy in trying to distinguish themselves from the competition. css standards will face the impossible task to keep up with these trends and css developers will still need to enter hacky territory to create that one visual effect that others will find hard or even impossible to accomplish. Until the code is broken of course, and a new design trend is needed.
The bottom line for the front-end developer is clear. Even though the css spec will keep expanding, designers will continue to come up with elements to challenge the reigning design standards, to set their designs apart from the competition. And the harder something is to accomplish, the more exclusive a design will be. It's an interesting realization that offers both job security and a lifelong career of stress and challenge. Hopefully you are ready to face that challenge.
Gone are the days I believed that css development would be made easier by new, upcoming standards. The only thing that changes is the base standard of web designs, which will continue to grow more complex and challenging. It's actually a rather comforting realization, but one that is necessary to keep yourself from getting disappointed by the work people are putting into the css-X spec. They do a great job though, even when they are constantly two or three steps behind the demand.
Opinions expressed by DZone contributors are their own.