带有前置零的 "unit-relevant" CSS 属性 值是否等同于相应的 "no-zeroes-prepended" 值？
Are "unit-relevant" CSS property values with prepended zeroes equivalent to the corresponding "no-zeroes-prepended" values?
我在扫描一些样式表时注意到其中一个使用 linear-gradient 和 rgba() 色标，其中 rgba 数字使用了 0 的多个实例 而不仅仅是一个 0:
background-image:linear-gradient(to top left, rgba(000,000,000,0.1),rgba(100,100,100,1));
我之前没有看到多个零（而不是一个零）占用 rgb/a 颜色 space 中的一个插槽，但在 CodePen 上确认这是有效的。然后我查找了 number here.
的 W3C 定义
长话短说，经过更多的探索和挖掘，我没有意识到我可以在 length 前面加上不确定数量的零并得到相同的结果没有前置零，像这样：
/* 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>
很难直接验证这些数字是否等价表示，因为使用脚本语言：
/* 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
这些例子向我表明 CSS 不治疗例如0000100 作为八进制数，而是作为十进制数（或至少作为非八进制数），因为 width、height 和 transition-duration 的大小对于 html 上面生成的元素看起来是相同的。
将此 CSS 方法扩展到任何 属性 和任何单位，例如 time，
任何包含单位的 CSS 属性 值是否在句法上等同于没有任何前置零的相同值？
我不得不承认我觉得这个问题很有趣。
https://www.w3.org/TR/CSS21/syndata.html
css 2 语法规范说：
num [0-9]+|[0-9]*\.[0-9]+
请注意，000000000000000037.3 符合此规则和定义，是 0 到 9 之间的一系列数字，可以选择后跟一个 .以及一系列从 0 到 9 的数字。
css 3 规范继续：
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
我相信这大致解释了 css 解析器应该如何获取 css 值并将其转换为数字：
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.
我认为关键字是一个以 10 为基数的数字。
请注意，对于起始 0 有意义的其他可能情况，您必须将其转义以使其用作简单数字以外的其他东西，我相信，如果我没看错这个规范：
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 B or [=14=]0026B.
A "real" space after the escape sequence must be doubled.
然而，即使在这里，起始 0 似乎是可选的，尽管它 crystal 不清楚。
CSS 规范虽然比较模糊，但情况并非总是如此。所以是的，数字是由数字串组成的，也可以有小数，并且以 10 为底，所以这意味着前导零根本就没有。
我也推测，因为规范进一步说明当数值为 0 时不需要单位，事实上，前导零可能意味着 null，没有，在内部，虽然显然你必须看看在 css 解析代码本身以查看浏览器实际如何处理它。
这很有趣。我认为这可能是因为 css 是一种非常简单的语言，它不会做 'clever' 像 php 或 javascript 那样用前导零做的事情，它只是做你d 期望，将它们视为零，什么都没有。
尽管如此，还是感谢您的提问，有时候回过头来阅读原始规格，看看这些东西是如何工作的，这很好。
我在扫描一些样式表时注意到其中一个使用 linear-gradient 和 rgba() 色标，其中 rgba 数字使用了 0 的多个实例 而不仅仅是一个 0:
background-image:linear-gradient(to top left, rgba(000,000,000,0.1),rgba(100,100,100,1));
我之前没有看到多个零（而不是一个零）占用 rgb/a 颜色 space 中的一个插槽，但在 CodePen 上确认这是有效的。然后我查找了 number here.
的 W3C 定义长话短说，经过更多的探索和挖掘，我没有意识到我可以在 length 前面加上不确定数量的零并得到相同的结果没有前置零，像这样：
/* 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>
很难直接验证这些数字是否等价表示，因为使用脚本语言：
/* 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
这些例子向我表明 CSS 不治疗例如0000100 作为八进制数，而是作为十进制数（或至少作为非八进制数），因为 width、height 和 transition-duration 的大小对于 html 上面生成的元素看起来是相同的。
将此 CSS 方法扩展到任何 属性 和任何单位，例如 time， 任何包含单位的 CSS 属性 值是否在句法上等同于没有任何前置零的相同值？
我不得不承认我觉得这个问题很有趣。
https://www.w3.org/TR/CSS21/syndata.html
css 2 语法规范说：
num [0-9]+|[0-9]*\.[0-9]+
请注意，000000000000000037.3 符合此规则和定义，是 0 到 9 之间的一系列数字，可以选择后跟一个 .以及一系列从 0 到 9 的数字。
css 3 规范继续： 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 我相信这大致解释了 css 解析器应该如何获取 css 值并将其转换为数字：
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.
我认为关键字是一个以 10 为基数的数字。
请注意，对于起始 0 有意义的其他可能情况，您必须将其转义以使其用作简单数字以外的其他东西，我相信，如果我没看错这个规范：
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 B or [=14=]0026B.
A "real" space after the escape sequence must be doubled.
然而，即使在这里，起始 0 似乎是可选的，尽管它 crystal 不清楚。
CSS 规范虽然比较模糊，但情况并非总是如此。所以是的，数字是由数字串组成的，也可以有小数，并且以 10 为底，所以这意味着前导零根本就没有。
我也推测，因为规范进一步说明当数值为 0 时不需要单位，事实上，前导零可能意味着 null，没有，在内部，虽然显然你必须看看在 css 解析代码本身以查看浏览器实际如何处理它。
这很有趣。我认为这可能是因为 css 是一种非常简单的语言，它不会做 'clever' 像 php 或 javascript 那样用前导零做的事情，它只是做你d 期望，将它们视为零，什么都没有。
尽管如此，还是感谢您的提问，有时候回过头来阅读原始规格，看看这些东西是如何工作的，这很好。