The length-property: length \0; hack

Last updated 2016-02-02.

The hack

.your-selector-here {
  some-length-property-here: somelength \0;
}

…where somelength is a CSS length value and some-length-property-here is a CSS property whose value can be a CSS length.

Source: Browser CSS Hacks by Paul Irish

Important note! This article only applies to the specific properties mentioned below and only applies when there is space between somelength and \0. Adding spaces or using different properties changes the compatibility of the hack.
You have been warned.

Live testcases

Affected
Unaffected

If the square above shows the word "Affected", then your browser supports this hack for the width and height CSS properties.

Affected
Unaffected

If the square above shows the word "Affected", then your browser supports this hack for the margin-{top,bottom,left,right} CSS properties.

If the above square is light green, then your browser supports this hack for the padding-{top,bottom,left,right} CSS properties.

If the above square is light green, then your browser supports this hack for the border-{top,bottom,left,right}-width CSS properties.

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 somelength \0:

  1. As somelength, per the CSS Syntax Level 3 spec.
  2. As somelength, assuming the browser doesn't use null-terminated strings internally and doesn't treat null characters in CSS as syntax errors.
  3. As somelength , 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 length values.

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 length (and some permissible trailing whitespace) as the property's value.

This hack is known to be compatible with IE8-10. It is known to not be compatible with IE11, in contrast to the spaceless counterpart of this hack.

Affected browsers

Check out the links for corroborating screenshots.

Test results
Chrome
OS X Safari
iOS Safari
Firefox
Microsoft Edge
Internet Explorer
Chrome OS X
Safari
iOS
Safari
Firefox MS Edge1 Internet
Explorer
49
Unknown
10
Unknown
9.3
Unknown
45
Unknown
13
Unknown
48
Unaffected
9.0.3
Unaffected
9.2
Unaffected
44.0
Unaffected
12.10240
Unaffected
11
Unaffected
47
Unaffected
8.0.8
Unaffected
8.4
Unaffected
43.0.1
Unaffected
12.10166
Unknown
10
Affected
26
Unaffected
7.1.7
Unaffected
7.1
Unaffected
4.0.1
Unaffected
9
Affected
25
Unknown
6.2.7
Unknown
6.1
Unknown
8
Affected
7
Unknown
Note 1: MS Edge versions refer to the EdgeHTML rendering engine version, not the Edge app version shown in Edge's "About" screen. See this Can I Use issue.