Browser CSS Implementation Test
This page will test your browser's implementation of the CSS standards. It will reveal bugs which your browser may have with the CSS Specifications if any. This test page is in no way comprehensive since its main objective is to reveal bugs which can be used to hide rules or declarations from certain browsers.
Initial CSS for all test blocks as follows:
div
{
margin: 1em 0;
padding: 0;
border: 10px dashed #d00;
font-family: serif;
font-size: 150%;
text-transform: uppercase;
width: 75%;
color: red;
background: #fcc;
}
Except for the margins all properties should be overridden by the test blocks below if your browser does not have bugs or CSS implementation problems. Should one or more properties take on the value above then your browser has a bug or has inadequate CSS implementation.
Because the CSS for the test blocks contain character escapes Netscape 4.x will disregard the entire stylesheet. Therefore, this page will have no CSS when viewed in NS4.x. Moreover, a JavaScript error message may pop up in earlier versions of that browser when the page is loaded, again due to the character escapes.
All CSS used here are valid
Control Block
This is how the other blocks should look. Any deviation from the format indicates a problem.
Control
div#control
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
width: 50%;
color: navy;
background: #ccf;
}
Character Escapes
Characters in CSS can be escaped by preceding it with a backslash. Hexadecimal numbers can be keyed in by using the same technique. This means that letters a to f and A to F, as well as numerals 0 to 9 will be treated as hexadecimal numbers if a backslash precedes them. Other letters can be escaped without changing their meaning. But a number of browsers do not implement the escape mechanism and will either ignore the entire stylesheet (e.g. NS4.x) or the rule set (e.g. Opera 5) or the declaration (e.g. IE5.x/Win when a non-first character is escaped) where the escape is found.
In the following test blocks the escape mechanism is used in various positions in selectors and properties.
Character escape first letter of selector
\html div#esc1
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
width: 50%;
color: navy;
background: #ccf;
}
Character escape non-first letter of selector
d\iv#esc2
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
width: 50%;
color: navy;
background: #ccf;
}
Character escape first letter of property
div#esc3
{
\padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
\text-transform: none;
\width: 50%;
color: navy;
background: #ccf;
}
Character escape non-first letter of property
div#esc4
{
padding: 0 1em;
bo\rder: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-famil\y: monospace;
font-size: 100%;
text-transform: none;
w\idth: 50%;
color: navy;
bac\kground: #ccf;
}
Comments
Comments according the CSS Specs can be placed anywhere between tokens, which means just about anywhere as long as they do not split a selector, a property name, or a value and its unit identifier. But a number of browsers (IE in particular) have problems when comments are placed in certain areas.
In the test blocks below you will find such terms as "empty comment," "non-empty comment," and "whitespace." An empty comment is one which does not contain any whitespace character. A non-empty comment contains at least one whitespace character. A whitespace is either a blank space, a tab, or a carriage return.
Properties
Max-width
div#prop1
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
max-width: 50%;
color: navy;
background: #ccf;
}
Max-width override of width
div#prop2
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
max-width: 50%;
width: 100%;
color: navy;
background: #ccf;
}
!important Declaration
Speciying a certain property as !important should "lock in" the value for that property even if the property is redeclared in the rule. A number of browsers, however, still do not properly implement !important and fail to give the declaration that has it any importance.
In the following set implementation of !important is tested as well as the presence or absence of whitespace between value, the exclamation mark, and "important". Note that the CSS Specs allows such intervening whitespaces.
Value + ! + important
div#impt1
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
width: 50%!important;
width: 100%;
color: navy;
background: #ccf;
}
Value + ! + whitespace + important
div#impt2
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
width: 50%! important;
width: 100%;
color: navy;
background: #ccf;
}
Value + whitespace + ! + important
div#impt3
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
width: 50% !important;
width: 100%;
color: navy;
background: #ccf;
}
Value + whitespace + ! + whitespace + important
div#impt4
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
width: 50% ! important;
width: 100%;
color: navy;
background: #ccf;
}
Selectors
Child selector
html>body div#select1
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
width: 50%;
color: navy;
background: #ccf;
}
Adjacent sibling selector
head+body div#select2
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
width: 50%;
color: navy;
background: #ccf;
}
first-child pseudo class selector
:first-child+body div#select3
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
width: 50%;
color: navy;
background: #ccf;
}
xmlns attribute selector
[xmlns] div#select4
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
width: 50%;
color: navy;
background: #ccf;
}
Miscellaneous Selectors
The following selectors do not match any element in a valid HTML or XHTML document. IE5.x/Win, IE6/Win, and IE5.x/Mac, however, all interpret them as if the first universal selector (asterisk) did not exist.
If your browser fails in the following tests, i.e., it displays the default div format then your browser is correctly ignoring the rule set.
Star html selector
* html div#selectstar1
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
width: 50%;
color: navy;
background: #ccf;
}
Star star body selector
* * body div#selectstar2
{
padding: 0 1em;
border: none;
border-left: 20px solid #00d;
border-right: 20px solid #00d;
font-family: monospace;
font-size: 100%;
text-transform: none;
width: 50%;
color: navy;
background: #ccf;
}