Blog

CSS3 – what is it, and how V2 will use it

December 12, 2011 9:05 pm / by / 14 comments

CSS3 – the next generation of Cascading Style Sheets

What is CSS?

is forging the path ahead for web designers and users alike. Many conveniences are offered by CSS3, especially to web designers. As designers we are now able to easily implement basic visual elements such as custom fonts, drop shadows, opacity and rgba options, hover transitions & transforms, box shadows, rotation, multiple backgrounds, and quite a bit more…….yes, you can even animate with CSS3 all without heavy (and not unnecessary .png files). I’m not saying that .png images are gone forever! I’m merely stating that CSS3 has its place and that it can quickly and easily upgrade a sites look while being flexible for future site updates.

One small problem – not ALL browsers support this amazing language, at least not yet.

While it seems like a no brainer to use CSS3 at every turn possible, we must be very careful as designers to not over-use such design elements as the drop shadow. Just because we can, doesn’t mean we should. Additionally – our friends over at the W3C are still hatching out a master plan for just what to do and how to use CSS3. You see, not ALL of the browsers support every new feature which is why as designers we have to use vendor prefixes which allow us to target specific browsers. For instance when we use the property “box-shadow”, we would have to write our style like this:

.myClass {

-webkit-box-shadow : 4px 4px 10px rgba (0,0,0, 0.5);

-moz-box-shadow: 4px 4px 10px rgba (0,0,0, 0.5);

-0-box-shadow: 4px 4px 10px rgba (0,0,0, 0.5);

box-shadow: 4px 4px 10px rgba (0,0,0, 0.5);

}

-webkit: is a vendor prefix targeting Safari.

-moz: targets Mozilla Firefox.

-o: targets Opera.

We always list the bare-bones property “box-shadow” at the end of our rule so that when the geniuses at the W3C do get their act together, and when browsers begin to universally adopt “box-shadow” as a standard element, we will ensure that our style sheets are geared towards the future!

Where is Internet Explorer?

Well, unless your using IE9 or lower your users will be out of luck. Internet Explorer has many similarities to the US Government – they are both large powers, have much influence, and generally are inefficient and bog the system down. IE 9 is actually doing some pretty good things, and fortunately Mozilla has gained quite a bit of market share, but older versions of IE just don’t display these beautiful CSS properties. So, as designers we must consider our market when implementing these rules in addition to how critical it is that these rules are visible. As a rule of thumb I generally abide by the idea that those fortunate users that are using Firefox, Chrome, or Safari, will be able to enjoy these subtle and sometimes bold features and enhance the overall experience of the site. Ensuring that your styles deprecate gracefully to less worthy browsers (ahem, IE 6-8) is a fine art but critical to having a site that is usable and appeals to a broad market.

All is this is very interesting, albeit exciting, but how does this benefit clients of V2?

More importantly, how will this benefit our clients clients?

1) V2 designs its styles so that users with modern browsers can ENJOY what we have built while keeping in mind that there will be many users still using older versions of Internet Explorer and ensuring the sites overall usability for everyone.

2) By targeting browsers with vendor prefixes, such as -moz, V2 is able to ensure your site is ready for the future. Its only a matter of time before the W3C adopts CSS3 as the standard, but why wait until then? We don’t, and we wont.

3) By using CSS3 your site will look modern and professional. Your clients will say “Woooooooooooowwww.”

4) And lastly, Its just the right thing to do. As a web designer I really like to see things that reduce the amount of code you need to use, makes your code cleaner, and reduces the overall weight of your site. These are among the many other benefits of utilizing some of CSS3’s features.

Disclaimer: I am currently using CSS3 on this site =)

This article is intended to educate V2 Media Designs client base about the potential benefits we provide all our clients. Please post any questions or concerns below regarding any information you like/dislike about this article.

 

0 Comments

You can be the first one to leave a comment.

Leave a Comment

 

— required *

— required *