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
About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?
Just as an addition on the selectors: I really like using Keith Clark’s ie-css3.js script for giving, well, IE CSS3 selector support based on your library’s (assuming you’re using one) selector support:
http://www.keithclark.co.uk/labs/ie-css3/
Some notes — RGBa works fine, but RGB should be also added, for backward compatibility with browsers that do not support the alpha transparency in backgrounds (or you may call it “Declaring a fallback color”).
So declare first RGB rule, then RGBa rule. IE8/7/6 (which does not support RGBa) will “see” the RGB rule and ignore the RGBa rule. Other modern browsers will see both rules, and the RGBa will prevail, since it comes after the RGB one. This “trick” will save you from some trouble…
Also — text shadow is cool, but adding shadows to other elements is a good idea, too, as long as the design works and looks fine with and without the shadow (again, we must take into account that this CSS3 property is not supported by IE8 or older).
Just my $0.02
Ive used rounded corners on some elements but am not going any further with CSS3 untill it has proper cross browser support. Dont get me wrong i think theres some really great ideas and possiblities, i just think there a bit further down the line.
I’ve been waiting for multiple backgrounds since the first time I ever used CSS in my life. The fact that it’s essentially a reality now is still surreal. Can’t wait for the day when 90+% of the browsers in use fully support it without question. I know a lot of people say w3schools’ stats are crap, but as of May they claim that IE6/7 only makes up 16.2% of the total market. That’s progress.
It also depends on the users that a website attracts. w3schools gets mostly tech-savvy or geeky visitors that are much less likely to use Internet Explorer, especially something less than the most current version.
My own business website gets about 60% of visitors on Firefox, 25% on IE8, and the remainder split among many of the other offerings out there. My political blog gets about 50% on IE7, 20% on IE8, and 10% on Firefox. A bakery website that I operate gets a whopping 70% on IE7 and 23% on IE8.
Those are just a few examples, and that data is taken from Google Analytics.
It is a lot like using Alexa or Compete to determine a website’s traffic. It all depends on the demographics. Certain groups of people are more likely to have their toolbar installed, and the sites that those people visit will far outrank sites that really have 20x more traffic.
wow… nice piece of information.
I was searching for creating a quick resource sheet for own use and found this post very useful for my needs.
thanX for @Jason & @Michel for u r valuable additions….