Overview

The best way to approach the challenge of browser compatibility is to explore it for yourself. We'll do this in two ways for this assignment:

1. Investigating Websites that report on browser implementation of XHTML;
2. Doing the same on browser compliance with CSS.

One way to see how well different browsers do their job is to check the research published on the Web. In this section, you'll be researching browser compatibility with features of XHTML.

Browse to this site and carefully examine the features of XHTML each browser supports:

• Index DOT Html: http://www.blooberry.com/indexdot/html/index.html

Reading information from Index DOT Html

You may find Index DOT Html information a bit difficult to understand at first. Here's an illustration followed by an explanation:

To read the Index DOT Html info, go to the site, click on "HTML Support History", and do the following:

1. Check each tag listed in the column to the left. For example, "A Href" is the first tag listed. In the columns to the right, you'll see the HTML and XHTML standards history information, which you can skip over.
2. To the right of that are the columns on browser support. Four browsers are listed: IExplorer, Mosaic, Netscape, and Opera.
3. The version number under the browser indicates the earliest version of that browser that supports the tag. For "A Href" the listing is 1.0, 1.0, 1.0, 2.1. This means that the A tag with Href attribute was supported in Internet Explorer 1.0, Mosaic 1.0, Netscape 1.0, and Opera 2.1. All later versions of the browsers continue to support features, so you would count one tag supported for each of the browser versions you're tallying because they are all later versions than the ones listed. You may find it helpful to check the Index DOT Html "How to Read These Pages" page: http://www.blooberry.com/indexdot/misc/how2read.htm.

What to Do:

1. There are several pages of information at this site, so it will help to make rough notes as you go through each page. The information you'll want to keep track of is:
• Which browser versions are listed. The site may not be up to date with the latest release of a browser, so you'll have to make a note of which versions you're counting. You'll need to count the two latest versions of Internet Explorer, the latest of Netscape or Mozilla, and the latest of Opera.
• How many tags (entities) are shown. Note: This site lists tags and the attributes of each tag supported by various browsers. For this assignment you need only count the tags - not the attributes.
• For each of the four browser versions, count how many tags are implemented.
2. Create a report page using the form in file x24h-html.htm.
   1. Save the page to your disk or storage medium.
   2. Open it in your favorite HTML editor.
   3. Change Sarah Strong's name to your own.
   4. View the page in a browser (any browser!) and print it for your convenience - you may find it easier to enter information on the printed page rather than in HTML.
3. Fill in the information required in your x24h-html.htm page, replacing the "__" with the relevant numbers.
4. Calculate the percent compliance for each browser by dividing the number of entities implemented by the total number of entities listed. Then multiply by 100 and round off. This example uses fictitious numbers:
   

   ...............................[snip]............................... MS Internet Explorer, latest version listed: 5.5 Number of features implemented: 97 Number of features not implemented: 22 Total number of features described on this site: 133 Percent Compliance: 73% ...............................[snip]...............................

   
   The calculation is done this way:
   

   97 ÷ 133 = 0.72932330827067669 0.72932330827067669 x 100 = 72.9323308270676691729 Rounded = 73%

5. Complete Task 1 by briefly summarizing your observations:
   • Which browser supports the widest range of XHTML tags?
   • Are there certain tags, types of tags, or features that are not widely supported, and hence should not be relied upon?
     

Here's a more direct approach to seeing whether browsers handle the features you want them to: you can test them yourself, using a test suit. A test suite is a set of carefully designed data sets to help determine if a software product is able to handle standard challenges. Test suites are used to determine the standards compliance of many different types of software. In this case, W3C has created a set of Web pages to test whether a browser can handle each of the specific requirements of Cascading Style Sheets.

What to Do:

1. Carefully read the "Prologue" to the Test Suite at http://www.w3.org/Style/CSS/Test/CSS1/current/sec00.htm.
   Notes on "CSS1 Test Suite: Configuring Your System":
   • If you've used your browsers to test your own CSS assignments, and you know they are responding to the CSS, you won't have to configure your browser to show style sheets. Browsers in the INP labs (and most other WCC labs) are configured to enable style sheets.
   • It is unlikely that you've created user-defined style sheets for your browsers at home or work, but if you know you've done that, you'll need to disable them as discussed in the Prologue - or simply use the computers at WCC.
   • The section on "Units and Monitor Settings" applies primarily to older sytems; you may skip this.
   When you reach the end of the first and second pages, click [Next] and continue reading until you reach "CSS1 Test Suite: LINK and @import". This is the first actual Test Suite page. Note: In some older browsers, you may not be able to access the "LINK and @import" page but you can continue with Section 1 in a moment. Read on here...
2. You will put two browsers through the CSS Test Suite. Choose:
   1. One old browser, version 4 or earlier. (INP labs have Netscape 4.8, so you may want to do this part in an INP lab.)
   2. One new browser, such as:
      • Internet Explorer 6
      • Netscape 7
      • Opera 7
      • Mozilla 5 or Firefox 0
3. Create a report page using the form in file x24h-css.htm.
   1. Save the page to your disk or storage medium.
   2. Open it in your favorite HTML editor.
   3. Change Sarah Strong's name to your own.
   4. Enter the names and version numbers of the two browsers you've chosen to test.
   5. View the page in a browser (any browser!) and print it for your convenience - you may find it easier to enter information on the printed page rather than in HTML.
4. Start the browsers for the test:
• If possible, launch the older browser and the newer browser together.
• If you have only one browser available, test the newer browser first.
5. Open the first CSS Test Suite page: http://www.w3.org/Style/CSS/Test/CSS1/current/sec10.htm in each browser.
   Note: in the older browser, you may have to click a "Test" link to view each test page.
6. Test Procedure: In each test suite page ...
   1. Read the general information given at the top.
   2. Count the number of test-items on the page. Each test-item is usually a paragraph or a list item. (Sometimes, you're lucky and the items are numbered for you!) Most of the test-items begin, "This sentence should be..." or "This list should be..." or similar wording. Count items in the "TABLE Testing Section" too, if there is one. Put the total number of test items in the second column of your form, labelled "Items Tested".
   3. Read each test-item; it will tell you what the item should look like if the browser is handling CSS correctly. Decide whether the browser you're using is displaying it right, and:
      • If the item is displayed correctly, count it "supported" and keep a running-count of supported items;
      • If not, do not count it "supported".
   4. When you've read the entire page, put the number of "supported" items in the table data cell next to that page in the column for the browser you're testing.
   5. Click the [Next] link at the top of the page and repeat the test procedure.
7. If you were unable to test both browsers at once, repeat the test using the other browser you chose.
8. Total up the numbers, using a calculator if you like:
   • Total number in "Items Tested" column
   • Total number in "Older Browser" column
   • Total number in "Newer Browser" column
9. Calculate the percentage compliance of each browser
   • Older browser: divide the Total Older Browser by the Total Items Tested, move the decimal point two places right and round to the nearest whole number.
   • Newer browser: divide the Total Newer Browser by the Total Items Tested, move the decimal point two places right and round to the nearest whole number.
   • Put your results in the appropriate cell on your report.
10. If you've been writing these numbers down on paper, you'll need to enter them in the HTML version. Replace the "__" with the relevant information in each table data <td> cell.
11. Finish by entering your answrs to these two questions, based on your observations while testing CSS features:
    • What are the advantages and disadvantages of directly testing browsers using this test suite, as compared with researching information as you did with HTML compliance?
    • What features of CSS would you recommend using, based on which have been most widely supported over time?

When you're done, double-check that the assignment meets the specifications above. There should be no more underlines "__" left in your document.

Upload your two files, x24h-html.htm and x24h-css.htm, to your WCC student Website, and send email to the instructor with the URI. Be sure your email meets the formal requirements: name, class, section and exercise (X24h), and that it follows standard business-email practice.