Working With CSS3

CSS 3.0 modules and selectors have been implemented into the most recent update of many popular web browsers, including Firefox 3.5, Safari 4, and Google Chrome. Unfortunately Internet Explorer doesn’t support CSS3. Regardless of the IE fallback, I have decided to implement a number of new CSS3 features into my redesign. I recently updated my style sheet to add border-images. See the horizontal lines on my sidebar?

I used the new “-moz-border-image / -webkit-border-image” to make the necessary changes from a 1px solid line to a 2px repeating image for the bottom border of list elements and other various places. The code is after the break.

#sidebar li ul li {
border-bottom:2px solid #E8D9BD;
-moz-border-image:url(“/images/line_yellow.png”) 0 0 2 0 round;
-webkit-border-image:url(“/images/line_yellow.png”) 0 0 2 0 round;}

This code draws the bottom border of each list element. The image is 2px high x 1px wide, so therefore I set the “border-bottom” property to 2px (high) and it repeats horizontally based on the border-image syntax.  This draws the bottom border image beautifuly and as I wish, but there is only one problem I have with it. I have little control of the size when it degrades into non-css3 browsers.

In order to set the image properly, you need to define the height of the image in the “”border-bottom” property. When the image fails to load (in IE for example) the browser renders the style set of the “bottom-border” property. The result is a 2px border drawn to the length of the list. See example below:

If the browser being used fails to support CSS3, I would like the browser to draw a 1px border. The 1px border is similar to the image I am using, and is what I migrated from. So essentially I want to be able to set a “fallback” style.

When I change the code to:

#sidebar li ul li {
border-bottom:1px solid #E8D9BD;
-moz-border-image:url(“/images/line_yellow.png”) 0 0 2 0 round;
-webkit-border-image:url(“/images/line_yellow.png”) 0 0 2 0 round;

I get the following results:

The results are what I want in non-CSS3 Internet Explorer, but now the Firefox CSS3 border-image is 1px, and not what I want. Grrr… I guess IE users will see my website differently than the rest.

It would be nice if the “border-image” property was used as an ‘overriding primary’ and the “bottom-border” was used as a ‘fallback’ – so that way the degredation between browsers would be smooth and offer more control to the developer. I dont like how the “border-image” property is dependant on the “border” element size syntax.

I am willing to take the risk for IE users, becuase to be honest, I want to stay ahead of the game and learn CSS3 now so that when it is finally released, there won’t be much of a learning curve. Plus anyone who knows anything about web design and development, isn’t using Internet Explorer as their default browser. That being said, if you’re reading this on IE, take the time to download and try out an alternative browser like Firefox, Safari, or Chrome.

More info on CSS3 and the Border-Image element