使用CSS在伪元素上发出声音

使用CSS在伪元素上发出声音,css,Css,我读了一些让我震惊的东西,我想问一下这是否可能 根据内容属性,可以采用url值,该值可以是声音 url(url)将内容设置为某种媒体(图像、视频) (声音、视频等) 根据MDN 该值是一个URI,用于指定外部资源(例如 图像)。如果资源或图像无法显示,则 忽略或显示某个占位符 所以我试过了 content:url('http://www.w3schools.com/html/horse.ogg'); 什么也没发生。我的问题是,是否确实有可能使用CSS触发声音效果,或者这只是W3docs中的一个错

我读了一些让我震惊的东西,我想问一下这是否可能

根据
内容
属性,可以采用
url
值,该值可以是声音

url
(url)将内容设置为某种媒体(图像、视频) (声音、视频等)

根据MDN

该值是一个URI,用于指定外部资源(例如 图像)。如果资源或图像无法显示,则 忽略或显示某个占位符

所以我试过了

content:url('http://www.w3schools.com/html/horse.ogg');

什么也没发生。我的问题是,是否确实有可能使用CSS触发声音效果,或者这只是W3docs中的一个错误

编辑:关于何时这可能有用的示例

当然,您可以使用JS触发声音,但是在某些情况下,您不允许使用javascript,或者用户没有启用javascript。因此,假设您将一个元素提供给第三个网站,并且您只允许使用HTML+CSS(例如横幅),如果
内容
确实接受声音,则可以在虚拟元素悬停时触发声音效果。

读取方式略有不同

该值是指定外部资源(如图像)的URI。如果用户代理无法显示资源,则必须将其忽略,如同未指定资源一样,或者显示无法显示资源的某些指示

没有关于声音的参考…如果是可能的,则没有关于如何显示/声音/激活的指示…目前最好由浏览器来实现

所以……可以说,W3学校弄错了……这不是第一次了。

该值是一个URI,用于指定外部 资源(如图像)。如果用户代理无法显示 资源,它必须将其省略,就像未指定它一样,或者 显示一些资源无法显示的指示

旧的工作草案(2003年)说:

如果URI可用且格式受支持,则元素 或者伪元素成为替换的元素,否则,下一项 如果有,则使用逗号分隔列表

较新的编辑草稿(尚未准备好实施)的内容基本相同:

对于URI,而不是中以逗号分隔的最后一节中的URI 值,如果URI可用且支持该格式,则 元素或伪元素成为替换的元素,否则 使用逗号分隔列表中的下一项(如果有)


因此,浏览器可能会决定支持声音并将其作为替换元素呈现,如
。但很可能他们不会。即使它真的起作用,预期的输出是多少?你会如何控制音频?@noahnu在悬停时触发声音效果。
另一个常见效果是用图像或其他多媒体内容替换元素。由于并非所有用户代理都支持所有多媒体格式,因此可能必须提供后备方案。
@nico I updated,简称w3school,thx!众所周知,W3学校不应该被信任拥有准确或最新的信息。改为使用MDN。“媒体”的值为“全部”,“全部”的链接包括“媒体类型”中的“声音”:@Rob这不是指HTML/CSS呈现的“媒体”吗?用于
@媒体屏幕/打印
等。如果浏览器决定在
内容
中支持音频,我想如果没有额外的CSS属性来控制音频,它将不会非常有效。