I read something that blow my mind and I want to ask if it possible or not.
According to the w3school docs content
attribute can take a url
value which can be a sound ?!
url
(url) Sets the content to be some kind of media (an image, a sound, a video, etc.)
According to MDN
The value is a URI that designates an external resource (such as an image). If the resource or image can't be displayed, it is either ignored or some placeholder shows up.
So I tried it
content: url('http://www.w3schools.com/html/horse.ogg');
And nothing happens. My question is, Is it indeed possible to trigger sound effects using CSS or it is just a mistake in w3schools docs ?
Edit: An example on when this could be useful:
Of-course you can trigger sounds using JS, but there are cases that you are not allowed to use javascript or the user has not enabled javascript. So imagine that you serve an element to a third-website and you are allowed to use only HTML+CSS (e.g. a banner), if content
indeed accepts sounds it would make possible to trigger sound effects on hover of pseudo elements.
CSS2.1 says
The value is a URI that designates an external resource (such as an image). If the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed.
The old CSS3 Generated and Replaced Content Module working draft (2003) says
if the URI is available and the format is supported, then the element or pseudo-element becomes a replaced element, otherwise, the next item in the comma separated list is used, if any.
The newer CSS Generated Content Module Level 3 editor's draft (not ready for implementation) says basically the same:
For URIs other than URIs in the last comma separated section of the value, if the URI is available and the format is supported, then the element or pseudo-element becomes a replaced element, otherwise, the next item in the comma separated list is used, if any.
So it seems browsers may decide to support sound and render as a replaced element like <audio>
. But most probably they won't.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With