Comments on: Adding Custom Tags To Internet Explorer, The Official Way

By: Tribulus

Tribulus — Wed, 01 Oct 2008 12:18:46 +0000

this is a great idea
i like it

By: cromwellian

cromwellian — Thu, 04 Sep 2008 17:47:53 +0000

@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

By: jkd

jkd — Thu, 04 Sep 2008 16:06:10 +0000

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:

By: Mikael Bergkvist

Mikael Bergkvist — Thu, 04 Sep 2008 11:59:35 +0000

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.

By: Mikael Bergkvist

Mikael Bergkvist — Thu, 04 Sep 2008 11:27:52 +0000

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.

By: kim3er

kim3er — Thu, 04 Sep 2008 11:23:13 +0000

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

Rich

By: Mikael Bergkvist

Mikael Bergkvist — Thu, 04 Sep 2008 11:20:14 +0000

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.

By: Brad Neuberg

Brad Neuberg — Thu, 04 Sep 2008 10:49:23 +0000

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:

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

By: cromwellian

cromwellian — Thu, 04 Sep 2008 08:58:01 +0000

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?

By: Brad Neuberg

Brad Neuberg — Thu, 04 Sep 2008 08:30:53 +0000

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:

Hello World!

fill=”none” stroke=”blue” stroke-width=”2″>

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

By: V1

V1 — Thu, 04 Sep 2008 08:14:02 +0000

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

By: GalloNero

GalloNero — Thu, 04 Sep 2008 06:54:07 +0000

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.

By: TNO

TNO — Thu, 04 Sep 2008 03:24:27 +0000

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

By: AriesBelgium

AriesBelgium — Thu, 04 Sep 2008 02:39:20 +0000

Yet another way to screw up the web :(

By: Dion Almaer

Dion Almaer — Wed, 03 Sep 2008 23:50:57 +0000

TNO,

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

Cheers,

Dion

By: TNO

TNO — Wed, 03 Sep 2008 23:33:42 +0000

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).

By: Mikael Bergkvist

Mikael Bergkvist — Wed, 03 Sep 2008 23:25:54 +0000

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

By: cromwellian

cromwellian — Wed, 03 Sep 2008 22:55:59 +0000

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. :)