具有前置零的“单位相关”CSS属性值是否等效于相应的“no-zeroes-prepended”值？

2023年11月29日 227次阅读

当我注意到一个使用rgba()颜色停止的线性渐变时,我正在扫描一些样式表,其中rgba数字使用0的多个实例而不是单个0：

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

我之前没有看到占用rgb / a颜色空间中的单个插槽的多个零(而不是单个零),但在CodePen上确认这是有效的.然后我查找了编号为here的W3C定义.

总而言之,经过一些更多的探索和挖掘之后,我没有意识到我可以在一个长度之前添加一个不确定数量的零并得到与之前没有零的相同结果,如下所示：

/* 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为八进制数,而是十进制数(或至少为非八进制数),因为上面生成的html元素的宽度,高度和转换持续时间的大小看起来是相同的.

将此CSS方法扩展到任何属性和任何单元,例如时间,
是否有任何包含单位的CSS属性值前缀有任何正数的零,在语法上等效于相同的值而没有任何前置零？

最佳答案 我不得不承认我发现这个问题很有意思.

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

css 2语法规范说：

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

请注意,000000000000000037.3符合此规则和定义,一系列介于0和9之间的数字,可选地后跟a.以及从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 \26 B or \000026B.

A “real” space after the escape sequence must be doubled.

然而,即使在这里它看起来起始0是可选的,虽然它不是很清楚.

CSS规范虽然很明显,但并非总是如此.所以是的,数字是由数字串组成的,并且也可以有小数,并且是10,所以这意味着前导零只是没有.

我推测也是因为规范进一步声明当数值为0时不需要任何单位,事实上,前导零可能意味着内部没有任何内容,但显然你必须看看css解析代码本身看看浏览器实际上是如何处理的.

所以这很有趣.我认为这可能是因为css是一种非常简单的语言,它不会像php或javascript这样的’聪明’的东西做前导零,它只是做你期望的,把它们视为零,什么也不做.

谢谢你的询问,有时候回去阅读原始规格只是为了看看这些东西是如何运作的.

点赞