Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/triinne/public_html/mysqlconnect.php on line 3CSS

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:

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.

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.

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)