The background-color: color\0; hack

Last updated 2016-01-28.

The hack

.your-selector-here {
  background-color: somecolor\0;
}

…where somecolor is a CSS color value.

Source: Browser CSS Hacks by Paul Irish

Important note! This article only applies to the background-color property and only applies when there is no space between somecolor and \0. Adding spaces or using different properties may change the compatibility of the hack.
You have been warned.

Live testcases

If the rectangle above is light green, then your browser supports this hack for color keyword values (e.g. lime).

If the rectangle above is light green, then your browser supports this hack for RGB colors in hexadecimal notation (e.g. #adff2f).

If the rectangle above shows the word "Affected" on a green background, then your browser supports this hack for the transparent keyword color value.

If the rectangle above is light green, then your browser supports this hack for RGB colors in functional notation (e.g. rgb(173, 255, 47)).

How it works

Backslash (\) is used as an escape character in CSS. So \0 is an escape sequence which notionally encodes the null character (␀). However, presumably to prevent bugs related to potential use of null-terminated strings in browser implementations, the CSS Syntax Module Level 3 specifically treats \0 like an invalid escape sequence and requires that it result in the Unicode replacement character (U+FFFD; "�") instead of the null character. But CSS Syntax Level 3 is a somewhat recent spec, and thus older browsers treat \0 differently.

At any rate, there are 4 obvious ways that browsers might parse somecolor\0:

1. As somecolor�, per the CSS Syntax Level 3 spec.
2. As somecolor␀, assuming the browser doesn't use null-terminated strings internally and doesn't treat null characters in CSS as syntax errors.
3. As somecolor, assuming the browser does use null-terminated strings internally and doesn't treat null characters in CSS as syntax errors. To be clear, this is a blatant implementation bug in the browser.
4. As a syntax error. Prior to CSS Syntax Level 3, this was a reasonable choice for savvy parsers, since it's difficult to come up with any legitimate use for null characters in CSS.

Cases 1 & 2 will ultimately lead to syntax errors, since neither � nor ␀ can be part of valid CSS color values, and background-color's value must be a color.

That leaves Case 3, which will lead to the ␀ itself and any content after it being ignored since the ␀ will terminate the string prematurely, leaving (in the case of this hack) only a valid color as the background-color property's value.

The hack seems to work for colors represented using any syntax in IE8. It seems to work for colors represented using any syntax except functional notation (e.g. rgb(173, 255, 47)) in IE9-11 (see Note 2).

The hack doesn't seem to work in any other browser (including Microsoft Edge).

Affected browsers

Check out the links for corroborating screenshots.

Test results

Chrome	OS X Safari	iOS Safari	Firefox	MS Edge1	Internet Explorer
49 Unknown	10 Unknown	9.3 Unknown	46 Unknown	13 Unknown
48 Unaffected	9.0.3 Unaffected	9.2 Unaffected	45.0a2 Unaffected	12.10240 Unaffected	11 Affected2
47 Unaffected	8.0.8 Unaffected	8.4 Unaffected	44.0 Unaffected	12.10166 Unknown	10 Affected2
26 Unaffected	7.1.7 Unaffected	7.1 Unaffected	43.0.1 Unaffected		9 Affected2
25 Unknown	6.2.7 Unknown	6.1 Unknown	4.0.1 Unaffected		8 Affected
					7 Unknown