67.20% of pages uses CSS in one way or another. But how is it used?
Figure 19 shows, that most often only external stylesheets are used. But practically the same amount of pages use external stylesheets in combination with inline styles.
63.43% of pages with CSS uses some external CSS file. But almost the same amount of pages (61.51%) uses inline styles.
How is CSS connected to HTML.
<link> designates the use
of external stylesheets, not only linking external sheets with
link element, but also external CSS imported with
72.2% of pages with external CSS link only one CSS file, 17.9% links two files, 4.0% three and 3.9% four. The remaining 2% uses more than four external stylesheets.
Figure 20 shows how external CSS is usually larger in size than CSS inside HTML. Inline and embedded CSS in contrast follow quite similar usage pattern.
Figure 20. Comparison of code sizes between external, embedded and inline CSS. The CSS in external files is usually larger than CSS inside HTML.
So, what are the most common CSS properties? Figure 21 gives a listing of most popular properties out there.
Figure 21. Most frequently used CSS properties.
The top 5 of CSS properties consists entirely of typografical
tools. Not many web designers out there, who accept the browser
default settings. But the shorthand property
appears only in the code of 13% of CSS-using pages. I guess this is
font has the most complex syntax of all CSS2
attributes – even I prefer not to use it, although I know the syntax
The word “color” probably wasn’t the best choice for a property
describing the color of text.
font-color would have been more intuitive – in the result
set thousands of pages used either of those. Although as much as I
tested on various browsers neither
font-color seemed to have any effect at all.
There is no graph for this property, but you can check out the values for this and many other properties from css-properties.txt.
As figure 22 clearly shows, most pages use either pixels or points to designate the font size. And both of these units are considered bad practices for that purpose, especially points, which make no sense at all in web context.
Another interesting thing to note from that figure is the
significant number of pages using integer value for this property –
being not allowed according to W3C, this is entirely the fault of
browser vendors, as practically all browsers interpret integer value
for this property as if it had
Looking at the font size keywords reveals, that decreasing the font size is clearly more common than increasing it.
What kind of values are used with the
Most pages use either pixels or points.
Many of you have probably seen the combination:
font-faily: Arial, Verdana, Helvetica, sans-serif;
Well, these are the four most common font family names you come across in internet. (See figure 23.)
From the set of generic font family names
monospace are used mostly.
fantasy are really rare.
If you look at the figure, you see some quite popular fonts like
the lack of proper quoting in constructs like this:
font-family: Times New Roman, serif;
Figure 23. 50 commonest font family names. Dark bars indicate generic font family names.
The commonest use of this property is probably removing the underlines from links, but adding the underline is very common too. (See figure 24.)
Common values for
Note the invalid value
No real surprises here. Making text bold is more common than
removing the boldness. Some pages also make use of the integer values
lighter keywords, which
aren’t quite consistent across browsers. Three last values in figure 25 are invalid.
How is the
font-weight property used?
The situation with
width is somewhat similar to
font-size as both properties designate lengths. Although
points are used rarely, integer values are quite common (again
interpreted as pixels by browsers, but invalid according to CSS
recommendations). (See figure 26.)
Most frequent value types of
As the text is aligned left by default, it’s no surprise that it
isn’t the most popular one. Maybe only the
in figure 27 should be less tall, as
justification doesn’t work well in web.
The values used with
I could go on and on with describing all the CSS properties listed on figure 21, but the less-popular ones aren’t that interesting plus the properties described above pretty much should give the overall picture. So instead I will continue with looking at CSS units in general.
But for those of you with in-depth interest to CSS properties and their values, css-properties.txt contains all the property-value combinations that appeared in the selection more than 1000 times.
The following figure 28 resambles figure 25 which described the
font-size property. The high volume of pages using points
on the following figure is probably the result of
font-size being used so heavily, that if effects the
general statistics of CSS units.
Figure 28. Which units are used in CSS? Most pages only use pixels.
Colors are on the majority of pages specified with
syntax. The next in popularity is
#rgb and almost as popular
is the use of keywords. Most unpopular was the use of
The most popular color was white, followed by black, red, blue and yellow.
As seen from figure 29, most pages use GIF in CSS background images. JPEG is not so frequent and PNG is quite rare.
Figure 29. Image formats in CSS background images.
Figure 30. Most frequent CSS selectors.
The first figure clearly shows, that the most frequently used
selectors are the selectors of CSS1, except the pseudoclasses
:first-line, which don’t
have a lot of use. Håkon Wium Lie mentions these constructs in he’s
CSS as features, that could have been left out from the
specification without significant loss:
However, the cost of implementing these features far outweighted the benefits of the visual effects they provided.
The element selector definitely deserves it’s place as the most frequently used selector – almost 80% of pages with CSS make use of it. But the class selector is without no great reason about three times as popular as the ID selector; ID is even less popular than the descendant selector.
Of course it’s no surprise, that the link-related pseudo classes
are in the top list,
:hover being the first as there is
no HTML-alternative to style this status.
All the other selectors belong to CSS2 (or even CSS3) and as these
are not supported by the widespread IE6, webpages also make no
significant use of those. Even the universal selector (
the only one in CSS2 supported by IE6, gains only a little more usage
than the child selector, which has no support in IE6.
It will be interesting to see if and how these graphs are going to change when IE7 finally reaches the market.
Figure 31. Less frequent CSS selectors. Continues the previous figure.
As mentioned before: the main activity with stylesheets is altering
the default look of links (color, underline). The following figure 32 makes this even more clear – almost
90% of CSS-using pages select element
body is on the second place, but the gathered data
doesn’t show weather it’s there because of setting some general
properties for the whole page (like
color) or just to adjust the margin and padding of the
body element. I’m afraid of the latter.
I think I don’t have to mention which common practice the 50% of
td refers to.
For some reason there is a lot of styling of
elements. The following
h3 seem to me like more appropriate targets for styling.
But I guess if we would count all the different headings as one general
h element, they would largely outweight the selecting
p, maybe even
Figure 32. How frequently are different elements selected with CSS.
The selection of URI-s used for this research had one significant problem: some larger sites were represented with a lot of URI-s (e.g. there were thousands of cnn.com subpages) refering to pages with quite similar markup, many of them pointing to the exact same CSS files. One might think, that counting the code from one site about 10,000 times will make the results of the research too much a reflection of that site's code, and this thought certainly isn't wrong. But on the other hand, it wouldn't be quite fair to give to the one-page site of Bob Noname the same weight as to the multimillion-subpage site of microsoft.com. It's not a problem with a simple solution...
But what has this all to do with class selectors? Quite a bit, because when you look at the figure 33 containing most frequently used classnames, many of them do not reflect the general usage of class names in web, but the number of CNN sites in the selection for example.
Even with that kind of classnames removed, I don't count the data
on that figure quite trustworthy – some of those large pages might
have also contained much more generic class names like
header making them appear more
frequent than they really are.
All the shortcomings aside, you are still welcome to compare the results with the class names statistics of Google Web Authoring Statistics and John Allsopp's Semantics in the wild. But you should also note one of the main differences between this and those researches: this statistics is based on the classnames gathered from CSS files, while the others have counted classnames in HTML.
Figure 33. Most frequently used classnames. The classnames which clearly originate from some particular site are marked with white columns.
Happily, the big sites don't seem to make a lot of use from ID selectors, so the statistics shown in figure 34 are much more trustworthy.
The figure clearly distinguishes the top three ID names from the
header are also in the top three of John Allsopp’s list
of most frequent ID-s (if you exclude some quirks like
Figure 34. Most frequently used ID-s. The ID-s which clearly originate from some particular site are marked with white columns.
Clearly the most popular at-rule is
almost as frequently as all the others added together (See figure 35.)
@font-face are not very rear
Interestingly many pages made use of at-rules, that aren’t part of
CSS specifications. As much as I managed to find out, the rules like
@list are Microsoft Office or some other MS product
Figure 35. Relative frequency of different CSS at-rules.
Only 40.92% of pages with CSS were using valid CSS2. This doesn’t mean all the other pages use invalid CSS – some of them might be using CSS1, CSS2.1 or CSS3 syntax which is not part of CSS2. But as the previous statistics has shown: not many pages make use of CSS not part of CSS2.
But what about pages that use valid (X)HTML? One would think that a page with valid markup will mostly contain valid CSS too. And indeed, in the set of pages with valid HTML, there are more pages with valid CSS, but the difference is not that big: only 51.39% of pages with valid HTML have valid CSS.
Figure 36 shows the distribution of pages by different CSS validator error messages per page. Happily the most frequent is no errors at all.
Figure 36. Distribution of pages by different CSS validator error messages per page.
16 most frequent error messages are given in the following figure 37. Explanations of the error message numbers are given in the following text.
Figure 37. Most frequent error messages of W3C CSS validator.
Kirjutatud 12. juunil 2006.