CSS usage test

From SiteRay wiki

SiteRay Test
First appeared:	Sitescore 1.0
Applies to:	All versions
Type:	Individual test
Scored:	Always

What does it do?

Test whether webpages are built properly using CSS.

Why is it important?

CSS is a standard means of building webpages that delivers massive benefits over the previous 'table-based' technique, including:

• Faster to load
• More consistent over different web browsers
• Easier to maintain
• More accessible

Since 2001, it is virtually unheard of for a website not to use some CSS. However, this test checks that pages are built using it properly for layout, and not just to perform cursory functions (such as change font size).

Example results

At the top of this test, you can see pages which don't use CSS for layout:

Note that in this example web addresses have been concealed.

Further down, it is possible to inspect individual styles which are applied:

How is it measured?

Each page is analysed in turn to determine whether it uses CSS properly. The score is based on the proportion of pages which use CSS, with a small deduction if any using CSS overrides were used.

Pages with virtually no content (e.g. redirection pages) are ignored.

Technical explanation

The test compares <div> and <span> tags, styles applied to them, and <table> tags. A complex algorithm weighs these factors and determines whether the page is using a CSS layout or not.

Usually the hierarchy of elements is a good indicator of whether a page is built using CSS. For instance:

<div>
  ...
  <table>
  ...
  </table>
  ...
</div>

Is usually a CSS layout, containing a table, whereas:

<table>
  ...
  <div>
  ...
  </div>
  ...
</table>

Is usually a table-based layout containing CSS. These are simple generalisations, the algorithm we use is more sophisticated.

Common problems

The algorithm (and indeed the problem) is not exact. There exists a very small number of pages for which a human being would struggle to say whether the page is using CSS or tables for layout (for example, pages where the layout is largely in CSS, but another web designer subsequently added extensive regions in tables). These instances will tend to err in favour of a positive CSS result.

How to improve this score

Make use of CSS for the layout of pages. If this is not already the case, this usually requires a complete redesign, and can be quite difficult.

How to use this test effectively

Use this test to understand whether or not a website is built using CSS, and to ensure that all new websites are built entirely using CSS.