CSS3 opens up a whole suite of web design features that make things that used to be
a chore incredibly easy.
Unfortunately, despite the benefits of CSS3, there’s still very little support across browsers for many of the properties and selectors. The biggest browser culprit is Internet Explorer, particularly IE8 and below, which continue (painfully) to hold the largest percentage of the web user base.
Illustration by Galit Weisberg
The good news is that many CSS3 properties and selectors have great support across the board in Firefox, Chrome, Safari and Opera.
The lack of IE support doesn’t mean that you should shy away from CSS3 all together. Instead, consider targeting the browsers that do support CSS3′s features, while being aware of (and at times providing appropriate alternatives to) the limitations of IE8 and below.
This advice is particularly relevant to websites that want to prove that they’re modern, fresh and embracing new technology; whether that be a designer’s online portfolio, a web app or a boutique company.
And if you’re a web designer, there’s no excuse for not getting on the CSS3 train and preparing yourself for better cross-browser compatibility in the future.
Here’s a few very basic features you can consider implementing now, that won’t necessarily compromise your website in IE8 and below:
Box Shadow
*Supported in Firefox (v3.6+), Safari, IE (v9+), Chrome and Opera.
Creating drop shadows with images has been messy and troublesome in the past, so it’s no surprise that the CSS3 box shadow property has quickly become a favourite amongst web designers.
While a drop shadow on layout elements can help create a feeling of depth and modernity, it’s not usually something that will affect the basic functionality of a website, so it’s safe to implement as long as you are aware of the fallbacks.
How to use Box Shadow
#element {box-shadow: h-shadow v-shadow blur spread colour inset;}The code for Box Shadow is relatively straightforward, but it’s important to note that for now you’ll also have to use prefixes for Webkit and Mozilla (i.e. to allow the effect to work across all supported browsers).
-moz-shadow: 1px 1px 2px #000;-webkit-shadow: 1px 1px 2px #000;box-shadow: 1px 1px 2px #000;
The Alternative
If a drop shadow is important to the usability of your website, you shouldn’t be implementing it with CSS3. So, if you choose the CSS3 route, the best fallback for this property is to simply make peace with not having a drop shadow in IE8 and below.
What about RGBA?
Good question! RGBA is fantastic when used in combination with the box and text shadow properties, as it allows you an alpha channel; meaning, you can set your shadow colour as black (or similar) and let opacity do the rest! RGBA’s support range equals Box Shadow, so what are you waiting for?
box-shadow: h v b rgba(r,g,b,a); For alpha, 0.5 = 50%Border Radius
*Supported in Firefox (v3.6+), Safari, IE (v9+), Chrome and Opera.
Finally, rounded corners without images or Javascript! Rounded corners with CSS3 can be achieved with only a few lines of code.
How to use Border Radius
border-radius: 5px
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
The Alternative
Like Box Shadow, you might have to make peace with your layout having sharp corners in earlier versions of IE, but if you’re set on rounded corners, you can always stick with the Javascript solution.
These are just a few of my favourites
Want to learn more about CSS3 compatibility?
Check out Find Me By IP’s browser support information here.
About Joelle
