CSS
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.
Figure 19.
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
@import rule.
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.
CSS properties
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 font
appears only in the code of 13% of CSS-using pages. I guess this is
because font has the most complex syntax of all CSS2
attributes – even I prefer not to use it, although I know the syntax
by heart.
Property color
The word “color” probably wasn’t the best choice for a property
describing the color of text. text-color or
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 text-color or
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.
Property font-size
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 px appended.
Looking at the font size keywords reveals, that decreasing the font size is clearly more common than increasing it.
Figure 22.
What kind of values are used with the font-size property?
Most pages use either pixels or points.
Property font-family
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 sans-serif,
serif and monospace are used mostly.
cursive and fantasy are really rare.
If you look at the figure, you see some quite popular fonts like
times, new and roman, indicating
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.
Property text-decoration
The commonest use of this property is probably removing the underlines from links, but adding the underline is very common too. (See figure 24.)
Figure 24.
Common values for text-decoration property.
Note the invalid value bold.
Property font-weight
No real surprises here. Making text bold is more common than
removing the boldness. Some pages also make use of the integer values
and bolder and lighter keywords, which
aren’t quite consistent across browsers. Three last values in figure 25 are invalid.
Figure 25.
How is the font-weight property used?
Property width
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.)
Figure 26.
Most frequent value types of width.
Property text-align
As the text is aligned left by default, it’s no surprise that it
isn’t the most popular one. Maybe only the justify column
in figure 27 should be less tall, as
justification doesn’t work well in web.
Figure 27.
The values used with text-align property.
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.
CSS units
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
Colors are on the majority of pages specified with #rrggbb
syntax. The next in popularity is #rgb and almost as popular
is the use of keywords. Most unpopular was the use of rgb()
function.
The most popular color was white, followed by black, red, blue and yellow.
Image formats
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.
Selectors
Most frequently used CSS selectors are given in figure 30. The list of less-popular selectors is continued in figure 31.
![E, .class, :hover, :visited, :link, :active, E F, #id, *, E > F, ?, :focus, :?, [foo='bar']](/archive/kool/webstat/figure-30.png)
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-letter and :first-line, which don’t
have a lot of use. Håkon Wium Lie mentions these constructs in he’s
thesis about
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.
![[foo='bar'], E + F, [foo], :first-child, ::after, ::before, [foo^='bar'], :last-child, :first-letter, :not(), [foo~='bar'], :lang(), ...](/archive/kool/webstat/figure-31.png)
Figure 31. Less frequent CSS selectors. Continues the previous figure.
Element selectors
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 a.
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 font and
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
pages selecting td refers to.
For some reason there is a lot of styling of p
elements. The following h1, h2 and
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
of p, maybe even td.
Figure 32. How frequently are different elements selected with CSS.
Class selectors
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
small and 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.
ID selectors
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
rest. content, footer and
header are also in the top three of John Allsopp’s list
of most frequent ID-s (if you exclude some quirks like
BTAMarker).
Figure 34. Most frequently used ID-s. The ID-s which clearly originate from some particular site are marked with white columns.
At-rules
Clearly the most popular at-rule is @import, appearing
almost as frequently as all the others added together (See figure 35.) @media,
@page and @font-face are not very rear
too.
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
specific.
Figure 35. Relative frequency of different CSS at-rules.
Markup correctness
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.
- Property x doesn't exist
- y is not a x value
- Unrecognized
- You must put an unit after your number
- Parse error – Unrecognized
- Attempt to find a semi-colon before the property name. add it
- Too many values or values are not recognized
- Unknown dimension : x
- x is not a valid color 3 or 6 hexadecimals numbers
- Generic family names are keywords, and therefore must not be quoted.
- Too few values for the property x
- In CSS1, a id/class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such ids/classes are parsed as unknown dimensions (to allow for future additions of new units)
- x negative values are not allowed
- Invalid separator in shape definition. It must be a comma.
- x is an incorrect operator
- Unknown error
Kirjutatud 12. juunil 2006.