CSS3

As we announced with our second Platform Preview last year, IE9 supports CSS3 Media Queries. CSS3 Media Queries enable you to style pages based on different display surface factors such as width, height, orientation, resolution, etc. Developers can use these factors to customize their sites for viewing on different devices such as a small-screen netbook or a widescreen monitor. In this post, I talk more about CSS3 Media Queries and the various scenarios they enable…

Ladies and gentlemen, it is the second decade of the third millennium and we are still kicking around the same 2-D interface we got three decades ago. Sure, Apple debuted a few apps for OSX 10.7 that have a couple more 3-D flourishes, and Microsoft has had that Flip 3D for a while. But c’mon – 2011 is right around the corner. That’s Twenty Eleven, folks. Where is our 3-D virtual reality? By now, we should be zipping around the Metaverse on super-sonic motorbikes…

Just because you didn’t get to go to that awesome conference doesn’t mean that you can’t still watch the lectures! Each weekend, we’ll feature a recommended web development lecture on Nettuts+.

In this recent lecture, from Fronteers 2010, Håkon examines the history of CSS3, its current status in the browsers, and what the future of CSS holds.

CSS3 gradients aren’t something new, but because of cross browser incompatibility, they weren’t used that much until now.

However, you should know that they are available to use in Safari, Chrome (Webkit) and Mozilla Firefox (from 3.6) browsers.

With this post I will show you how to use CSS gradients for some major browsers: Firefox, Safari, Chrome and IE (surprise!).

Currently CSS Transitions have been developing slowly with the W3C (World Wide Web Consortium) moderating discussion with other browsers, but support has rapidly grown in the past year. Safari and Chrome are leading, while the most recent build of IE and FireFox are lacking. Internet Explorer 9 (currently in beta) is probably not going to have CSS 3 transitions. IE’s lack of support is about as surprising as opening up a refrigerator to find food. On the other hand, it’s quite odd that FireFox hasn’t added CSS transitions yet.

With the myriad of devices, web browsers and screen sizes out there, we need a way to to be able to easy detect how we want to layout a web page for them. This is now offered to us through Media Queries in CSS3.

CSS3 Media Queries will help you retrieve information about the device/web browser accessing your web page, and from there you can decide how you want the content presented in the best manner according to its capabilities…

The new properties in CSS3 give us more scope for creating more powerful design features with very little effort, many of which were previously only available through JavaScript or Flash. This example uses the :target selector, a healthy dose of CSS3 transitions and the general sibling combinator to create a modern user interface.

I’ve created a few charts showing CSS3 support in IE9 Beta. The list does not include every conceivable CSS3 property or selector. I’ve tried to stick to the well-known stuff, and I’ve also included a list of pseudo-selectors and pseudo-elements. Most of the information is taken from this page on MSDN.

During an argument with a developer today I, in a roundabout way, arrived at the question ‘are CSS3 gradients Fool’s Gold?’ The argument itself is somewhat irrelevant and far too long winded to go into here, but the long and short of it was that he was trying to force some crazy CSS3 syntax into doing something that only a background image should be used for.

CSS3 opens up new avenues for design and creativity on the web, with the ability to better control the display of content through the browser. One of the major areas of improvement in CSS3 are new methods that can be applied to text and typography to create unique results.

We’ve gathered up some way cool CSS3 typography experiments for you to check out, and hopefully inspire you when using CSS3 in your own projects.