Web Design with HTML and CSS

206

Tools to identify browser problems

Web Design with HTML and CSS Digital Classroom

To avoid this issue, the fi rst solution would be to replace this image with another fi le format.

The GIF format also supports transparency to a degree, but not as well as PNG fi les.

PNG supports a form of transparency called alpha transparency. This means that areas that have

less than 50% opacity remain transparent. The GIF format only renders anything that is less

than 50% opacity as a solid color.

Modifying your images to address the PNG transparency issue is possible, but it can be

ineffi cient. You would need to identify all graphics that currently use transparency and then

change them, and it sacrifi ces the use of interesting visual eff ects in modern browsers not

available in Internet Explorer 6. However, given that Internet Explorer 6 is approaching its

10-year anniversary, designers and developers have adopted solutions to this problem. A few

diff erent JavaScript solutions exist that forces Internet Explorer 6 to render transparent PNGs

as if they were used in a newer browser. You can add a reference to this javascript fi le to force

IE6 to show all images that use PNG transparency as intended.

The solution we recommend for the transparent PNG issue is named DD_belatedPNG. The

explanation on how it works is beyond the scope of this book. For details and instructions on its

use, go to http://www.dillerdesign.com/experiment/DD_belatedPNG/.

Browser incompatibilities in the future

Throughout this lesson, we have studied the issue of browser incompatibilities, particularly the

issue of older browsers that do not render correctly compared to the current browser. However

web browsers are constantly evolving, as are the languages of HTML and CSS. This means

that there are new issues to resolve. In the race to include increasingly sophisticated features

and to address the growing importance of mobile devices, designers now are able to use new

CSS3 styles that add useful eff ects, such as rounded corners, transparent colors, and animation.

However, some of these new features are supported in certain modern browsers, but not in

others. In the next two lessons you will learn more about this situation, but here is an overview.

Future browser compatibility issues

HTML and CSS are continuously evolving languages. The original CSS code supported

features that traditional HTML could not. For example, using CSS, you could add borders to

any side of a box and then style the color, thickness, and pattern. However, the styling needs