Are “unit-relevant” CSS property values with prepe

Question

I was scanning some stylesheets when I noticed one which used a linear-gradient with rgba() color-stops in which the rgba numbers used multiple instances of 0 instead of just a single 0:

background-image:linear-gradient(to top left, rgba(000,000,000,0.1),rgba(100,100,100,1));

I hadn't seen multiple zeroes (instead of a single zero) occupying a single slot in the rgb/a color space before, but confirmed on CodePen this is valid. I then looked up the W3C definition of number here.

To make a long story short, after some more poking and digging, I didn't realize I could prepend an indeterminate number of zeroes to a length and get the same result as with no zeroes prepended, like this:

/* The two squares generated have equivalent width and height of 100px - for giggles, I also extended the same idea to the transition-duration time */

<style>

div.aaa {
    width:00000000100px;
    height:100px;
    background-image:linear-gradient(to top left,rgba(000,000,000,0.1),rgba(100,100,100,1));
    transition:1s cubic-bezier(1,1,1,1)
}

div.bbb {
    width:100px;
    height:000000000000000000000000000000000100px;
    background-color:green;
    transition:0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001s cubic-bezier(1,1,1,1)
}

div:hover { background-color:red } 

</style>

<div class="aaa"></div>
<div class="bbb"></div>

It's difficult to directly verify these numbers are equivalent representations, because using a scripting language:

/* PHP */
$x = 100;
$y = 00000000000100; // problem is PHP treats this as an octal number

echo ($x == $y) ? 'true' : 'false'; // echoes the string ---> false

/* Javascript */
var x = 100;
var y = 00000000000100; // also treats this as an octal number

var res = (x == y) ? 'true' : 'false';
alert(res); // alerts ---> false

These examples suggest to me that CSS does not treat e.g. 0000100 as an octal number, but rather as a decimal (or at least as non-octal numbers) since the magnitude of the width, height, and transition-duration for the html elements generated above appear to be identical.

Extending this CSS approach to any property and any unit, e.g., time, Is any unit-containing CSS property value prepended with any positive number of zeroes syntactically equivalent to the same value without any prepended zeroes?

Answer 1

I have to admit I found this question interesting.

https://www.w3.org/TR/CSS21/syndata.html

The css 2 syntax spec says:

num     [0-9]+|[0-9]*\.[0-9]+

Note that 000000000000000037.3 meets this rule and definition, a series of numbers between 0 and 9, optionally followed by a . and a further series of numbers from 0 to 9.

The css 3 spec goes on: https://www.w3.org/TR/css3-values/#numbers

4.2. Real Numbers: the type

Number values are denoted by <number>, and represent real numbers, possibly with a fractional component.

When written literally, a number is either an integer, or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits and optionally an exponent composed of "e" or "E" and an integer. It corresponds to the production in the CSS Syntax Module [CSS3SYN]. As with integers, the first character of a number may be immediately preceded by - or + to indicate the number’s sign.

https://www.w3.org/TR/css-syntax-3/#convert-a-string-to-a-number This I believe roughly explains how a css parser is supposed to take the css value and convert it to a number:

4.3.13. Convert a string to a number

This section describes how to convert a string to a number . It returns a number.

Note: This algorithm does not do any verification to ensure that the string contains only a number. Ensure that the string contains only a valid CSS number before calling this algorithm.

Divide the string into seven components, in order from left to right:

A sign: a single U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS (-), or the empty string. Let s be the number -1 if the sign is U+002D HYPHEN-MINUS (-); otherwise, let s be the number 1.

An integer part: zero or more digits. If there is at least one digit, let i be the number formed by interpreting the digits as a base-10 integer; otherwise, let i be the number 0.

A decimal point: a single U+002E FULL STOP (.), or the empty string.

A fractional part: zero or more digits. If there is at least one digit, let f be the number formed by interpreting the digits as a base-10 integer and d be the number of digits; otherwise, let f and d be the number 0.

An exponent indicator: a single U+0045 LATIN CAPITAL LETTER E (E) or U+0065 LATIN SMALL LETTER E (e), or the empty string. (-), or the empty string. Let t be the number -1 if the sign is U+002D HYPHEN-MINUS (-); otherwise, let t be the number 1.

An exponent: zero or more digits. If there is at least one digit, let e be the number formed by interpreting the digits as a base-10 integer; otherwise, let e be the number 0.

Return the number s·(i + f·10-d)·10te.

I think the key term there is a base-10 number.

Note that for other possible situations where the starting 0 is meaningful, you have to escape it for it to function as something other than a simple number, I believe, if I read this spec right:

https://www.w3.org/TR/css-syntax-3/#escaping

Any Unicode code point can be included in an identifier or quoted string by escaping it. CSS escape sequences start with a backslash (\), and continue with:

Any Unicode code point that is not a hex digits or a newline. The escape sequence is replaced by that code point.

Or one to six hex digits, followed by an optional whitespace. The escape sequence is replaced by the Unicode code point whose value is given by the hexadecimal digits. This optional whitespace allow hexadecimal escape sequences to be followed by "real" hex digits.

An identifier with the value "&B" could be written as \26 B or \000026B.

A "real" space after the escape sequence must be doubled.

However, even here it appears the starting 0's are optional, though it's not crystal clear.

The CSS specs were while obtuse fairly clear, which isn't always the case. So yes, numbers are made from strings of digits, and can have decimals as well, and are base 10, so that means the leading zeros are simply nothing.

I speculate as well that because the specs further state that no units are required when the number value is 0, that in fact, a leading zero may mean null, nothing, internally, though obviously you'd have to look at css parsing code itself to see how that is actually handled by browsers.

So that's kind of interesting. I think that probably because css is a very simple language, it doesn't do 'clever' things like php or javascript do with leading zeros, it simply does what you'd expect, treat them as zeros, nothing.

Thanks for asking though, sometimes it's nice to go back and read the raw specs just to see how the stuff works.