Wednesday, September 3rd, 2008

Adding Custom Tags To Internet Explorer, The Official Way

Category: Browsers, HTML, IE

There have been some clever tricks to create new custom tags in Internet Explorer, such as the createElement trick. However, I never realized that Internet Explorer itself provides a facility to define new tags in the markup and have them styled, since Internet Explorer 5!

Some details from the MSDN documentation on this feature, titled “Using Custom Tags In Internet Explorer”. The trick lies in making sure you namespace things. For example, in the MSDN docs for this feature the example of creating a new JUSTIFY tag is given:


<HTML XMLNS:MY>
<MY:JUSTIFY>
   This paragraph demonstrates sample 
   usage of the custom MY:JUSTIFY tag in a document. 
   By wrapping the paragraph in start and end 
   MY:JUSTIFY tags, the contained
   text is justified within the specified width. Try 
   resizing the window to verify that the
   content is justified within a 500-pixel width. 
   And don't forget to right-click anywhere on the
   window and "View Source".
</MY:JUSTIFY>

You can even style this with CSS!


<HTML XMLNS:MY>
<STYLE>
@media all {
   MY\:JUSTIFY  { text-align:justify; width:500 }
}   
</STYLE>

The docs then go on to discuss applying an Internet Explorer ‘behavior’ to this custom element to give it expanded abilities:

Custom tags become much more interesting when applied with a DHTML behavior. Introduction to DHTML Behaviors (or behaviors) are applied to elements on a page, the same way styles are, using cascading style sheets (CSS) attributes. More specifically, the proposed CSS behavior attribute allows a Web author to specify the location of the behavior and apply that behavior to an element on a page.

Using DHTML in Internet Explorer 4.0.0, it is possible to create simple animated effects, such as flying text, by manipulating the position of elements on a page over time. Beginning with Internet Explorer 5, this functionality can be encapsulated in a behavior, applied to a custom <InetSDK:FLY> tag, and wrapped around blocks of text on a page. This can be applied to cause text to fly from various directions.

I’m going to do more testing on this functionality today to see how deep it goes, but if true it makes it easier to create browser shims for Internet Explorer for things like SVG, MathML, etc., including HTML 5 (if we namespace the HTML 5 elements, required to get this to work).

The reason I’m looking for an alternative to the createElement trick is I’ve found that it doesn’t work with nested custom tags, which limits its usefulness. For example, I’ve found the following to not enter the DOM correctly:

  1. <html>
  2. <body>
  3.   <custom_container>
  4.      <custom_child></custom_child>
  5.   </custom_container>
  6. </body>
  7. </html>

Posted by Brad Neuberg at 1:30 pm
18 Comments

++---
2.6 rating from 27 votes

18 Comments »

Comments feed TrackBack URI

I wish we didn’t have to find hacks like this. I’m wondering if my kids will be in college before the bane of IE6 is a distant memory. :)

Comment by cromwellian — September 3, 2008

http://www.widgetplus.com/x is another way.. which works in all browsers..

Comment by Mikael Bergkvist — September 3, 2008

You know….if you just served the file as xml, just attach an xsl to it and make as many custom tags and tag groups as you want with an identity template + custom template (no namespace or behavior required).

Comment by TNO — September 3, 2008

TNO,

The point is being able to do these things in an HTML world vs. an XML one :)

Cheers,

Dion

Comment by Dion Almaer — September 3, 2008

Yet another way to screw up the web :(

Comment by AriesBelgium — September 3, 2008

Dion,
Since when was the web html vs xml? Here’s a quick example of what I’m talking about:

http://thenewobjective.com/temp/template.xml

Comment by TNO — September 3, 2008

I stumbled across this method last year and couldn’t believe what a ‘hack’ it was – blogged about it here: http://happyworm.com/blog/?p=6

The XSL method sounds interesting but no good for what I was trying to achieve.

Comment by GalloNero — September 4, 2008

but, WHY would u want to do that o.o. Yes its “neat” but whats the point? or am i missing the bigger picture here

Comment by V1 — September 4, 2008

Hi folks, the whole idea behind this is to help goad Internet Explorer into being more standards compliant. For example, we could get it to embed SVG into native HTML documents doing something like the following:

<html xmlns:svg=”http://www.w3.org/2000/svg”>
<body>
<h1>Hello World!</h1>
<svg:svg id=”mySVG” width=”800px” height=”400px” version=”1.0″>
<svg:rect x=”1″ y=”1″ width=”1198″ height=”398″
fill=”none” stroke=”blue” stroke-width=”2″></svg:rect>
</svg:svg>
</html>

So we use proprietary IE features in order to help support JavaScript shims for the open web, such as for HTML 5. That’s why I’m interested in these tricks.

Best,
Brad

Comment by Brad Neuberg — September 4, 2008

Aiyah!, that’s a tall order. Admirable hack if accomplished, but I gather you’d need to use Silverlight (or Flash) to accomplish this SVG emulation because I don’t think VML is up to it.

First order of business would be putting in a shim for /CanvasRenderingContext2D that works 100% with reasonable performance. It’s a simpler problem to bite off given the simplicity of the Canvas spec vs SVG.

Brad, I must admit, I tried something like this before, and it failed to play well with CSS, that is, I could not coax custom tags to have layout so that DX filters/opacity and other CSS attributes would work. I tried all the standard tricks (zoom: 1, etc) Any idea if this technique plays well with IE’s CSS engine and element.currentStyle?

Comment by cromwellian — September 4, 2008

Hi Cromwellian, I am working on a drop-in SVG shim that does two things:

* Lets you embed SVG in normal HTML documents (text/html rather than XHTML)
* Works on IE

For IE, I’m using an open source Flash renderer. I’ve prototyped out lots of pieces of the system so far. I’ve been able to get embedded SVG to show up in the DOM of IE and render with the Flash control transparently; have embedded SVG work in Safari and Firefox in normal HTML documents; and tonight I prototyped out being able to use the standard DOM interfaces to manipulate the SVG. That last part is very prototypie, but I was able to proof-of-concept doing something like the following:

document.getElementById(“mySVG”).getAttributeNS(svgNS, “fill”);

which would return the actual fill value, or setAttributeNS to set it; I haven’t started on others DOM methods, since I just wanted to see if the approach I was taking was realistic, but you could imagine createElement, appendChild, etc. working. Under the covers, I’m simply using IE Behaviors to override standard methods, such as getAttributeNS, as well as to have these new behaviors and ‘fake’ DOM methods propagate to the SVG tags efficiently:

<style>
svg\:* { behavior: url(svg.htc); }
</style>

In the Behavior’s HTC, I then simply use ExternalInterface to call into the Flash file to actually get, set, or manipulate the shadow DOM being displayed.

All of this is _very_ prototypie right now, but the proof of concept is feeling good in terms of not hitting anything that looks impossible.

I haven’t attempted to tackle CSS issues yet. I know that Firefox ignores custom CSS properties by design; not sure if IE does so — if it doesn’t then that will make life much better. I think I’m going to hold off on that though until I get static SVG displaying in the Flash to a higher quality, as well as firm up the programmatic DOM manipulation stuff.

Exciting times :)

Best,
Brad
Google Open Web Advocate

Comment by Brad Neuberg — September 4, 2008

A) Custom tags, without namespaces, works in IE.
If you simply use the tags to load arguments into a flash file, then getElementsByTagName(“custom”) works even if the tags aren’t recognized any other way.
B) The old animation markup language Liquid
( http://www.google.com/search?hl=en&safe=off&q=liquid+xml+animation+markup )
works perfectly well doing exactly what you want.
It allows custom tags without namespaces and it’s also allowing for nested tags, etc.
But, as noted, you wont need any of that if all you want from this to have the tags there and hold the structure + data.

Comment by Mikael Bergkvist — September 4, 2008

Brad, that sounds really cool. Please keep us updated.

Rich

Comment by kim3er — September 4, 2008

Liquid can be downloaded as a windows app here, http://www.widgetplus.com/space/apps/liquid1.6.zip , and it’s a HTML application – (http://www.mioplanet.com – similar to AIR) – and it runs using JS, and it works by first scanning the page for all custom tags using getElementsbyTagName(), and is then attaching behaviors to them by the same sorts of selector behavior that JQquery uses, only far less elegant of course.

Comment by Mikael Bergkvist — September 4, 2008

This example requires IE and VML to work, and it’s custom tags in IE, http://www.widgetplus.com/space6/ , the source reveals that it’s all custom tags embedded in the HTML of the page.
The **3D engine** is a horrible hack though, I was in a hurry and the whole app was writen during one afternoon way back in the year 2000.

Comment by Mikael Bergkvist — September 4, 2008

If you’re just interested in embedding SVG, you can embed an tag in the head and let IE work its magic… this is an XSL document that packages that magic so that you don’t need to worry about it.
http://www.browserland.org/xmlstuff/cxd/

As for custom tags in general, you could always rely on a plain-jane div or span with custom attributes. In any case, this seems to show up properly in both the DOM and the styling:

document.createElement(“myparenttag”).appendChid(document.createElement(“mychildtag”))

Then you can do:

Comment by jkd — September 4, 2008

@Brad,
Sounds like excellent progress! My comment about custom tags and CSS wasn’t about making custom CSS properties (I tested every browser and they all ignore unknown properties and do not reflect them in the CSSOM as CSS_IUKNOWN values as allowed by the spec), it’s about applying CSS to custom tags.

In my charting library Chronoscope, I have something I call “GSS” or graph style sheets. You “style” the chart by including a CSS stylesheet that targets phantom DOM elements like axis, plot, line, point, etc. The chart injects these phantom elements on demand and uses getComputedStyle()/currentStyle to probe the effect the CSS had on them.

However, in no cases could I ever force IE to give “layout” to a custom tag, which meant I lose a lot of CSS properties that apply to elements with layout only.

So I punted on leveraging the browser, and used my GwtQuery selector engine to parse CSS stylesheets in JS, which gives me full control over how they are applied, custom properties, etc

Comment by cromwellian — September 4, 2008

this is a great idea
i like it

Comment by Tribulus — October 1, 2008

Leave a comment

You must be logged in to post a comment.