Response title
This is preview!
Move this topic
Ability to add more custom tags to html5 tags list ("nodeNames" variable) in built in support for using HTML5 tags in older IEs
in Developing jQuery Core
•
11 years ago
Hello.
I want to ask to implement to jQuery Core the option to add custom tags to "nodeNames" that are used in the support of HTML5 tags in older IEs.
Before jQuery 1.7 I was using innerShiv ( http://jdbartlett.com/innershiv/ ) that was providing the support of HTML5 tags for older IEs. In the jQuery release blog: http://blog.jquery.com/2011/11/03/jquery-1-7-released/ at "Better Support for HTML5 in IE6/7/8" we have no need to use innerShiv any more. That is awesome, as it solved a lot of issues with IE! But some time ago I've started using in my work more tags that are not in HTML5 list. For example, I was using <page> tag in locators, <chapter> - to specify user input chapters markup, <data> - as a data holder that has logical scheme, etc. When innerShiv appeared, I've modified list of tags in it and was able to utilize it in my work. Sure, before it, I was using classes for those kind of things <div class="page">, <div class="chapter">, etc., same as other people. But with custom tags we may provide more flexible approach in HTML page and content markup. HTML5 already has good new tags, but it may grow up with more. But we still need to have the older IEs support.
I and a lot of more people thankful very much for having HTML5 tags support in jQuery Core, but we all be thankful more if there will be a way/option to add more custom tags to built in support.
Thank you very much in advance!
Regards,
Max
1
Replies(15)
Thanks for taking the time to make your case. There is no way to expose that list as the `document` object gets "promoted" to create shim safe document fragments only once, when the code is first executed (which is on load), by the time you had a chance to add your items to list, the procedure would be complete.
Leave a comment on rwaldron's reply
Thanks for your reply. So, it is possible to add custom items to those list? I mean before on load. Can you please help me how can I do this? Something like:
(function( jQuery ) {
var nodeNames = "abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|" +
"header|hgroup|mark|meter|nav|output|progress|section|summary|time|video|"+
"page|chapter|data";
})(jQuery);
Or I can do the same as function:
function createSafeFragment( document ) {
var list = nodeNames.split( "|" ),
safeFrag = document.createDocumentFragment();
if ( safeFrag.createElement ) {
while ( list.length ) {
safeFrag.createElement(
list.pop()
);
}
}
return safeFrag;
}
and pass the needed items?
Thanks in advance!
Regards,
Max
(function( jQuery ) {
var nodeNames = "abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|" +
"header|hgroup|mark|meter|nav|output|progress|section|summary|time|video|"+
"page|chapter|data";
})(jQuery);
Or I can do the same as function:
function createSafeFragment( document ) {
var list = nodeNames.split( "|" ),
safeFrag = document.createDocumentFragment();
if ( safeFrag.createElement ) {
while ( list.length ) {
safeFrag.createElement(
list.pop()
);
}
}
return safeFrag;
}
and pass the needed items?
Thanks in advance!
Regards,
Max
Leave a comment on jaguar4adc's reply
Once "jQuery" exists, the code has already ran. It would have to be something that is ran before jquery is included on the page, which is not user friendly and more than likely will not be part of the core.
-- Kevin
can't you just do it yourself?
- document.createElement("page");
- document.createElement("chapter");
- document.createElement("data");
-- Kevin
Also, "data" is a legit HTML5 element and was just added to the core
Seems clone() function is not working with tags that are not in "nodeNames" list because of "rnoshimcache".
rnoshimcache = new RegExp("<(?:" + nodeNames + ")", "i"),
and in clone function we have:
......
// IE<=8 does not properly clone detached, unknown element nodes
clone = jQuery.support.html5Clone || !rnoshimcache.test( "<" + elem.nodeName ) ?
elem.cloneNode( true ) :
shimCloneNode( elem );
Is it possible to do something with this?
Regads,
Max
rnoshimcache = new RegExp("<(?:" + nodeNames + ")", "i"),
and in clone function we have:
......
// IE<=8 does not properly clone detached, unknown element nodes
clone = jQuery.support.html5Clone || !rnoshimcache.test( "<" + elem.nodeName ) ?
elem.cloneNode( true ) :
shimCloneNode( elem );
Is it possible to do something with this?
Regads,
Max
Leave a comment on Kevin B's reply
It worked!!! Thank you very much!
But seems clone() is not working properly. I've tried with <article> tag that is in nodeNames HTML5 list and clone() function works fine, but with my custom tag <page> it is not working. May be it need something more?
Leave a comment on jaguar4adc's reply
@jaguar4adc yes, it has everything to do with `shimCloneNode()`, rnoshimcache is loosely related. jQuery's intention is not to provide a standalone solution to HTML5 shim/shiv, but to ensure that standard HTML5 elements can be manipulated (ie. the "innershiv"). In restricting coverage to only standard elements and by handling all operations internally, we avoid creating unnecessary complexity as well as preserving the API surface and overall code size. The minimum code for exposing all the parts needed to make this work is 25 bytes (minified and gzipped) and we've decided that's simply too much for a corner case such as this.
Thanks for the reply. It is good that jQuery follows the standards. So, html5 items are default standard, and may be it is possible to have the ability to do custom extend of those elements list? As it is just needed for certain list of functions that are using those list per call (ie. clone() ). It won't break any restrictions thought, and will allow to make older IEs to be acting like rest browsers with custom tags that are predefined by developer. It just allows to have more flexible crossbrowser HTML mark up in situations when it is really needed (like WYSIWYGs, etc.)
Thanks in advance.
Regards.
Max
Leave a comment on rwaldron's reply
There just isn't an easy clean way to do this. We can handle standard HTML5 tags, which was the goal of the work we did in 1.7. If innerShiv is working for you, continue to use it.
BTW I don't think it's advisable to make up your own tags. The HTML5 spec says that browsers need to treat unknown tags in a neutral way, but I suspect is primarily so that browsers will not encounter problems if they add new semantics to a tag in the future. By making up your own tags you're potentially creating those very same incompatibilities if the standard was to adopt one of the names you have already created and give it a conflicting meaning.
Hello Dave.
I agree with you, as you are on 100% right that we all have to follow the standards to avoid any conflicts in future. But thing is that there are special situations when it is needed to use custom tags. For example content and data user input interfaces, when you want to develop as much as possible user friendly and convenient interface that will work for people that hasn't much skills in Web (for example, it is much easier to explain to the user only the tag rules of XML syntaxes instead of explaining to them more stuff with attributes, etc). There are a lot of such specific situations and I can provide more cases when it will be very usable. And we can still use modified innerShiv for older IEs, but the developed api with it starting suffer in performance. Native built in jQuery innerShiv support works faster and it is really more convenient.
As for implementation to jQuery, I just want to propose to add some jQuery method that will be updating the "nodeNames" and "rnoshimcache" variables. For example something like this:
customNodes: function(text){
nodeNames += text;
rnoshimcache = new RegExp("<(?:" + nodeNames + ")", "i")
}
And if developer will need to add some extra node names, he will just do:
$.customNodes
("|page|chapter");
Or just to make those variables to be not local, so developers will be able to modify them per their own.
Thanks in advance!
Regards,
Max
Leave a comment on dave.methvin's reply
It won't help to expose the list of shimmed tags, because we use them immediately. Defining a list before including jQuery is too early, and defining a list after including jQuery is too late. We'd need to redesign the functionality we included to do that.
Again, defining custom tags isn't a common need (or even an advisable one) so it would be better to do it outside jQuery. If you want to write standards-based code, use existing HTML5 tags and classes to indicate their semantic meaning.
Sure, it is no need to redesign functionality of defining a list before or after including jQuery. It will be just enough to have the ability to change the list in jQuery local variables. As defining custom tags before jQuery will be outside of jQuery, and will be realised by developer if he need those thing. And if developer will need to use "clone()", he can simply call to those function, like I provided in my example: $.customTags("|page"), and jQuery will work fine with those additional tags at "clone" function.
I am asking about this because jQuery servers the same functionality to any browser, and this small change in core, like moving 2 variables from local to global, or adding new method, can allow developers to utilize jQuery native shim method on cloning nodes even if they need one or couple more custom nodes.
I and other people will be really thankful if those method can be implemented. At least till older IEs are still popular.
Thanks!
Regards,
Max
Leave a comment on dave.methvin's reply
That solution doesn't cover all the requirements. The following is the minimum requirement to cover all support:
// Permit userland code to create shim safe
// fragments of their own custom elements
jQuery.reshim = function( s ) {
nodeNames = nodeNames + ( s || "" );
safeFragment = createSafeFragment( document );
rnoshimcache = new RegExp("<(?:" + nodeNames + ")", "i");
};
// fragments of their own custom elements
jQuery.reshim = function( s ) {
nodeNames = nodeNames + ( s || "" );
safeFragment = createSafeFragment( document );
rnoshimcache = new RegExp("<(?:" + nodeNames + ")", "i");
};
This would need to be placed inside the src/manipulation.js module to access the "nodeNames", "safeFragment" and "rnoshimcache" variables and called similarly to your solution ( jQuery.reshim("|tag") ). This is also the same solution that adds 25 minified and gzipped bytes (that I mentioned previously), which we have already ruled will not be added to the core.
Thanks for the complete reply. It covers requirements, as allows users to do reshim. As developers will be able to define tags before jquery loads and do reshim if they need clone functionality.
25 bytes is really big size for the option that is not in such demand. But at least I've tried to have it added.
I think that there is other idea. May be we can make shimCloneNode() function to be a global jQuery method? So, everybody will be able to use it? Or may be it is better to be developed as a plugin, combined with custom clone functionality.
Thanks for all your efforts.
Regards,
Max
Leave a comment on rwaldron's reply
For the record, custom tags is a *feature* of Angular.js (in terms of self-made components), a popular JavaScript framework. I wouldn't be so quick to say custom tags are not the way to go when other popular libraries are using them natively.
Leave a comment on langbert's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to jaguar4adc's idea
{"z2944156":[14737000002943245,14737000002943345],"z3123152":[14737000002939251],"z2949817":[14737000002934960,14737000002941127,14737000002939339,14737000002943423],"z183604":[14737000003448250],"z3239277":[14737000002937196,14737000002941095,14737000002941139,14737000002941125,14737000002941131,14737000002943099,14737000002945055,14737000002944111,14737000002941337]}