Some Nifty CSS3 Properties That Degrade Nicely

I’ve been using a lot of CSS3 lately and some people have wondered how that’s possible when we all still have to support IE. The truth is, the website doesn’t have to look the same in IE as it does in every browser. Especially now that IE’s marketshare isn’t as high as it used to be and the fact that most users won’t even notice a few missing features.

For example, if you look at this site in IE7/IE8, you’ll notice that the active dividers on the navigation don’t work and the numbers & gray patterned background don’t work. The rounded divs in the sidebar are square, and the color inside of them aren’t transparent. But this isn’t really noticeable to the common user – or even to myself (the one who designed and built it).

So, don’t be afraid to use CSS3 – the site will still work fine in IE, it just might not be as fancy. The only items I caution are advanced CSS3 selectors. If you’re using these to add styles in, then it’s fine; however if you’re using advanced selectors (like last-child) for layout purposes, it will, of course, not work in IE.

Most of these are shared on my codesnipp.it account, but in case you’re not on there, here’s a few of my favorite CSS3 styles I’ve been using lately.

Cursor highlight/selector styles

This changes the styles of the text when the user highlights them.

/*Firefox*/
::-moz-selection { color: #fff; background: #44708C; }
 
/*Safari/Chrome*/
::selection { color: #fff; background: #44708C; }

Multiple Background Images On One DIV

I use this for the active state in my navigation (the two dividers around ‘Blog’ are two separate background images).

#nav li.active { background: url('images/activeDivider.jpg') no-repeat left, url('images/activeDivider.jpg') no-repeat right; }

Rounded Corners

An obvious CSS3 one, but one that I use regularly.

/*Standard version for IE9, Safari 5, Chrome*/
div { border-radius: 12px; }
 
/*Firefox*/
div { -moz-border-radius: 12px; }
 
/*Safari*/
div { -webkit-border-radius: 12px; }

Opacity on background only

The regular opacity rule is almost useless as it makes everything inside the element transparent. The opacity in RGBa, however, only makes the background transparent (it’s what I use in my sidebar).

/*Makes a white background at 35% opacity*/
div { background: rgba(255, 255, 255, 0.35); }

Text shadow

I use this one a lot as well, but I try to keep it very subtle. No need to return to the Crap 2.0 days.

div { text-shadow: 0px 0px 1px #666; }

Your favs

Share some of your favorite CSS3 properties 🙂

image by mr.throk