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

Google to start labelling mobile-friendly sites Wednesday 19th of November, 2014by Dan Moores Google has announced that it will add the label 'mobile-friendly' to sites that are easily navigable on smartphones, in an effort to further improve the search experience for mobile users.

More on this story »

Google settles online abuse case Monday 24th of November, 2014by Martin Lindley Google has reached settlement with a businessman who was the victim of a sustained act of internet trolling. The search engine may have linked to over 3,600 pages of malicious content.

More on this story »

Sony Pictures systems seized by hackers Tuesday 25th of November, 2014by Dan Moores Sony Pictures staff computer screens in US offices were reportedly taken over by the image of a menacing red skeleton and a message from a group that introduced itself as "#GOP".

More on this story »
theEword - 7 mins ago

We are passionate about knowledge share and can’t wait to share snippets straight from Google with you on Monday http://t.co/HjF13a09zo

Reply Retweet Favourite
theEword - 50 mins ago

We're partnering with Google for an event looking at digital trends for 2015 next week. More info here: http://t.co/etwwXV1fwq

Reply Retweet Favourite
theEword - 23 hours ago

Next week we’re co-hosting a session with #Google on digital marketing trends for 2015 and how you can grow your business online!

Reply Retweet Favourite
theEword - 24 hours ago

ICYMI: Read last week's blog on the final #LightAFire14 of the year. http://t.co/ka7Nnu4rsx

Reply Retweet Favourite
theEword - 5 days ago

Thanks again to everyone who came to #LightAFire14 this week. Read all about the event in this blog post: http://t.co/ka7Nnu4rsx

Reply Retweet Favourite

theEweekly Wrap: 21 Nov Friday 21st of November, 2014by Martin Lindley This week: Google uses giant billboard, Facebook launches groups app, and Couple get TripAdvisor fine.

More on this story »

The final Light a Fire of 2014 Friday 21st of November, 2014by Dan Moores For the fifth and final Light a Fire of 2014, Liane Grimshaw joined Dan Nolan in the cosy Library room at the Great John Street Hotel, sharing career anecdotes and wise advice.

More on this story »

Digital trends for 2015 on the agenda at our Google Partner ... Wednesday 26th of November, 2014by Dan Moores The Google North event will discuss the digital trends that will shape 2015, giving valuable insight into the ways in which businesses will be able to maximise the online presence.

More on this story »

Who loves theEword

Who loves theEword Who loves theEword