<!DOCTYPE html>
<!-- ========================================== kroc camen of camen design ============================================= -->
<title>blog · Microsoft, Please Stop This Madness</title>
<link rel="stylesheet" type="text/css" href="/design/design.css" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="alternate" type="application/rss+xml" href="/blog/rss" title="Just blog" />
<link rel="canonical" href="/blog/stop_this_madness" />
<!-- =================================================================================================================== -->
<header>
	<h1><a href="/" rel="index">
		Camen Design
	</a></h1>
	<nav><ul>
		<li><a href="/">all</a></li>
		<li><a href="/projects">projects</a></li>
		<li><a href="http://forum.camendesign.com">forum</a></li>
	</ul><ul>
		<li><a href="/quote/">quote</a></li>
		<li><a href="/writing/">writing</a></li>
		<li><a href="/blog/" rel="tag">blog</a></li>
		<li><a href="/photo/">photo</a></li>
		<li><a href="/code/">code</a></li>
		<li><a href="/art/">art</a></li>
		<li><a href="/link/">link</a></li>
		<li><a href="/poem/">poem</a></li>
		<li><a href="/audio/">audio</a></li>
	</ul><ul>
		<li><a href="/web-dev/">web-dev</a></li>
		<li><a href="/annoyances/">annoyances</a></li>
		<li><a href="/eve/">eve</a></li>
		<li><a href="/inspiration/">inspiration</a></li>
		<li><a href="/code-is-art/">code-is-art</a></li>
		<li><a href="/windows/">windows</a></li>
		<li><a href="/gaming/">gaming</a></li>
		<li><a href="/gift/">gift</a></li>
		<li><a href="/mac/">mac</a></li>
		<li><a href="/osnews/">osnews</a></li>
		<li><a href="/c64/">c64</a></li>
		<li><a href="/linux/">linux</a></li>
	</ul>
	<a rel="previous" href="/blog/tour_de_england">
		older article →
	</a><a rel="next" href="/blog/minecraft">
		← newer article
	</a></nav>
</header>
<!-- =================================================================================================================== -->
<article><header>
	<!-- date published or updated -->
	<time pubdate datetime="2010-09-21T13:00:00+01:00">
		<sup>1:00<abbr>pm</abbr> • 2010</sup>
		<abbr title="September">Sep</abbr> 21
	</time>
	<!-- categories -->
	<ul>
		<li><a href="/blog/stop_this_madness" rel="bookmark tag">blog</a></li>
		<li><a href="/windows/stop_this_madness">windows</a></li>
		<li><a href="/annoyances/stop_this_madness">annoyances</a></li>
	</ul>
	<!-- licence -->
	<small>
		<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_GB">c</a>
		share + remix
	</small>
</header>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<section>
<h1>Microsoft, Please Stop This Madness</h1>
<aside>
	<strong>Update:</strong><br />
	Added <a href="#answers">response to feedback</a>.
</aside>
<p>
	<strong>Microsoft have released a beta of Internet Explorer 9.</strong> This much is good, they’re back in the
	game. The engine supports modern standards—and for the first time Internet Explorer now renders this website
	(which has been HTML5 <a href="/hello">since early 2008</a>).
</p><p>
	I said that my website will work with IE when Microsoft fix IE to work with my site, rather than change my code to
	suit them. They have done exactly that. This is a new era where developers can code for standards and expect
	browsers to support <em>them</em> instead of the other way around.
</p><p>
	One feature IE9 supports is pinning websites to the task bar as web-apps. Microsoft have said that the jump list
	(neé context-menu) in Windows 7 can be customised using some HTML. I was intrigued by this part—<em>what</em>
	HTML, exactly?
</p>
<figure>
	<figcaption></figcaption>
	<img src="/blog/stop_this_madness/ie9-ars-jump-list.png" alt="Example of IE9’s ‘jump-list’ menu on Ars Technica" width="269" height="350" />
	<figcaption>IE9 web-app jump list<br />image courtesy of <a href="http://arstechnica.com/microsoft/news/2010/09/inside-internet-explorer-9-redmond-gets-back-in-the-game.ars">Ars Technica</a></figcaption>
</figure>
<p>
	This HTML, apparently.
</p>

<pre><code>&lt;!-- C-razy IE9 stuff --&gt;
&lt;meta name="application-name" content="Ars Technica"/&gt;
&lt;meta name="msapplication-starturl" content="http://arstechnica.com/"/&gt;
&lt;meta name="msapplication-tooltip" content="Ars Technica: Serving the technologist for 1.2 decades"/&gt;
&lt;meta name="msapplication-task" content="name=News;action-uri=http://arstechnica.com/;icon-uri=http://arstechnica.com/favicon.ico"/&gt;
&lt;meta name="msapplication-task" content="name=Features;action-uri=http://arstechnica.com/features/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-features.ico"/&gt;
&lt;meta name="msapplication-task" content="name=OpenForum;action-uri=http://arstechnica.com/civis/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-forum.ico"/&gt;
&lt;meta name="msapplication-task" content="name=One Microsoft Way;action-uri=http://arstechnica.com/microsoft/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-omw.ico"/&gt;
&lt;meta name="msapplication-task" content="name=Subscribe;action-uri=http://arstechnica.com/subscriptions/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-subscribe.ico"/&gt;</code></pre>

<p>
	Stop this madness Microsoft! This is the exact same kind of terrible, short-sighted, browser-specific garglemesh
	that plagued the web with “favicon.ico”—a Microsoft only image format that forced a specific file name and
	location (and generates billions of 404s across the web every day).
</p><p>
	Microsoft, if you want a way to declare a context-menu in HTML in a browser-agnostic way that is both forward and
	backwards compatible <strong>use HTML5’s
	<a href="http://www.whatwg.org/specs/web-apps/current-work/#menus"><code>&lt;menu&gt;</code>
	element</a>!</strong> Even IE6 supports it without any hacks because it was part of HTML4 and thus, not an
	anonymous element.
</p><p>
	As browser UI begins to converge and websites become more and more integrated into the OSes we use, the menu element
	is there to describe native toolbars, menus and context menus that the user-agent could expose. It would thus make
	sense to use this to specify the jump lists as it can <em>easily</em> expand in capabilities in the future and
	it’s way easier for other vendors to get on board with than the horrible hack that was favicon.ico.
</p><p>
	All the developer needs to do is include an HTML5 <code>&lt;menu&gt;</code> element which for backwards
	compatibility they can hide using CSS, and a meta tag to tell IE the ID of the menu element to use as the jump list.
</p>

<pre><code>&lt;!doctype html&gt;
&lt;head&gt;
	&lt;title&gt;Ars Technica&lt;/title&gt;
	&lt;meta charset="utf-8" /&gt;
	&lt;meta name="ms-application-jumplist" content="jump" /&gt;
	&lt;style&gt;
		#jump	{display: none;}
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;menu id="jump" type="context"
	      label="Ars Technica" title="Ars Technica: Serving the technologist for 1.2 decades"
	&gt;
		&lt;li&gt;&lt;a href="http://arstechnica.com/"&gt;
			&lt;img src="http://arstechnica.com/favicon.ico" /&gt; News
		&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="http://arstechnica.com/features/"&gt;
			&lt;img src="http://static.arstechnica.net/ie-jump-menu/jump-features.ico" /&gt; Features
		&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="http://arstechnica.com/civis/"&gt;
			&lt;img src="http://static.arstechnica.net/ie-jump-menu/jump-forum.ico" /&gt; OpenForum
		&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="http://arstechnica.com/microsoft/"&gt;
			&lt;img src="http://static.arstechnica.net/ie-jump-menu/jump-omw.ico" /&gt; One Microsoft Way
		&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="http://arstechnica.com/subscriptions/"&gt;
			&lt;img src="http://static.arstechnica.net/ie-jump-menu/jump-subscribe.ico" /&gt; Subscribe
		&lt;/a&gt;&lt;/li&gt;
	&lt;/menu&gt;
&lt;/body&gt;</code></pre>

<p>
	This has the added benefit of being valid HTML5 and far more future proof than an insane collection of messy meta
	tags. This is a fully parseable tree that would be easier to mash up and present in external contexts.
</p><p>
	Microsoft, please don’t cripple user-agents with another bone-headed mistake like favicon.ico again. You may
	support all the standards with your new browser but you have a long way to go to learn about writing decent HTML and
	we don’t want you screwing it up for all of us, especially those who have been already using HTML5 for the last
	two years and don’t want to go back to doing things “the Microsoft way” and duplicating for “the proper
	way”.
</p><p>
	There’s a standard for context menus, now please use it.
	<br /><br />
	Kind regards,<br />
	<em>Kroc Camen.</em>
</p>


<h2 id="answers">Assertions Answered:</h2>
<p>
	Well, my my, this attracted a lot of attention. My thanks goes out to all those who helped spread this blog post,
	first across Twitter, then on Reddit, then on HackerNews and as I’ve heard from kind users, apparently into the
	very bowels of Microsoft.
</p><p>
	There has been much feedback, and aside the positive, it falls into the following categories:
</p>
<dl>
	<dt id="">Using a CSS hack to hide the <code>&lt;menu&gt;</code> is wrong</dt>
	<dd>
		<p>
			I don’t think you understand the term “CSS hack”. This is <em>just</em> CSS. This is the
			exact opposite of a hack. You don’t even have to use the
			<a href="http://code.google.com/p/html5shiv/">IE HTML5 shim</a>, because
			<code>&lt;menu&gt;</code> is a recognised element in IE6+. Hiding this from non-supported
			browsers is exactly the thing we should be doing, and if screen readers do pick it up—then all
			the better—it’s infinitely more accessible than a bunch of meta tags which are purposefully
			designed to be invisible from the document and not presented to the user in any way.
		</p><p>
			Screen readers would greatly benefit from being able to just press a key and get a jump list to
			the most pertinent navigation, rather than scrolling through the ads and
			<a href="/web-dev/if-i-designed-engadget">pointless fluff</a> that bogs pages down these days.
			This directly relates to the next point…
		</p>
	</dd>
	<dt id="">This is an external menu, not one within the page</dt>
	<dd>
		<p>
			I’ve heard it said many times that <code>&lt;menu&gt;</code> is for menus <em>inside</em> the
			page, not outside. In my opinion <code>&lt;menu&gt;</code> is for defining <em>chrome</em>, not
			just in-page content. That is, chrome may take whatever form is relevant to the particular
			application, operating system and device that it is in use. Not all menus have to be menu-shaped
			and look like menus and appear in menu places.
		</p><p>
			We need to seriously think outside of IE, outside of Windows and outside of desktop operating
			systems.
		</p><p>
			Just because Internet Explorer presents the data as an external context-menu on the application
			icon, that doesn’t mean that that should be the one and only use for the data (which is the very
			problem with what Microsoft have done here). What if another user-agent wants to show the menu
			inside the browser, when you right-click on a tab? Or in the regular context menu, or in a pie
			menu on a special key press, or as a spoken list for screen readers? Or even printed out and flown
			to you by pigeon—if you so please?
		</p><p>
			The <em>point</em> is that it is entirely up to the application, the operating system, and the
			hardware to decide for itself what is the appropriate way to display this information and
			Microsoft’s one browser, one OS, one platform <ins>to rule them all</ins> approach is the
			problem.
		</p><p>
			Why should every web author be burdened with this bloat for one browser’s feature? Should we
			have a set of metadata for Firefox, a set for Opera, a set for WebKit and another set for the
			different style of chrome in mobile browsers? Is 100+ lines of meta the right way to do this as
			more and more OS-integration occurs?
		</p><p>
			Is IE9 on Windows 7 <em>the only way</em> to design a browser and to implement a feature?
		</p><p>
			Microsoft completely sidestepped the democratic processes, instead having foistered on us a
			perpetual desktop browser mindset which has left them <a href="/writing/missed_the_boat">three
			years behind the competition in the mobile space with a completely useless mobile web
			browser</a>.
		</p>
	</dd>
	<dt id="">Experimentation with proprietary additions is normal, and good</dt>
	<dd>
		<p>
			Yes, and it’s
			<a href="http://web.archive.org/web/20110709121809/http://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element">why
			we have the <code>&lt;img&gt;</code> tag</a>, <code>&lt;canvas&gt;</code>, and even
			<a href="http://www.osnews.com/story/22677/_Re-_Introducing_HTML5_Video">the
			<code>&lt;video&gt;</code> element</a>.
		</p><p>
			There’s a big difference between a feature that one browser vendor adds for the benefit of all
			other vendors (see how vendors have played off of what others have shipped to help shape
			<code>&lt;video&gt;</code> support), and features that are
			<a href="http://weblogs.mozillazine.org/roc/archives/2010/01/activex_all_ove.html">purposefully
			obtuse</a> and are instead designed only to
			<a href="http://osnews.com/story/23735/MPEG-LA_Makes_Free_Internet_Video_Royalty_Free_Perpetually">spearhead
			market share</a>.
		</p><p>
			I am to take it, Microsoft, that you will be donating the <abbr title="icon">ICO</abbr> format to
			the public domain, correct? You are recommending that web authors should use this proprietary
			format and that other web browsers should too [since you won’t accept other file formats like
			PNG in jump lists].
		</p><p>
			How Microsoft have designed this standards-extension is for the purpose that <em>you</em>, dear
			web-authors, will write this ugly code into your pages and help sell copies of Windows 7 for them
			for free (IE9 won’t be available for Windows XP, despite Firefox providing hardware acceleration
			on XP just fine). Want a better integrated web? Simply buy a PC running Windows 7, or upgrade your
			old Windows XP! You could of course just download any web browser for free and even use a free
			operating system, but promoting that won’t sell copies of Windows 7, so this new feature needs
			to be executed in an IE-only fashion to deter other vendors from implementing this feature in
			other-contexts not related to Windows 7. Not least what I've laid out in the previous point with
			user-agents perhaps coming up with <em>better</em> ideas (I would quite like my news delivered by
			pigeon at just the click of a button).
		</p><p>
			Okay, okay, so I’m being unduly unfair to Microsoft. They have every right to put whatever
			features into their software and better integration with the specific behaviours of operating
			systems is a very good thing, compared to making all browsers look the same and smell the same
			regardless of platform.
		</p><p>
			But—and it’s a big but—I have been so uppity over this feature announcement because
			Microsoft don’t seem to have acknowledged that they no longer control the web and are just
			merely participants with a number of other brothers and sisters who are all trying to steer the
			good ship ’Web in a good direction, and that Microsoft—if it does not want to offend—should
			not just grab the wheel and steer it head-first into Windows-land.
		</p><p>
			Can you honestly say Microsoft that having this markup around for 10 years is going to be just
			peachy? That it’s in no way short-sighted? Is it really going to help a diverse web full of
			different browsers on different hardware, with different screen sizes and input methods on
			different operating systems?
		</p><p>
			Your meta data method has to be parsed and extracted in an oblique, single-purpose way unlike any
			other part of HTML5, especially the HTML5 parsing algorithm, which my example markup does work
			with (it being valid HTML5).
		</p><p>
			Your HTML, like diamonds, should be forever.
		</p>
	</dd>
</dl>
<p>
	The future of the ‘browser wars’ is he who integrates with the OS best. We can do this either the hard way, or
	we can do this the easy way. I hope we choose the way where everybody participates fairly and makes use of each
	other’s innovations rather than stifling the progress of the individuals who we are privileged enough to design
	and build for their future.
</p>
</section>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
</article>
<footer>
	<nav><a href="http://forum.camendesign.com">‹ Discuss this in the Forum ›</a></nav>
		
	<a href="mailto:kroc@camendesign.com">kroc@camendesign.com</a>
	<nav>view-source:
		<a href="/blog/stop_this_madness.rem">Rem</a> •
		<a href="/blog/stop_this_madness.html">HTML</a> •
		<a href="/design/">CSS</a> •
		<a href="/.system/">PHP</a> •
		<a href="/.htaccess">.htaccess</a>
	</nav>
	<form method="get" action="https://duckduckgo.com">
		<input type="hidden" name="sites" value="camendesign.com" />
		<input type="search" name="q" placeholder="search…" />
		<input type="submit" value="Go" />
	</form>
</footer>
<!-- =================================================================================================== code is art === -->