带有前置零的“单位相关”CSS 属性值是否等同于相应的“无前置零”值?

2024-01-27

我正在扫描一些样式表时发现其中使用了linear-gradient with 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 的定义number here https://www.w3.org/TR/css3-values/#number.

长话短说,经过更多的探索和挖掘,我没有意识到我可以在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, and transition-duration因为上面生成的 html 元素看起来是相同的。

将此 CSS 方法扩展到任何属性和任何单元,例如,time, 任何包含单位的 CSS 属性值在语法上是否等同于没有任何前缀零的相同值?


我不得不承认我觉得这个问题很有趣。

https://www.w3.org/TR/CSS21/syndata.html 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 https://www.w3.org/TR/css3-values/#numbers

4.2.实数:类型

数值表示为<number>,并表示实数, 可能带有小数部分。

当按字面书写时,数字要么是整数,要么是零或更多 小数位后跟一个点 (.),后跟一个或多个小数 数字和可选的由“e”或“E”和一个组成的指数 整数。对应CSS中的产生式 语法模块 [CSS3SYN]。与整数一样,a 的第一个字符 数字前面可以紧接 - 或 + 以指示数字的 符号。

https://www.w3.org/TR/css-syntax-3/#convert-a-string-to-a-number https://www.w3.org/TR/css-syntax-3/#convert-a-string-to-a-number我相信这大致解释了 css 解析器应该如何获取 css 值并将其转换为数字:

4.3.13.将字符串转换为数字

本节介绍如何将字符串转换为数字。它 返回一个数字。

注意:该算法不做任何验证以确保 字符串仅包含一个数字。确保字符串只包含一个 调用此算法之前有效的 CSS 编号。

将字符串分成七个部分,按从左到右的顺序:

符号:单个 U+002B 加号 (+) 或 U+002D 连字符减号 (-),或空字符串。如果符号为 U+002D,则令 s 为数字 -1 连字符减号 (-);否则,让 s 为数字 1。

整数部分:零个或多个数字。如果至少有一个数字,则令 i 为通过将这些数字解释为 a 所形成的数字 以 10 为底的整数;否则,令 i 为数字 0。

小数点:单个 U+002E 句号 (.) 或空字符串。

小数部分:零个或多个数字。如果至少有一位数字,则令 f 为将这些数字解释为 a 所形成的数字 以 10 为底的整数,d 是位数;否则,令 f 和 d 是数字 0。

指数指示符:单个 U+0045 拉丁文大写字母 E (E) 或 U+0065 拉丁文小写字母 E (e),或空字符串。 (-) 或空字符串。令 t 为数字 -1,如果 符号为 U+002D 连字符减号 (-);否则,令 t 为数字 1。

指数:零个或多个数字。如果至少有一位数字,则令 e 为通过将这些数字解释为以 10 为底数而形成的数字 整数;否则,令 e 为数字 0。

返回数字 s·(i + f·10-d)·10te。

我认为关键术语是以 10 为基数的数字。

请注意,对于其他可能的情况,起始 0 是有意义的,我相信,如果我正确阅读了此规范,您必须对其进行转义,使其能够充当简单数字之外的其他东西:

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

任何 Unicode 代码点都可以包含在标识符中或用引号引起来 通过转义字符串。 CSS 转义序列以反斜杠开头 (\),然后继续:

任何不是十六进制数字或换行符的 Unicode 代码点。转义序列被该代码点替换。

或者一到六个十六进制数字,后跟可选的空格。转义序列被 Unicode 代码点替换,其值为 由十六进制数字给出。这个可选的空白允许 十六进制转义序列后跟“真正的”十六进制数字。

值为“&B”的标识符可以写为\26 B 或\000026B。

转义序列后面的“真实”空格必须加倍。

然而,即使在这里,起始 0 似乎也是可选的,尽管还不是很清楚。

CSS 规范虽然迟钝但相当清晰,但情况并非总是如此。所以是的,数字是由数字字符串组成的,也可以有小数,并且以 10 为基数,所以这意味着前导零根本就没有。

我还推测,因为规范进一步规定,当数值为 0 时不需要任何单位,事实上,前导零在内部可能意味着 null,什么都没有,尽管显然你必须查看 css 解析代码本身看看浏览器实际上是如何处理的。

这很有趣。我认为这可能是因为 css 是一种非常简单的语言,它不会像 php 或 javascript 那样用前导零做“聪明”的事情,它只是做你所期望的,将它们视为零,什么也不做。

不过,谢谢您的询问,有时回去阅读原始规格只是为了看看这些东西是如何工作的,这很好。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带有前置零的“单位相关”CSS 属性值是否等同于相应的“无前置零”值? 的相关文章

  • TransitionEnd 事件未触发?

    我有多个元素 每个元素都以 某种程度上 持续时间进行动画处理 我使用 CSS3 过渡 jQuery 库和transitionend辅助函数来自大卫 沃尔什 https davidwalsh name css animation callba
  • 隐藏滚动条,但仍然可以滚动

    我希望能够滚动整个页面 但不显示滚动条 在谷歌浏览器中它是 webkit scrollbar display none 但 Mozilla Firefox 和 Internet Explorer 似乎不是这样工作的 我也在 CSS 中尝试过
  • 添加自定义 CSS 到 Jekyll

    我是 Jekyll 新手 我正在按顺序使用自定义 html 和 css 制作一个网站 Jekyll 默认下载 minima 主题 所以我用以下 html 覆盖了主页 all my html
  • 为什么 inline-block 会根据子元素的宽度自动调整宽度?

    如果这个问题已经在 stackoverflow 上提出过 请纠正我 如果确实如此 我深表歉意 但我已经寻找了一段时间并且只找到了hows not whys 我的问题是 父 div 似乎会自动占据页面的整个宽度 除非 display inli
  • Javascript - window.getCompulatedStyle 返回“auto”作为元素顶部和左侧属性

    在我的网页上 我有一些元素 div 子 div 按钮等 其位置是相对于它们所在的 div 以及彼此之间生成的 这会导致使用时的结果window getCompatedStyle the top and left属性不是数字值 而是简单的 a
  • 将焦点和光标设置到文本输入字段/字符串 w 的末尾。 Jquery [重复]

    这个问题在这里已经有答案了 我有以下函数 将选择器添加到搜索输入作为高级选项 就像堆栈溢出高级搜索一样 当您单击要搜索的内容时 它会添加一个前缀 请参阅下面的 Jquery
  • 纯CSS代码,没有绝对定位

    我试图想出一个纯CSS代码 就像你在电视上看到的那样 仅not粘在屏幕底部 我已经找到了涉及 JS 的东西 但我正在努力避免 JS 我还发现了一些其他人创建的纯 CSS 代码 但这些的问题在于它们都使用position absolute 这
  • 当CSS文件存在时,无法在服务器上找到它们[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 当运行本地服务器时 这一切都运行良好 我有 header html 其中包含以下代码 在 public html 目录 与 header h
  • 带填充的 Tailwind CSS 导航悬停下拉菜单

    我正在尝试展示子 ul 当项目悬停时 在第一个导航项目上列出 一切正常 除了有时 时好时坏 当您位于第一行的填充之间时 ul 项目和子项目 ul 项目 次要项目 ul 会消失 当我从下拉菜单导航到项目列表时 如何保持辅助导航列表打开 JSF
  • 如何将两个图像放置在一个div的对角

    如你所见 我不是 CSS 专家 我需要一些帮助来了解如何使用两个图像制作这个 div 如下图所示 托马斯是对的 但还有更好的解决方案 div img class align left src alt description of your
  • 如何在滚动时保持这些 tagHover 的位置靠近标签并且 tagHover 具有固定位置?

    https plnkr co edit PuP3f71kCjkqgjjMkgNS p preview https plnkr co edit PuP3f71kCjkqgjjMkgNS p preview 下面还有一个 stackoverfl
  • CSS 变换源不能与 translate() 一起使用

    我想将 div 从中心点移开 但似乎translate 不关心变换原点是什么 并使用元素的左上角来移动它 这是一个测试来证实这一点 div class items div class item 1 style width 100px hei
  • CSS 中 calc() 的结果是什么

    我们现在已经开始使用calc 在CSS中 用于设置计算结果的宽度 例如 div div div div parent width 100px calcWidth width calc 100 3px height 100px backgro
  • 夜间值班。单击带有文本的元素

    我遇到问题 无法单击具有某些独特文本的网页元素 我有这样的结构 div class wg wagon type title Text div 我试试这个 click wg wagon type title contains Text 但我有
  • 显示带有背景颜色的百分比条

    例如 如果我有一个包含两列和 2 行的表 Col1 Percentage 50 50 70 70 如何用代表 COl1 值的颜色填充百分比列 像这样的东西 您可以使用具有两个紧接着的停止点的线性渐变 percentageFill heigh
  • 如何在 div 容器内的元素之间留出空间

    我有一个弹性容器 它将由元素动态填充 容器没有固定宽度 I use max width max content 并且可以包含我想要的任意数量的元素 问题是我需要这些元素之间的间距 但不需要元素和容器之间左侧和右侧的间距 当然我可以用 ele
  • 使用溢出时无法隐藏滚动条:auto

    我有这个CSS div background color red position relative height 414px overflow auto width 902px margin 0px auto 我尝试过overflow y
  • 由于固定导航,增加了 FancyBox v2 的顶部和底部边距

    我目前正在开发一个网站 该网站将来将具有响应能力 该网站主要由图像组成 单击这些图像会加载到 FancyBox 中 FancyBox v2 现在具有响应能力 因此可以在屏幕尺寸发生变化时重新调整图像等的大小 作为我设计的一部分 我有两个固定
  • 如何更改 Shiny 中 navbarPage 折叠的断点

    我想用shiny navbarPage collapsible TRUE 当在小屏幕上查看我的 Shiny 应用程序时 将导航元素折叠到菜单中 默认情况下 当浏览器宽度小于 940 像素时会触发折叠 有什么方法可以改变这一点 以便在稍大的浏
  • CSS:缩放字体大小以适应父块元素的高度

    我发现的几乎每个问题和答案都谈到了视口大小 这确实不是我的问题 拿着这支笔 https codepen io njt1982 pen pZjZNM https codepen io njt1982 pen pZjZNM 我有一个非常基本的

随机推荐

  • mvc3 - 如何从源代码禁用符号的 htmlencode

    我需要从数据库表中取出页面文本 表字段 文本 包含带有 html 格式标记的文本 例如 p br 等等 在表中它没有编码 当我尝试使用 Model Text 输出时 我看到编码的 html 标签 例如 lt p gt 我怎样才能禁用这个 h
  • 如何发现正在使用的 Linux 发行版

    有时我需要访问一些运行Linux 或者可能是另一个类Unix SO 的服务器 但我不知道如何验证哪些服务器分配 http en wikipedia org wiki Linux distribution正在服务器上使用 有时甚至服务器的 负
  • 当我尝试在 Xcode 中重构时,出现一条警告,要求将文件添加到此工作区中目标的构建阶段

    当我尝试通过重命名来重构代码时 我经常看到此消息 h is not part of the build phase of any targets in this workspace and so can t be refactored Ad
  • 创建没有数组的刽子手游戏[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 这就是输出的样子 我需要在原始字符串中找到猜测的索引 如果这是真的 那么应该用读入的字符替换索引处的问号 字符串猜测 之后 它应该从字符串
  • 表达式求值的顺序

    我很好奇一些不同类型的表达式的顺序 所以我在顶部声明级别尝试了这段代码 认为它会失败 但发现它有效 http play golang org p CfP3DEC5LP http play golang org p CfP3DEC5LP va
  • 在新的 CardView 中对齐多个 TextView

    我正在尝试创建一个 CardView 它将显示作者的引用 包括作者姓名 引用以及其下面的引用 我想我已经掌握了大部分内容 但似乎对齐 TextView 的一般规则似乎不适用于 CardView 我在这里研究发现你应该添加android la
  • ANT - 无法加载依赖类 com/jcraft/jsch/Logger

    我的 Ant 脚本有问题 我需要将文件复制到 Linux 服务器
  • go 中 ioutil.ReadAll 的替代方案?

    对于我正在制作的程序 此函数作为 for 循环中的 goroutine 运行 具体取决于传入的 url 数量 没有设定数量 func makeRequest url string ch chan lt string errors map s
  • 当两个超类具有同名但签名不同的成员函数时,存在歧义

    struct A void f int x struct B template
  • 安装了Visual Studio 2010 SP1,仍然不支持CSS3和HTML5

    我已从以下位置下载了最新版本的 Visual Studio 2010 Service Pack 1 here http www microsoft com download en details aspx id 23691 然而 在我提取文
  • 如何在分解时间序列图中自定义标题、轴标签等

    我相当熟悉通过编写自己的 x 轴标签或主标题来修改绘图的常用方法 但在绘制时间序列分解的结果时 我无法自定义输出 例如 library TTR t lt ts co2 frequency 12 start 1 deltat 1 12 td
  • 测试小程序的最佳机制是什么?

    我正在尝试有效地为小程序构建一个功能测试套件 并且我正在尝试为其找到一个好的框架 过去 当我想设计一个测试套件来对应用程序进行功能测试和负载测试时 它始终是基于 Web 的应用程序 或者至少是某种基于服务的应用程序 并且我已经使用grind
  • 如何在http get请求中设置标头?

    我正在 Go 中执行一个简单的 http GET client http Client req http NewRequest GET url nil res client Do req 但我找不到自定义请求标头的方法doc http go
  • 如何获取维基数据上所有电影的列表?

    我正在使用 Freebase 为我的网站获取所有电影 但它很快就会被关闭 所以我在寻找另一个免费的电影数据库并发现了维基数据 说实话 如何查询所有电影太复杂了 所以我想你们可以帮助我获取维基数据中的所有电影 将来我还想加入电视节目和连续剧
  • jQuery - 对数组进行排序?

    我使用 Ajax 获取一些 XML 然后用结果填充表单上的一些字段 表单上有一个数字字段 我想按该数字对结果进行排序 从高到低的在前 我将如何在 jQuery 中做到这一点 我的js函数代码目前是 function linkCounts w
  • 运行时动态绑定和类继承之间的区别

    我试图澄清动态语言 Python Ruby 和静态类型语言 java C 中运行时动态绑定和类继承的概念 我不确定我是对还是错 在 Python 和 Ruby 等动态语言中 运行时动态绑定是作为鸭子类型实现的 当解释器检查对象的类型时 它检
  • 新 Chrome 打包应用程序的最小/最大按钮在哪里?

    我正在使用 Chrome 的开发通道 v23 并且正在使用新的Chrome 打包应用程序 http developer chrome com dev apps about apps html平台 新平台的目的之一是将打包应用程序 从浏览器中
  • 卷积神经网络如何处理通道

    我已经浏览了很多关于 CNN 通常处理多个通道 例如 RGB 图像中的 3 个 的方式的解释 但我仍然不知所措 当将 5x5x3 滤镜 例如 应用于 RGB 图像的补丁时会发生什么exactly发生 实际上是每个通道分别发生 3 个不同的
  • JAXB 继承,解组到编组类的子类

    我正在使用 JAXB 来读取和写入 XML 我想要的是使用基本 JAXB 类进行编组 并使用继承的 JAXB 类进行解组 这是为了允许发送方 Java 应用程序将 XML 发送到另一个接收方 Java 应用程序 发送者和接收者将共享一个公共
  • 带有前置零的“单位相关”CSS 属性值是否等同于相应的“无前置零”值?

    我正在扫描一些样式表时发现其中使用了linear gradient with rgba 颜色停止点 其中rgba数字使用了多个实例0而不是只有一个0 background image linear gradient to top left