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 gives businesses new features Wednesday 25th of February, 2015by Martin Lindley Google has revealed two new features for businesses: one allows the use of chat features within the search engine results, while the other allows the selection of search display pictures.

More on this story »

Google to start warning users on slow sites? Thursday 26th of February, 2015by Andy Williams Google is reportedly testing a system which will warn users of slower websites by flagging them up with a red “slow” label within its search results.

More on this story »
james_riches_swap

February UK search market share: Bing breaks 7% barrier Monday 2nd of March, 2015by James Riches Last month, Bing continued to increase its share of the UK search market, jumping above 7%. Meanwhile, celebrities generated a lot of searches in a busy month for entertainment.

More on this story »
theEword - 20 mins ago

YouTube music awards 2015 will feature exclusive videos: http://t.co/cMUHfvMAGp

Reply Retweet Favourite
theEword - 18 hours ago

Fancy a job in account management with a leading digital agency? Here’s your chance. Learn more about the role here: http://t.co/YOXrjnc0n6

Reply Retweet Favourite
theEword - 22 hours ago

Digital marketing tip #6: Stop putting Google first http://t.co/vBFOoo1NCR http://t.co/QjsYq0j82r

Reply Retweet Favourite
theEword - 22 hours ago

February UK search market share: Bing breaks 7% barrier http://t.co/IH1bira5Ce

Reply Retweet Favourite
theEword - 1 day ago

BBM gets custom PINs and Android wear support: http://t.co/kPwgU6C3wk

Reply Retweet Favourite

Five ways to ensure you're writing great content in 2015 Friday 6th of February, 2015by Dan Moores 2014's Google algorithm updates made it very clear that 'Google-friendly' and 'reader-friendly' are starting to mean the same thing. We need to impress audiences, not search engines.

More on this story »

What do you need to know about your prospective customers th... Tuesday 10th of February, 2015by Sian English Do you really know the right things about your prospective customers? The more you know, the more targeted you can be with any marketing activity, and, the faster your business will grow.

More on this story »

Starstruck: lessons from Hollywood on how to write content t... Wednesday 25th of February, 2015by Martin Lindley The stars have something that we want. You know the answer. They have attention. But is there anything Hollywood uses to get attention that we can also use? Yes. Let me explain.

More on this story »

Who loves theEword

Who loves theEword Who loves theEword