I have yet to use CSS3, but I've seen a lot of cool techniques you can do with it.

I understand IE still has some issues with it (whats new...), so for anyone who's used the new CSS, is it worth it quite yet to learn the new tricks? Or is it better to wait for more compatible browsers?

I keep wanting to venture into it, but I'm still a bit wary.

CSS3 is not a complete specification yet, so no browser offers 100% CSS3 support. Support on IE is very limited, though things like :first-letter and :first-line psuedoclasses work. Also, there are IE alternatives that can be applied, such as filter: alpha(opacity=50); as a substitute for opacity: .5;

Here's a good compatibility chart that I sometimes refer to: http://www.quirksmode.org/css/contents.html

Just like Abel said.

There are definitely some cool things you can do with css3. Unfortunately it will probably be a few years before there's enough browser support to really use it.

What are the new things that you can do with it?

Well lots of things, check the specifications.

Box-sizing: There have been a long standing problem with the impractical w3c box model, which added borders width and padding to the width of the box. This makes sense, but is impractical in some layouts, especially percentage based layouts where you can't tell the browser to please subtract 1px from the width, so in worst case this would just push your columns around.

The w3c box model wouldn't be a problem if you could do something like width: 90%-4px; But since you currently cant, and since support for Box-sizing is limited, most simply avoid borders and padding, usually avoiding padding by using an additional wrapper, of about 98% width of its parent element.

word-wrap: Very useful feature, even though alternatives exist for older browsers, I.e. The well known cross-browser solution for pre elements.

  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */

A property like word-wrap has long been missed, all browsers should support this property.

Multiple backgrounds: Very useful, will most likely cut down on the divisions needed in highly graphical layouts.

Text-shadow: Less useful, but still worth to mention. Works in Safari last i checked.


So would it be worth to check out, or learn how to use these properties? Honestly, i see no reason why any serious web designer shouldn't know about them already. And that's just some of the properties i find the most useful, there are also properties used for multi-column layouts on the table.

But maybe you are stuck with your WYSIWYG editors, and it prompts you every time you use a property it doesn't know about.


BTW, i would rather use som Alpha Transparent png's, without applying the fix for earlier versions of IE, that is until the css3 property is supported, and i honestly find it very unprofessional by w3c and browser devs, that such properties, or equivalent ain't available yet.

Transparency would be an obvious design goal, and currently we have to fake it with images.

Another one I really want to use is border-radius. It'll let you create curves without the use of images.

Here's a site call CSS3 Info which as you'd expect has plenty of info about CSS3

If you do a search for css3 you'll find plenty of other sites as well.

Yeah, border radius is a nice one. It can be currently used as moz- and webkit- properties for the Mozilla and Webkit (Safari/Chrome) class of browser, respectively, but IE has yet to support it, even for the upcoming IE8.

I'm using it on my site now. On the single post pages I added a border-radius to the info box at the top. Though, now that I think of it I may have only added it for FF and not Safari.

I know IE users won't see the rounded border, but I didn't see any reason to keep the rest of the world from seeing them. I may start doing that more with my site. I'll make sure the design still works with IE. I'm not wanting to ignore IE users, but why not give everyone else a little more if it's simple enough to do.

I'm with you: if it still looks OK with square borders, let IE users have square. Haven't done it much, but I am seeing more opportunity and reason to lately.

Originally Posted by vangogh

Though, now that I think of it I may have only added it for FF and not Safari.

The Safari/Chrome syntax is exactly like the -moz- syntax, except with -webkit- instead of -moz-, so it's easy. A couple of the guys I work with use Chrome pretty frequently, so I pay attention to that set of browsers more and more lately.

Yeah I just can't remember if I used it. Easy enough to check and add if I haven't. I think I set the border-radius on my site just because I wanted to see it with the curves and I use FF. I may have set it for myself.

Usually I don't want to favor one browser over another. I'm not about to use IE specific things just because I can. But I do want to see them adopt more of the standards so I may start using more. I'll always make sure the site still works in IE. I'm not looking to abandon IE visitors, but why not give a little extra to every one else and degrade gracefully for IE.

Showing more advanced sites for advanced browsers has been dubbed "progressive enhancement". There have been several articles recently on A List Apart that are worth reading.

http://alistapart.com/articles/under...iveenhancement general overview
http://alistapart.com/articles/progr...ncementwithcss specific to css
http://alistapart.com/articles/progr...withjavascript specific to javascript

I found these had some great things to say on progressive enhancement, and as CSS3 moves closer to being a final specification, progressive enhancement will become more and more important.

Progressive enhancement when it comes to JavaScript is also commonly referred to as "graceful degradation". I had a client just the other day who had JavaScript disabled, and she didn't even know why. This is much more common that one might suspect, and a simple error message such as "Please enable scripting" inside of <noscript></noscript> is not always enough.

Slightly off topic, but here is a quick tip that will help you degrade properly for users without JS:

<body>
<script>
(function() {
    var body = document.getElementsByTagName("body")[0];
    body.className=(body.className) ? body.className+" js-enabled" : "js-enabled";
})();
</script>

The reason I put this directly after the opening <body> tag is that the script will parse before any of the HTML has been run. It adds a class of "js-enabled" to the <body>, which will allow you to set different style rules based on whether you have JavaScript or not.

The script could go into a common include that contains the <body> tag, and will work even if there is a class on the body already.

I always put reusable code like this inside of a functional enclosure (function() {})(); to keep the variables away from the global namespace.

Thanks for the links Will. I've always considered progressive enhancement to be the same as graceful degradation. I think the name change is because progressive enhancement sounds more positive.

I used to think you had to develop for the least common denominator and I think you still have to make sure your site works for the LCD. You get to define the LCD of course. Lately I think why not add a few extras for some as long as it doesn't take away from the LCD. Maybe if enough sites do that browsers will put a little more into being css3 compliant.

Thanks for the code Abel. Interesting and easy solution.