Since my knowledge of CSS3 is fairly shoddy, I decided to create and release a CSS3 “click chart” or “help chart” (for lack of a better term) that displays examples of some of the newest features in CSS.
The initial release only has 8 examples, with more to be added in the future. Each example visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.
The box that opens gives a description along with browser support, an external link (usually W3C info), and some example syntax taken from the CSS of the page itself.
The CSS3 properties included are:
- box-sizing
- border-radius
- shadows
- RGBA colors
- multiple columns
- HSLA colors
- gradients
- multiple backgrounds
I don’t claim to be a CSS3 expert, but I thought this would be a good way to gradually compile all the newest CSS3 properties, along with info on each, so I can start learning them myself and use them in future projects (gracefully degraded, of course).
Please offer your comments on any that are missing, or any corrections. The click chart is best viewed with Chrome or Safari.
Nice set of examples. I couldn’t help but notice that the hsla values that you give in your CSS are converted into either rgba or hex values by the browser, I wonder why that is?
Hey Russell,
I’m not exactly sure what you mean. The syntax for HSLA is:
background: hsla(207,38%,47%,.8);
So, that’s what you’ll find in the CSS. What did you see that indicated that something was being converted?
Great css chart. Thanks
Don’t know where you got the idea that Opera uses proprietary CSS properties, because it doesn’t. It never has used any “-o-property” rules and AFAIK they are not intending to.
Hey Scott,
First, I haven’t done much testing at all in Opera, but I do plan to do so when I update the chart. Also, it’s not true that Opera hasn’t used proprietary CSS. In fact, they explain some limited use of it in this article:
http://dev.opera.com/articles/view/opera-9-5-the-next-generation-of-web-s/#css3
The reason I added the -o-property references to most of the properties is to ensure that any supported by Opera would work. I don’t know which ones they now support, and which ones they don’t. Plus, some of them they will support natively without proprietary prefixes, so those will work fine. I was just playing it safe. It’s an experimenatal page that I’ll be updating often.
Update:
I’ve gone through and removed the -o references in the CSS, except in the case of “box-sizing”, because evidently it was used at some point in Opera.
It seems that Opera has very little CSS3 support, even in version 10.10.
Very informative. Thnx
Hi. Thanks for your post.
But, you had one problem.
‘Gradients’ and ‘Multiple Background’ example are same code.
Please check example code.
Lee,
Nice catch, thanks for spotting that. I’ve corrected it.
Hey! This is a nice cheat sheet. What makes it best viewed in Chrome or Safari? Looking at the CSS Firefox is doing everything that the WK* browsers are doing. What’s missing in Firefox?
Hey Christopher,
I’m glad you asked about that, because it reminded me to update to Firefox 3.6. When I created the chart, I was using Firefox 3.5, and the last two items (gradients and multiple backgrounds) were not showing up in Firefox. What’s interesting is that the gradient looks different (different color, different direction) than in the other browsers.
Anyhow, I’ve now changed the “best viewed” line to specify browser versions. Thanks!
Thanks! We’re generally closer to the final spec than the other browsers since we were doing our work based off the proposed spec.
Re: the colors: what’s the test case? I don’t think we’re doing anything odd there with color profiles vs. other browsers. (We’ve got proposed changes that would bring us into line with the what the CSS specs say instead of what every browser does, but that’s a different story.)
Hey Christopher,
When you left the first comment, I didn’t realize you worked for Mozilla. Thanks for commenting on this.
And about the colors, I really don’t know why there’s a difference. I haven’t had time to look at it in depth yet, as I just upgraded to 3.6.
I’ll probably take a look at it when I do some updates to include more CSS3 enhancements in the chart.
Hey Louis,
Here’s why they look different between Webkit and Mozilla… the declarations are different:
background: -webkit-gradient(linear, left top, left bottom, from(#4a6378), to(#ccc), color-stop(0.5, #fff), color-stop(0.5, #6d94b4));
background: -moz-linear-gradient(right, #340000, #B78330 70%, #FEFDA1);
Also, for the HSLA colors, it seems like code inspectors(FireBug, Chrome’s built in inspector) convert the HSLA color to the nearest matching RGBA color. Whether or not this would cause unexpected results is beyond me, I’m generally content using hex or RGBA for my colors.
Jason, you’re right. I have no idea why those ended up different. I must have pasted the wrong code, or else I assumed the gradient declaration was the same for both browsers.
I’ve changed the gradient, and I’ve also included some proprietary code to get Internet Explorer to recognize it. Thanks!
Is it coming in-built with adobe dreamweaver? (CSS3). If it is yes, which version is that?
I posted this to another post of yours and then saw that you wanted the comments here later. So here you go. :)
Have you seen this already?
http://css3please.com/
That site has a solution for rotating elements in IE too. And other features as well. I think you might find it interesting.
I have, and I’ve mentioned it in a few of my articles and comments on this site and others. Definitely a useful site, thanks.
Louis, it’s very useful. I’m adding it to my tutorial site’s “toolbox.” It’s also useful to display it in a browser and see exactly what is and isn’t supported just by looking. This is probably most useful for Opera 10.5, which is what I use, and which supports most, but not all, of the properties in your chart.
You’ve done a more thorough job than you may have realized. :)
nice demos. however…
“word-wrap: break word” only works on a fixed width container. if you have a fluid layout, the long line will still try and force it’s way outside the container. there doesn’t seem to be any fix for wrapping long lines. the obly option i can find is to chop the line off with “overflow:hidden”.
Louis,
You might like some of the CSS3-based graphics code samples here:
http://code.google.com/p/css3-graphics/
Oswald
Keyframe Animations are supported in Firefox 5.