RSS LinkedIn Google Plus

Call us: 0800 014 9884

The evolution of CSS

Web development is a really exciting area to work in for a lot of reasons: it’s varied, it’s got the potential for your work to be seen on a huge scale and it’s always changing. In fact, it’s changing faster than most people will notice, as new ideas are incorporated into the latest versions of browsers, letting designers who want to experiment try them out before they are available for more widespread use.

One of the most dramatic areas showing innovation at the moment is the whole CSS3 drive, which takes Cascading Style Sheets (the technology used to position and style elements on web pages), and adds a whole bunch of extras. Some of these features you’ve probably seen: rounded corners on boxes, for example. It sounds like a really simple thing, but until the “border-radius” property was added to the CSS specification, it took various images and positioning tricks to accomplish.

The CSS3 specifications aren’t expected to be finalized for quite a while yet, but that doesn’t mean you won’t start to see more little touches in website styles – even the “current” CSS2.1 specification isn’t finalized, but it’s implemented in most current browsers. The standards process used means that browser developers are encouraged to incorporate new ideas for testing well before the specification in final, so any issues can be worked out, and adjustments made without breaking existing sites.

If you’d like to see if any websites are using these experimental properties, try installing Google Chrome, an alternative web browser which gets updated very regularly.

Here are a few things to look out for:

For developers, a good resource to check on how many people are likely to be able to see these touches is CanIUse, which shows which browser versions support a whole range of “advanced” features.

Depending on the site in question, it might be acceptable for such cosmetic touches not to work fully, whilst giving an extra shine for users on more advanced browsers; these techniques tend to have the advantage that they degrade seamlessly.

To illustrate the appearance of CSS3 in different browsers, I have included three screenshots showing varying degrees of functionality.

CSS3 in Chrome

In Chrome, all the effects are working fully: the page has columns, the image on the left is rotated and has a shadow, and the image on the right has a reflection and a shadow

CSS3 in Firefox

In Firefox, most of the effects work, but the image on the right doesn’t have a reflection. Using a tool such as Modernizr, it’s possible to detect the lack of reflection support, and adjust the style to remove the empty space where the refection would appear – we’ve not done this here for purposes of demonstration

CSS3 in Internet Explorer

In Internet Explorer, none of the advanced effects work. There are no columns, the images aren’t rotated or reflected, and they don’t have shadows. However, the content is still all accessible, despite not looking as intended

Written by Matthew Pettitt

Yahoo urges Firefox users to switch from Google Wednesday 25th of March, 2015by Dan Moores Firefox users who have manually set Google as their default search engine are now confronted with the following message: "Yahoo is the preferred search engine for Firefox. Switch now."

More on this story »
james_riches_swap

March UK search market: Google halts Bing’s recent rise Wednesday 8th of April, 2015by James Riches Google’s UK search market share rose for the first time in five months during March. Elsewhere, Google announced some key developments and lots of us searched for Jeremy Clarkson news.

More on this story »

Bing implements one small change and one big change Tuesday 14th of April, 2015by Dan Moores Over the past week, Bing has implemented two changes. One appears to be directly influenced by Google, while the other demonstrates independent thinking and creativity.

More on this story »
theEword - 17 hours ago

Learn how to run a successful #digitalmarketing campaign from an award winning agency. http://t.co/dMxXLswEcg http://t.co/DWCVwrgz8N

Reply Retweet Favourite
theEword - 22 hours ago

#Digitalmarketing tip: Make your ads stand out #PPC > http://t.co/u7xFm61dir http://t.co/METuHZsDjb

Reply Retweet Favourite
theEword - 2 days ago

Experienced in #digitalmarketing? Grow your career as our Client Strategy Director > http://t.co/dqr20PJWgV http://t.co/NuEr8NmPuJ

Reply Retweet Favourite
theEword - 3 days ago

This time last week we were busting some #digitalmarketing myths. Missed it? Read this > http://t.co/XGpdQlam5C http://t.co/p3kbJFLtQe

Reply Retweet Favourite
theEword - 3 days ago

Content is at the heart of the buyer journey. Are you getting it right? #contentmarketing http://t.co/0XKA6blSru http://t.co/xm0qrZbJ3Z

Reply Retweet Favourite

Light a Fire with Hems de Winter Thursday 19th of March, 2015by Andy Williams Hems de Winter, CEO of de Winter PR, joined Light a Fire for an in-depth chat at BoConcept’s showroom on Great Ancoats Street, discussing his life and career.

More on this story »

Five tips: how to write clear web copy Thursday 2nd of April, 2015by Dan Moores A lot of web copy is unclear and needlessly complicated. It can actually damage your sales because it helps no-one. Here are five ways to make your web copy clear and engaging.

More on this story »

Google joins theEword to demystify digital marketing Monday 27th of April, 2015by Andy Williams Google joined us to help dispel some common marketing myths at our Discovering & Demystifying Digital event held in Manchester's Northern Quarter. Find out more.

More on this story »

Who loves theEword

Who loves theEword Who loves theEword