MAMA: CSS report
Cascading Style Sheets (CSS) is one of the biggest success stories of the Web. It was first specified by the W3C in 1995, and was quickly embraced by browsers and authors. CSS offers much richer typographical control than the HTML-based solutions that were the norm before it came into being. Over a decade after the first documents started using CSS, the Web has clearly embraced it—it was detected in 2,821,141 of MAMA's URLs (80.4%). For a deeper look at the details of MAMA's CSS examination, the following MAMA article topics are also available this week:
CSS inclusion methods used in Web pages
CSS tracking in MAMA was accomplished via the following 3 sources:
- External CSS via the
- Embedded CSS by way of
Style attribute was the most common method encountered,
just barely exceeding the total for the external CSS construct
LINK element). The "times per page" values and other
counters represent the number of occurrences for the specific syntax that is
encountered for a URL. For example, the maximum number of
LINKed style sheets discovered in any single page was
44; the maximum number of
Style attributes found was
21,293. The average "per-page" numbers listed in the table below
apply where that type of CSS was used and does not cover the total MAMA URL
|CSS type||Description||Total URLs|
|Style attribute||Contents of all Style attributes||1,898,513||67.3%||1||21,293||25.6|
|External CSS||Content from all LINK/Href/Rel="Stylesheet" URLs||1,836,260||65.1%||1||44||1.5|
|Embedded CSS||Contents of all STYLE elements||1,321,006||46.8%||1||708||1.6|
CSS usage source diagram
The most popular combination of CSS methods is external CSS (the
element) in conjunction with inline CSS (the
attribute). The least popular mixing is external CSS paired with embedded CSS (the
STYLE element). To get a clearer view of the uses and
intersections of the different CSS methods, the following diagram is helpful:
Note: Region sizes are not to scale.
The most popular CSS properties are the replacements for standard "old school"
HTML presentational markup. The top 3 properties replicate the functionality
FONT element, and the next 2 in popularity take over
B elements. For CSS Box Model properties
'padding'), the shorthand versions are more popular
than their separate component forms, but the reverse is true for the
'background' properties. The most popular component properties for the CSS Box Model are the
top side for
'margin', and the bottom side for
|CSS property||Frequency||% Total
|CSS property||Frequency||% Total|
Special CSS features: inherit and !important
Two keywords in CSS have special meaning—they are not selectors and they are
not properties. The "inherit" keyword is a special
global property value used to explicitly pass on a particular value from a parent
to a child. Just under 10% of all URLs using CSS (278,743 URLs) use this keyword
at least once. The other special keyword is "!important",
which specifies a shift in the bias of a document's cascade order toward a specific
CSS rule. It was found in 155,449 of MAMA's URLs (over 5% of all cases using CSS).
These numbers seem significant, but if one frames the numbers in perspective with
the CSS property frequency table, optimism is quickly deflated. For instance,
there are almost 75 CSS properties that are more popular than the "!important"
keyword, including the non-standard
most of the scrollbar properties.
MAMA tracked 3 types of CSS at-rule syntax:
@charset, only the existence of the at-rule
is tracked. In the case of
@media, the existence
is tracked, along with the stated media type values. Lastly,
statements were dissected and analyzed for their file names and media types.
|At-rule type||Frequency||% Total|
There were 404,212 pages that specified at least one CSS media type. Media types
were detected by looking at the
Media attribute of
as well as the CSS
@media at-rule syntax. The
resulting list of media types were then matched against the following regular
Any media type that was not recognized fell into a catch-all category termed "other". What were some of the "other" media types? The 3 main types that were noticeable in significant quantities are all from CSS2: "braille", "embossed", and "tty".
|Media type||Frequency||% Total
|Media type||Frequency||% Total|
Pseudo-classes and pseudo-elements
There are a number of these constructs defined in CSS2, and many more are listed
in CSS3. Only a subset of pseudo-classes and pseudo-elements were chosen for tracking
in MAMA for this report. Some obvious/important pseudo-classes were ignored this time,
:hover is used in two-thirds of all pages that use CSS.
:after is (strangely) 3 times more popular than
:before. The psuedo-class
is more than 4 times as frequent as
(although that can probably be attributed to
being in CSS2, while
:last-child was not added until
CSS3). The typography distinctions that are
:first-line are not that widely used, although
authors preferred to control the initial letter of a block more often than the
initial line (by more than a 3:1 ratio).
Although this overview covers many interesting points of MAMA's CSS examination,
the reader is encouraged to also dig deeper into the main MAMA articles on CSS
(see the links at the beginning of this document). These documents add more detail
to the topics already mentioned and discuss additional interesting topics such
as MIME types and file names for external CSS, detailed usage of
@import, and CSS browser vendor extensions.
Stay tuned for next week's topics, when we will start looking at what MAMA discovered about script usage.
This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.