Summary of <!DOCTYPE> Recommendations
There are a ton of threads going back a few years on the use (or avoidance of using) the <!doctype> declaration. In the process of digging through all those threads I ended up with some notes that summarize everything. I thought I'd share them here in case it's helpful to someone in the future. Maybe something like this could be added to the Wiki "FAQ" page?
ExtJS 3.x and Earlier: Sencha recommends NOT using a doctype
- Sencha devs Aaron Conran and Animal recommended NOT using a doctype prior to ExtJS 4 (i.e., that was their recommendation back in 2009). Examples:
- "Our recommendation is to NOT use a doctype as it will induce the least amount of browser bugs particularly in IE. When you force a browser to operate in a more strict mode (which a doctype does) you may uncover strange issues. We try to work around as many of these problems as possible, but the best bet is to not use a doctype." - aconran, March 2009 (source)
- "[...] the best doctype to use is no doctype at all." - aconran, July 2009 (source)
- "Mostly I've seen recommendations to use no doctype. We don't use a doctype." - Animal, July 2009 (source)
ExtJS 4+: Sencha recommends using "strict" doctype.
- Sencha devs Tommy Maintz and Jamie Avins recommend using strict doctype with ExtJS 4+ (source)
- Strict doctype causes browser to run in standards mode. Most browsers are optimized to run in this mode (IE being an exception).
- Examples of strict doctype declaration:
- HTML 4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML 5: <!DOCTYPE HTML>
- Note: IE8 supports the HTML5 version of strict doctype declaration. (source)
- For more info on HTML doctype tags see this and this.
- In summary, use <!DOCTYPE HTML> with ExtJS 4+ unless you need to support browsers older than IE8 (in which case, use the HTML 4-style doctype declaration)
Image blurring in IE8
I've noticed that if I use a doctype then I get blurring of the button text; with no doctype present then the button text looks a lot cleaner - see the attached images.
I notice that in IE, with no doctype specified, that the buttons are formed from tables and image parts. Do you know if it is possible to manually specify to use this type of button markup? (so that it could always be turned on when using IE)
I would not use a doctype, but I then run into problems when centering components using CSS "margin: auto" and have also noticed problems with tree rendering without a doctype. Therefore I think I need to keep it.
Thanks for any help,