Web Design with HTML and CSS

Tools to identify browser problems

Lesson 9, Browser Compatibility 209

What about browsers that don’t support radius properties? Our suggestion is to

evaluate the importance of the design elements to your page. For the example of the

rounded corners, if a square box fi ts with your design, you can leave the box as is. If

not, you will need to research other solutions, such as creating a conditional comment

style sheet for Internet Explorer. This style sheet might target the boxes that use border-

radius and add a background image with rounded corner graphic. A solution such as this

requires an investment of time and eff ort, and you need to evaluate whether you or your

client are willing to invest in it.

CSS3 features

The radius property covered in the last exercise is one of many new features available for use.

Other CSS3 features that are available depending on the browser you are using are drop shadows

(currently designated as text-shadow), multiple background images, the RGBA color standard

(which allows you to set the opacity of colors), web fonts (the ability to embed custom fonts

into a page), multi-column layout, animation, and much more.

CSS3 Resources

http://www.fi ndmebyip.com/litmus/

A useful site that identifi es the browser you are using and its support for CSS3 properties, and

provides you with a chart listing more than a dozen current and old browsers and their support

for CSS3 properties.

http://www.css3.info

This site has a CSS Preview section demonstrating CSS3 features available in browsers today as

well as a weblog that tracks developments, books and articles related to CSS3.

http://www.alistapart.com/articles/understanding-css3-transitions/

An introductory tutorial to CSS3 transitions which provide the fundamental basis for animation

using CSS instead of Flash or JavaScript.

With the number of current browsers in use today that do not support CSS3 features, you
should consider the time you can spend adding these features to your site. You will also
need to learn the vendor-specifi c properties (such as the -moz border-radius used in the
previous exercise) so you can use them in your sites. Lesson 11 examines the use of CSS3
with mobile design and CSS3 media queries.