Simple Rounded Buttons in Opera with SVG-infused CSS

One of the important considerations of the new typeoneerror.com was that I'd not care as much cross-browser rendering issues or, more pointedly, "how things look in IE." That being said, I used many fun CSS3-style techniques such as border-radius:

-moz-border-radius:8px;
-webkit-border-radius:8px;

Safari (and Google Chrome, being both based on Webkit) and Firefox render my buttons and highlighted navigation buttons with rounded edges beautifully, and the rest of you get squares – it degrades pretty nicely. I did want to know whether Opera had any support for these "hacks." I'd heard of -opera-border-radius and -o-border-radius but they didn't work for me. The latest alpha version of Opera has full support for border-radius, but here's how you can achieve the exact same effect using simple SVG and pointing to those files in your CSS.

Our goal is to approximate the look created by our navigation button in browsers that support border-radius:

/* part of our navigation button definition **/
#nav ul li a {
    background-color:#03FFC1;
    border-radius:8px;          /* CSS3 */
    -khtml-border-radius:8px;   /* Some linux-based browsers */
    -moz-border-radius:8px;     /* Firefox > 3.1 */
    -webkit-border-radius:8px;  /* Safari */
}

Using XML-defined SVG, you can define a shape that you can use as a background image in CSS. Here, for example, is the definition of an SVG shape for the highlighted navigation button. Here's what the file I created (nav.svg) looks like:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <rect x="0" y="0" rx="8" ry="8" height="100%" width="100%" fill="#03FFC1" />
</svg>

Quite simply, this defines a rectangle that will scale (width/height 100%) to fill our background and has a corner radius (rx/ry) of 8. Now if I wanted to apply this to my nav buttons above:

/* use css "hacks" to target opera */
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0){
    #nav ul li a {
        background:url(../img/nav.svg);
    }
}

You simply have to point the background of the element to the svg file just like you would an image. Won't be long now until all major browsers support border-radius; won't that be nice. I also looked in to getting something going for Internet Explorer and found this behavior script for IE that works really well. I'd only recommend it if you only have a few elements that need round edges. On the pages where I have a lot of buttons that have round corners, it took up to 10 seconds to process. Interesting idea though.

December 21st, 2009 | Permalink