是";单位相关“;CSS属性值,其前缀为0,与相应的;“不带零前缀”;价值观
我正在扫描一些样式表,这时我注意到一个样式表使用了是";单位相关“;CSS属性值,其前缀为0,与相应的;“不带零前缀”;价值观,css,units-of-measurement,octal,equivalence,Css,Units Of Measurement,Octal,Equivalence,我正在扫描一些样式表,这时我注意到一个样式表使用了线性渐变和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上确认这是有效的。然后我查阅了W3C对编号的定义 长话短说,经过更多的戳和挖掘,我没有意识到我
线性渐变和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上确认这是有效的。然后我查阅了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>
这些示例向我表明,CSS并不将例如0000100视为八进制数,而是将其视为十进制数(或至少视为非八进制数),因为上面生成的html元素的宽度
、高度
和转换持续时间
的大小似乎是相同的
将此CSS方法扩展到任何属性和任何单位,例如,时间,
任何包含CSS属性值的单元在语法上是否等于没有任何前缀的相同值?我必须承认我发现这个问题很有趣
css 2语法规范说明:
num [0-9]+|[0-9]*\.[0-9]+
请注意,0000000000000000 37.3符合此规则和定义,它是一系列介于0和9之间的数字,可以选择后跟一个。还有一系列从0到9的数字
css 3规范继续:
4.2。实数:类型
数值由
表示,表示实数,
可能有一个分数分量
按字面意思写时,数字要么是整数,要么是零或更多
小数位数后跟一个点(.),后跟一个或多个小数
数字和可选的由“e”或“e”和
整数。它对应于CSS中的产品
语法模块[CSS3SYN]。与整数一样,数字的第一个字符
数字前面可以紧跟-或+以指示数字的位置
签字
我相信这大致解释了css解析器应该如何获取css值并将其转换为数字:
4.3.13。将字符串转换为数字
本节介绍如何将字符串转换为数字。信息技术
返回一个数字
注意:此算法不进行任何验证以确保
字符串只包含一个数字。确保该字符串仅包含
调用此算法之前的有效CSS编号
将字符串按从左到右的顺序分为七个部分:
符号:单个U+002B加号(+)或U+002D连字符(-)或空字符串。如果符号为U+002D,则设为数字-1
连字符(-);否则,让我们成为数字1
整数部分:零或多个数字。如果至少有一个数字,那么我是通过将数字解释为
以10为基数的整数;否则,让我是数字0
小数点:单个U+002E句号(.)或空字符串
小数部分:零或多个数字。如果至少有一个数字,则f是通过将数字解释为a而形成的数字
以10为基数的整数,d为位数;否则,设f和d
是数字0
指数指示器:单个U+0045拉丁字母大写字母E(E)或U+0065拉丁字母小写字母E(E),或空字符串。
(-),或空字符串。如果
符号为U+002D连字符负(-);否则,让t为数字1
指数:零个或多个数字。如果至少有一个数字,则e是通过将数字解释为基数10而形成的数字
整数;否则,将e设为数字0
返回数字s·(i+f·10-d)·10te
我认为关键术语是一个基数为10的数字
请注意,对于起始0有意义的其他可能情况,如果我正确阅读本规范,我相信您必须对其进行转义,以使其作为简单数字以外的其他数字发挥作用:
任何Unicode代码点都可以包含在标识符中或引用
通过转义字符串。CSS转义序列以反斜杠开始
(\),然后继续:
非十六进制数字或换行符的任何Unicode代码点。转义序列将替换为该代码点
或一到六个十六进制数字,后跟可选空格。转义序列由值为的Unicode代码点替换
由十六进制数字给出。此可选空白允许
十六进制转义序列后跟“实”十六进制数字
值为“&B”的标识符可以写为\26 B或\000026B
转义序列后的“真实”空间必须加倍
然而,即使在这里,开始0也是可选的,尽管它不是非常清晰
CSS规范虽然迟钝,但却相当清晰,但情况并非总是如此。是的,数字是由数字串组成的,也可以有小数,以10为底,这意味着前导的零就是零
我还推测,因为规范进一步声明,当数值为0时,不需要任何单位,事实上,前导零在内部可能意味着null,nothing,尽管很明显,您必须查看css解析代码本身,以了解浏览器实际如何处理它
这很有趣。我认为这可能是因为css是一种非常简单的语言,它不会像php或javascript那样用前导零做“聪明”的事情,它只是做你所期望的,把它们当作零,什么都不做
不过还是谢谢你的邀请
num [0-9]+|[0-9]*\.[0-9]+