CSS 3 border-radius, box-shadow, Conditionals, Browsers, and Validation

First, if you haven't already, read up on the rounded-border property:
http://www.css3.info/preview/rounded-border/

and you might wish to also see:
http://www.css3.info/preview/box-shadow/

For now, if you wish to have Firefox support the new CSS3 border-radius property that does rounded corners, you need to prepend the property name with "-moz-" but, as you've discovered, it won't validate with this prepended. So we need to hide this style from the validator by only serving it to Firefox. But Internet Explorer conditionals only work with IE, so ... PHP conditionals to the rescue!

You could first create a class for rounded corners and drop shadows. Yes, I know, perhaps naming the class this way violates purity, this makes it easy to demonstrate:

.roundedcorners { -moz-border-radius: 10px; -moz-box-shadow: 2px 2px 8px #333; }

Save this as a style sheet. Name it "firefox.css". (You will probably wish to adjust these values to work with your design.) Put it in your css folder, of course.

Now, in your page's head section, place this PHP conditional code:

<?php $ua_ok= $_SERVER['HTTP_USER_AGENT']; if( eregi( "firefox", $ua_ok ) ) { echo ( '<link rel="stylesheet" href="/css/firefox.css" media="screen" type="text/css" />' ); } ?>

Note that the path to the style sheet is an absolute path. You will need to adjust this path to point to your css folder if you are trying this on webhawks, of course.

But, hey, why stop there? Just as Firefox 3.5 does, Safari 4 (and I think most versions of 3) also supports these CSS3 properties in a similar manner. Safari, like Chrome, is a webkit-based browser, so the CSS3 property names need to be prepended with "-webkit-". So create another style sheet called "safari.css" and place this code in it:

.roundedcorners { -webkit-border-radius: 10px; -webkit-box-shadow: 2px 2px 8px #333; }

Now let's add to the PHP conditionals code. So here's the longer code to work with both Firefox and Safari:

<?php $ua_ok= $_SERVER['HTTP_USER_AGENT']; if( eregi( "firefox", $ua_ok ) ) { echo ( '<link rel="stylesheet" href="/css/firefox.css" media="screen" type="text/css" />' ); } ?> <?php if( eregi( "safari", $ua_ok ) ) { echo ( '<link rel="stylesheet" href="/css/safari.css" media="screen" type="text/css" />' ); } ?>

So now users of the latest Firefox and Safari will see your rounded corners (with drop shadows), everyone else will see the same old regular corners, and the CSS validator won't see the code that is only served to those browsers.

This is how I'm doing the rounded corners and drop shadows on my TeacherJohn site, and why it still validates.

And this logic can be extended to other browsers that support CSS3 properties. I have not yet researched and tested it on Chrome, or Opera ...

===============================================================================

OK, for the sake of completeness, let's also have more fun. Explorer may not support some of these fun properties yet, but there are many times you need to serve IE special styles to make it do the right thing. So you may wish to create a separate style sheet for IE8, IE7, and IE6, and use IE conditionals to serve those styles only to those browsers. IE has its own conditional statements that only work with IE for just this reason. So after creating these IE style sheets, you can place this code in your head section:

  

OK, now let's assume that you want to use all this stuff ... and that you also have a main style sheet. What would the head section look like now? Putting it all together:

<link rel="stylesheet" href="css/main.css" type="text/css" />

Remember that if you have conditionals that point to these style sheets, you really should have a style sheet in your css folder for each one, even if the style sheet is blank, so that link checkers and validators don't bark at you for bad links. For example you may not yet have discovered an issue with your site and IE 8, but you may wish to have the blank style sheet at the ready so that you can quickly code a fix without hassling with the conditionals. That way, when someone says "I just looked at your site in IE8 and the headline is too far to the right" you can open the IE8 style sheet, add a margin shift rule, and you're done!

For more information

Coming …