【问题标题】:What is an example usage of <url-modifier> at CSS url() function?CSS url() 函数中 <url-modifier> 的示例用法是什么?
【发布时间】:2016-05-12 18:32:42
【问题描述】:

3.4. Resource Locators: the &lt;url&gt; type 描述了&lt;url-modifier&gt;

URL 是指向资源的指针,是一种功能符号 由&lt;url&gt; 表示。 &lt;url&gt; 的语法是:

&lt;url&gt; = url( &lt;string&gt; &lt;url-modifier&gt;* )

除了上面定义的语法,a 有时可以是 其他写法:

  • 由于遗留原因,&lt;url&gt; 可以写成不带引号的 URL 本身。此语法经过特殊解析,并且 在语法上生成 &lt;url-token&gt; 而不是函数。 [CSS3SYN]

  • 某些 CSS 上下文(例如 @import)允许将 &lt;url&gt; 改为由 &lt;string&gt; 表示。这与 编写一个包含该字符串的url() 函数。因为这些 编写&lt;url&gt; 的替代方法不是功能符号,它们 不能接受任何&lt;url-modifier&gt;s。

注意:遗留引号的特殊解析规则 &lt;url&gt; 语法表示括号、空白字符、单 出现在 URL 中的引号 (') 和双引号 (") 必须进行转义 带有反斜杠,例如url(open\(parens)url(close\)parens)。 根据 URL 的类型,也可以编写这些 URL 转义字符(例如 url(open%28parens)url(close%29parens)) 如 [URL] 中所述。 (如果写成 包含字符串的普通函数,普通字符串转义规则 申请;只有换行符和用于引用字符串的字符需要 被逃脱。)

3.4.2. URL Modifiers

url() 函数支持指定额外的&lt;url-modifier&gt;s, 这会以某种方式改变 URL 的含义或解释。一个 &lt;url-modifier&gt;&lt;ident&gt;function

本规范没有定义任何&lt;url-modifier&gt;s,但其他 规格可能会这样做。

另见CSS Values and Units Module Level 3 Editor’s Draft, 21 March 2016


  • &lt;ident&gt;function url() 的示例用法是什么?

  • &lt;string&gt;&lt;ident&gt;functionurl() 之间有什么区别?

【问题讨论】:

  • 除了引用中已经给出的内容之外,无法回答这个问题,因为在任何规范中都没有已知的 定义。如果您正在寻找虚构的例子,那么这个问题是题外话。
  • @BoltClock 规范定义可以在url() 使用&lt;url-modifier&gt;。问题是问这个可用的特性是如何实现的,或者是如何实现的?如果该功能已在野外使用,那又如何呢?问题的第二部分是&lt;string&gt;&lt;ident&gt;url() 函数之间是否存在差异?不确定这将如何被视为“离题”?如何确定没有浏览器或个人用户在不询问的情况下实现了该功能?
  • 抛开仅仅因为它在规范中定义就意味着实现必须存在于野外的假设,这个问题太宽泛了。即使您要求现有的 impl,您仍然要求一个列表,该列表可能会随着新定义和新 impl 的出现而改变(这不包括非标准 impl,因为从技术上讲,现在每个 impl 都将是非标准的) .第二个问题可以部分且相当容易地回答 - 规范本身说修饰符只能是 ident 或函数,因此 必须代表 URL 本身。
  • @BoltClock 这个问题stackoverflow.com/questions/36072936/… 与如果可以实现&lt;url-modifier&gt; 的程度有关,我们是否可以使用该功能在url() 处显示.html 文档content 函数@?试图找到一个程序来解释和预处理 .html 文档,使其可以在不将文档转换为图像或嵌入 svg 的情况下呈现。
  • url("/foo" bar)url("/foo" bar(3)),我想。由于还没有实现,这个问题没有实际意义。

标签: css


【解决方案1】:

&lt;url-modifier&gt;&lt;ident&gt;function

&lt;ident&gt; 是一个标识符。

CSS 源代码的一部分,与&lt;ident-token&gt; 具有相同的语法。

&lt;ident-token&gt; Syntax ;

我找不到在url 函数中使用的&lt;ident&gt; 的任何示例,但是 正如this email 中提到的,未来有一些可能的用途。

  • 获取控制 CORS/cookies/etc 的选项
  • 使用子资源完整性

查看&lt;ident&gt; 语法,您不能使用键/值对,所以我假设 其中大部分将使用尚不存在的function 实现。资源提示可以使用&lt;ident&gt; 实现。

.foo { background-image: url("//aa.com/img.svg" prefetch); }

然而,我确实找到了一个定义了 function &lt;url-modifier&gt; 的“有趣想法的集合”。

SVG Parameters(非官方规范)

params() function&lt;url-modifier&gt;

.foo { background-image: url("//aa.com/img.svg" param(--color var(--primary-color))); }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-12-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-08
    • 2010-10-17
    • 1970-01-01
    相关资源
    最近更新 更多