Dealing with CSS Shapes and IE Doctype

I have been working on a jQuery plugin that involves CSS Shapes. The issue I have been coming across is that the CSS shapes do not work in IE8 if there is no DOCTYPE declared. This will be my first jQuery plugin.

My question: How do jQuery developers fix this issue? Should I just explain in the documentation that a DOCTYPE is required for this plugin 开发者_如何学Cto work or should I write separate CSS that works in Quirks mode?

Nobody intentionally omits a valid doctype these days - that causes Quirks Mode.

http://hsivonen.iki.fi/doctype/

You willfully want the Quirks mode - No doctype.

Please don’t do this. Willfully designing for the Quirks mode will come and haunt you, your coworkers or your successors in the future—when no one even cares about Windows IE 6 anymore (already no one cares about Netscape 4.x and IE 5). Designing for the Quirks mode is a bad idea. Trust me.

The only possible valid reason a site would not have a doctype is if it's a legacy site where it would take too much effort to fix it to work in Standards Mode.

Your plugin simply does not have to work in Quirks Mode.

You don't even have to mention it in your documentation. It's expected that things will break. For example, none of the new CSS3 stuff in IE9 works if the page is in Quirks Mode.

Doctype should be considered mandatory for all websites. Not having one will cause IE to go into quirks mode. This is a bad thing.

This has been the case for a very long time now (since IE6 was released), so anyone still not using a Doctype really ought not be allowed to write HTML for their own safety! ;-) Therefore I don't think you should worry about how your code looks without a doctype.

However, I would like to point out that the CSS shapes you're drawing, while certainly very clever, should be considered a hack. There are several far better ways to achieve arbitrary shapes in the browser than this.

In addition, please note that the majority of the shapes on the page you linked won't work in IE8 or earlier. (circle and oval use CSS border-radius and many of the others use transform, neither of which are supported in IE8, and quite a few of them use :before and :after CSS selectors, which are in IE8, but not IE7). Even where HTML+CSS can achieve these results, it certainly wasn't designed for this kind of thing. In fact, even in Firefox 3.6, I see some rendering glitches in the page you linked to.

If you want to draw shapes on your page using code, you would be better off using a proper drawing library rather than trying to hack HTML+CSS to do your whims.

I would recommend a library such as Raphael. This library can draw arbitrary shapes on the browser using the vector graphics language SVG. It even works in older versions of IE (where it falls back to a similar language called VML), so you have virtually complete cross-browser support. It also supports animations and other effects, which would be completely impossible with the CSS shapes you're currently using.