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

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

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	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