All geek questions in one place

Implement custom tag namespace in HTML5

For the audio player that I am creating, I would like to have a tag similar to what Google and Facebook use for their widgets. For example, it could be:

<fp:player data-type="mp3" data-href="/path/to/file.mp3" />

What is the best way to implement this custom tag and have it in a valid number of as many browsers as possible?

+4
source share
3 answers

From the HTML specification :

For markup-level functions intended for use with HTML syntax, extensions should be limited to the new attributes of the "x-vendor-feature" form, where the provider is a short string that identifies the provider responsible for the extension, and the function is the name of the function. You cannot create new item names

Thus, you cannot create it and meet the specifications, and Facebook and Google are very, very naughty.

You seem to be trying to reinvent the <audio> element . So just use this and the langage extension issue goes away.

+1
source

The above specification also ,

User agents must process elements and attributes that they do not use to understand as semantically neutral; leaving them in the DOM (for DOM processors) and styling them according to CSS (for CSS processors), but without causing any value from them.

Quentin posted a quote, if I understand the specification correctly, refer to user agent extensions. (I believe that they mean both special browsers and browser plug-ins.) User agents should not create new tags or attributes. The web developer can use any ready-made tags and attributes that they like. The specification explicitly instructs custom agent developers to consider unknown tags and attributes and include them in the DOM and when rendering the page.

Accessing them with a script is where it gets a little trickier. IE 7 and 8 so you can add a namespace to search for these custom tags, which makes your document technically invalid - but still fully functional!

See here (my blog): http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html

+3
source

watch how html5shim or html5shiv create new elements: https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js

essentially you just need document.createElement () and you can use it.

0
source

Source: https://habr.com/ru/post/1386748/

More articles:


All Articles