Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sound on pseudoelements using CSS

Tags:

css

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.

like image 429
Avraam Mavridis Avatar asked Apr 01 '16 15:04

Avraam Mavridis


1 Answers

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.

like image 159
Oriol Avatar answered Jan 15 '23 07:01

Oriol