Lesson 9: Browser Compatibility
Browser testing is necessary because different web browsers render HTML and CSS code differently. In this lesson, learn to determine how much testing is necessary for any given project, as well as techniques for fixing browser issues or incompatibilities.
What you’ll learn in this lesson:
• Testing your browser
• Using different browser testing tools
• Using conditional comments with Internet Explorer
• Dealing with future browser compatibility problems
Starting up
You will work with several files from the web09lessons folder in this lesson. Make sure you have loaded the weblessons folder onto your hard-drive from www.digitalclassroombooks.com/webdesign. See “Loading lesson files” in the Starting Up section of this book.
 |
Why browser testing is important
A web browser is a program that renders HTML, CSS, and JavaScript files according to a set of rules built into the application. Although web browser manufacturers use the recommended guidelines of the Word Wide Web Consortium’s specifications for HTML and CSS, they can interpet these rules as required for their own purposes. Browser manufacturers can also add their own rules to the specifications to add features to their browsers that are not available in others.
Are web pages required to look the same in all browsers?
You can divide the answer to this question into two categories: 1) Technical considerations and 2) Time/budget considerations.
In the case of technical considerations, you must determine whether you could achieve your goal of making a web page look the same. For example, the earliest browsers, such as Internet Explorer 3 or Netscape 3, don’t support cascading style sheets.
For these browsers, you couldn’t apply the CSS layout techniques you learned in the previous lesson. In the case of time/budget considerations, you might find technical solutions to make your pages look the same, but if it takes you more time than you have allotted to identify and fix the problem you should determine whether the solution is worth it.
 |
|
Your SmoothieWorld layout in a modern browser (left) versus Netscape Navigator 3 (right). |
Attempting to make web pages look the same in multiple browsers is not as important as you might believe, due to several reasons:
• People browse the web in different ways.
• Monitor resolution. A website on a 17-inch monitor never looks the same as on a 27-inch monitor.
• Text resizing. Users can override the page layout by increasing or decreasing text size.
• Mobile devices, which represent a growing proportion of web browsers.
Who demands that pages look the same or is it something else when there are such inherent differences? Sometimes, it’s designers with previous experience in the world of print design, because they are used to a single version of their work and might attempt to duplicate this experience with their site. Client expectations are often a factor as well, because clients are quite often less technically oriented than the web designer, so it becomes important for the designer to communicate exactly what will be delivered as well as the options.
Choose the level of browser support you want
The level of browser use partially accounts for your decision to support it. For example, you might find evidence that only 0.5 percent of all global browsers are Netscape Navigator 3, so you would decide not to spend much time designing for it.
The choice of which browsers to support becomes more difficult with more recent browsers. A good example is Internet Explorer 6. This browser was released in 2001, making it approximately 10 years old upon the publication of this book, yet it still remains a relatively popular browser. There are a number of reasons for this: Internet Explorer 6 was at one point the most popular browser in the world; some estimates gave it a market share of 80-90%. Many websites were designed with IE6 as the standard; in some cases, features found in the browser were tied directly into the functionality of the site.
|
Examples of Microsoft-specific features include DHTML extensions, ActiveX controls, and proprietary JavaScript. |
As a designer, this could have an impact on your work. Recent estimates put the worldwide market share of Internet Explorer 6 between 15 and 20%; however, this number is hard to verify, and the incidence of IE6 amongst your client’s target audience could be significantly higher. This scenario is not unusual, many corporate environments still use a combination of Windows XP and Internet Explorer 6. If your job is to redesign or add to a company’s intranet (an internal website not accessible to the public), you would be targeting an audience that mostly uses IE6.
The special case of IE6
As noted earlier, Internet Explorer 6 is a 10-year-old browser, Internet Explorer 7 and Internet Explorer 8 have been released, and by the time this book is published, Internet Explorer 9 will likely be on the market. For the reasons mentioned in the previous paragraph, you should be prepared to support IE6 if required. However, there is a trend in the world of web design to stop optimizing for Internet Explorer 6. Companies such as Google have publically stated they will no longer support IE6. For large companies, this means they can free up resources to improve their websites, rather than spend resources to solve the layout and other problems that can add time to the development of a site.
 |
|
A visitor to Youtube (owned by Google) will find a targeted message stating that Internet Explorer is not supported. |
Additionally, the capabilities of web browsers have improved since 2001, when Internet Explorer 6 was released. Modern browsers are faster and support new features that users of Internet Explorer 6 will not see. Still, for many website builders, it is often a business decision. If a client asks for a site that works well in Internet Explorer 6, you will need to deliver.
Even Microsoft itself has gotten into the business of phasing out their own browser. www.ie6countdown.com is a site launched by the company to help designers and developers track the decline of the browser.
Given an unlimited budget, many clients might choose to support the IE6 audience, but if budget and time is limited, you should clearly explain the available options and trade-offs to your client. For example, to support IE6 or to spend the same time and money to optimizing their site to take advantage of modern browsers and the growing mobile device market. As you will see in Lessons 11 and 12, we will help you frame that argument in our discussions of designing for mobile devices and using modern techniques, such as HTML5 and CSS3.
Tools to identify browser problems
The first step in testing your page design is to view it in the desired browser; however, this isn’t always easy, for various reasons. For example:
• You might not have access to the browser, which is a common problem when testing for cross-browser compatibility.
• Different Windows operating systems might not allow multiple versions of Internet Explorer to be installed on the same system.
 |
|
Microsoft provides guidance on their website for users who need multiple browsers on a single machine. |
A common solution is to have access to a separate computer. Many web designers invest in an inexpensive computer mainly used for testing. However, this option may not be practical for several reasons:
• Inefficiency. There might be a time lag involved in continuously changing computers.
• The debugging process involves making many small changes. It could become tedious to change computers after every change.
Virtualization solutions for the Mac OS
One way to avoid the time and investment of a separate computer for browser testing is to install software on your primary computer that allows you to switch operating systems. This ability is known as software virtualization and refers to the ability to add secondary operating systems to your computer. For example, recent Mac OS X versions have this capability built in with Apple Bootcamp.
Apple Bootcamp
Recent versions of Apple Bootcamp allow you to install a Windows operating system (XP, Vista, or Windows 7) on your computer, but you still need to purchase the Windows license independently. Although this option is useful, it still has drawbacks. To switch from one operating system to another, you must restart the computer. This introduces a time lag similar to moving to a second machine that is not necessarily efficient.
 |
|
Learn more about Apple’s Bootcamp at www.apple.com/support/bootcamp. |
Parallels and VmWare Fusion
Parallels and VmWare are software virtualization programs for the Mac that allow you to run Windows operating systems without the need to restart your computer. The benefit is the ability to quickly switch operating systems, which is much more efficient in the browser testing process.
Virtualization solutions for Windows
As noted earlier, there is no equivalent on the Windows operating system to Apple Bootcamp or Parallels/VmWare Fusion, so if a Windows computer is your primary device and you need to test your designs on a Mac, you will need a separate computer, or explore some of the alternative options discussed later. However, there are Virtual Machine options that allow you to install separate versions of the Windows system on the same computer. For example, you could have Windows 7 with a modern browser as your primary system, and a virtual machine that runs Windows XP with Internet Explorer 6.
Windows Virtual PC
Windows Virtual PC is Microsoft’s native virtualization tool that allows you to install one or more virtual machines on your system. The process is fairly straightforward; however, you need sufficient system resources, such as hard-drive space and memory, to make this a viable option.
Browser compatibility applications
Software virtualization programs have many benefits, but they are better utilized for more than just testing web browser. An alternative is to use a browser testing application or service whose only job is to test web pages. Although the details differ, the basic concept is the same: to provide “snapshots” of your web pages in different browsers.
Adobe BrowserLab
Adobe BrowserLab is an online service that you can use as a stand-alone product or in conjunction with Adobe applications, such as Dreamweaver CS5. BrowserLab lets you preview your page in a number of different browsers and platforms, so you are not limited to Mac or PC. The basic steps are to enter the URL of the page you would like to preview to generate a screenshot of the page. Once the screenshot is generated, you can compare the screenshots if you define multiple browsers.
 |
|
Adobe BrowserLab with a split view of Internet Explorer 6 on Windows XP (left) and Safari 3.0 on OS X (right). |
Microsoft SuperPreview
SuperPreview is a standalone software application connected to Expression Web, Microsoft’s web editor. SuperPreview works much the same way as BrowserLab, but it can preview your web pages locally. SuperPreview can define different browsers for comparison. There are significant benefits if you want to test your pages for problems with Internet Explorer 6, since SuperPreview has the code for the IE6 browser built into the program. SuperPreview is a Windows application that only uses the browsers installed on a local system, but it also has a network feature similar to BrowserLab to let you view your page using Safari on OS X.
SuperPreview also features measuring tools and different modes that highlight suspected elements on the page that are likely to be the source of a problem. SuperPreview will not solve the layout issues, but it helps you to easily identify them.
 |
|
SuperPreview with a split view of Internet Explorer 6 on Windows XP (left) and Safari 3.0 on OS X (right). |
Note that the full version of SuperPreview is not a free product, but Microsoft provides Microsoft Expression Web SuperPreview for Windows Internet Explorer for free. This is a stripped-down version of SuperPreview that you can use to test your pages with a version of Internet Explorer 6 (only IE6; there is no comparison feature).
Addressing browser incompatibilities with CSS fixes
The majority of the problems facing web designers and Internet Explorer 6 are the rendering problems this browser (and to a certain degree, Internet Explorer 7) introduces. The source of these inconsistencies stem from a few places: a different CSS box model than other applications, a problem with floated elements, and lack of support for transparent PNGs and some CSS properties.
In Lesson 8, you were introduced to conditional comments. Remember that a conditional comment is a unique style sheet that targets Internet Explorer browsers (the style sheet is called iefixes.css in the exercise from Lesson 8). Using this method, you would first develop your layout in a browser such as Internet Explorer 8 or 9 (PC), Mozilla Firefox (Mac/PC), Apple Safari (Mac/PC), or Google Chrome (Mac/PC). After you finish your layout, you could test it in Internet Explorer 6 and 7 using one of the methods listed in the subsections above.
After identifying any issues that appear in IE 6 (or 7), you would then find a solution and add a modified CSS rule to the iefixes.css style sheet. Although the majority of major issues are IE6 related, you might also find that IE7 also has rendering problems (to a lesser degree). You can also assign conditional comments to IE7. You will do a hands-on exercise with this later in this lesson, but first, you should review at the structure of conditional comments. The conditional comment you added in the last lesson was this:
<!--[if IE]>
<link href=”iefixes.css” rel=”stylesheet” type=”text/css”>
<![endif]-->
In this conditional comment, you instruct all versions of Internet Explorer to use the style sheet iefixes.css. However, this comment doesn’t distinguish between the different versions of the browser, and a fix that resolves a problem in Internet Explorer 6 could create a problem in the newer version of the browser. In this case, you could use a more specific conditional comment:
<!--[if IE 6]>
<link href=”iefixes.css” rel=”stylesheet” type=”text/css”>
<![endif]-->
In this conditional comment you are targeting only Internet Explorer 6, but none of the other IE browsers. There are several conditional comment operators that let you be very specific regarding the browsers you target with your style sheet. For example, you could have CSS fixes that only apply to Internet Explorer 7 and below (6, 5.5, etc.). Such a conditional comment would appear as shown below:
<!--[if lte IE7]>
<link href=”iefixes.css” rel=”stylesheet” type=”text/css”>
<![endif]-->
This example uses the lte operator, which means less than or equal to.This is a style sheet that you would only use for browser versions 7 and below.
|
Addressing Internet Explorer 6 issues with JavaScript
Addressing the numerous layout issues likely to appear in your page designs is impossible and it is beyond the scope of this lesson, but there are a few recurring issues that we can address in regards to Internet Explorer 6. Conditional comments are not the only solution. For example, there is a well-known bug in Internet Explorer 6 with transparency files in the PNG format.
 |
This image was saved in the PNG file format and has transparent areas (the area to the left and right of the rounded corners and in the bottom half of the gradient). This effect allows you to change the background color of any page element the button is placed on to let the background color show.
Internet Explorer 6 does not support the transparency, so you would see a solid color in the transparent areas.
 |
To avoid this issue, the first solution would be to replace this image with another file format. The GIF format also supports transparency to a degree, but not as well as PNG files.
|
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 inefficient. You would need to identify all graphics that currently use transparency and then change them, and it sacrifices the use of interesting visual effects 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 different 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 file 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 effects, 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 have changed, and they began to look for ways to do things such as create rounded corners for their CSS boxes. The original CSS specification had no way of doing this.
Now you can apply effects such as rounded corners using CSS; however the CSS code for this currently needs to be targeted at a specific browser and Internet Explorer 8 (currently the most popular browser) does not support this effect. The following steps show how the rounded corners effect works.
1 In your text editor, choose File > Open, navigate to your web09lessons folder, locate the 09_radius.html document, and open it.
This is a slightly modified version of the layout you built in Lesson 8. The box in the middle of the main column is a new div and currently has a thin blue border on all four sides; you will now change the radius of the corners.
 |
|
A standard box with borders in CSS has four sharp corners. |
2 In your base.css style sheet, locate the last selector and set of rules for the recipe box. Add the following property (highlighted in red):
#recipes {
width:450px;
float:right;
border:1px solid #909;
margin-right:100px;
-moz-border-radius:24px;
}
The value -moz means this property is targeted for Mozilla browsers and is known as a vendor-specific property. Users with a version of Mozilla Firefox 3 and above will see this box rendered with curved corners on all four sides.
 |
|
If you have a modern Mozilla-based web browser, you will see curved corners. |
Other browsers will not understand this property and the box will remain in its default state. Another browser vendor is WebKit, and WebKit-based browsers, such as Apple Safari and Google Chrome, have their own property for radius.
3 Add the following property and value (highlighted in red):
#recipes {
width:450px;
float:right;
border:1px solid #909;
margin-right:100px;
-moz-border-radius:24px;
-webkit-border-radius:24px;
}
Save your page. If you have a recent version of a WebKit-based browser you would now be able to see the same curved corners as in Firefox. However, this still leaves out all versions of Internet Explorer from 8 and below. With the upcoming release of Internet Explorer 9, there is support for the “official” version of the border radius property which more closely resembles the CSS properties you have been used to working with.
4 Add the following property and value (highlighted in red):
#recipes {
width:450px;
float:right;
border:1px solid #909;
margin-right:100px;
-moz-border-radius:24px;
-webkit-border-radius:24px;
border-radius:24px;
}
Save your file. With these three properties for radius added, you the border-radius property for most browsers. This might seem excessive for one rule, but consider the fact that all future browsers might eventually use the border-radius property. You can view these vendor-specific properties as testing ground for new and useful features. Browser developers might remove some of these features if they prove to be not useful, but other features such as border-radius a standard and form part of every web designer’s toolbox.
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 fits 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 effort, and you need to evaluate whether you or your client are willing to invest in it.
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-specific 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.
Self study
1 Evaluate the different browser-testing options outlined in the lesson. Depending on your platform (Mac/PC), begin testing sample websites or lesson files that you may have worked on.
2 For the CSS3 portion of this lesson, experiment with some of the more supported features, such as text-shadow and RGBA properties. Perform a research online for recently published articles on the web.
Review
Questions
1 What are three ways you can test how your web page will appear on browsers that are not on your platform?
2 What are conditional comments and when would you use one?
3 What are the strengths and weaknesses of using a feature such as border-radius that is currently part of the CSS3 specification and therefore not supported in older browsers?
Answers
1 Three ways you can test your web design on other browsers and platforms are: a) Using a separate computer with an alternative operating system installed. b) Using a “virtual machine” that allows you to install an operating system on your current computer and c) Using a web service or a standalone application such as Adobe BrowserLab or Expression SuperPreview to test pages.
2 Conditional comments are comments that target only specific versions of Internet Explorer web browsers. Conditional comment allows you to create separate external style sheets commonly used to create styles that fix problems with older browsers, such as Internet Explorer 6.
3 CSS3 properties allow designers to add interesting effects, such as border-radius or drop shadows. However, they often require special vendor-specific code that will only work in certain browsers. Additionally, web browsers that don’t support the CSS3 features will not display them. This requires the designer to be careful when using these properties as central design elements.