How does this work?

The requested file has a "GET" variable attached. A simple server side script provides different headers depending on the value of the variable. You could also use a "POST" variable to achieve the same result.

The mozile style sheet and configuration file are loaded using xhtml <link> tags.

switcher.php

<?php
$make_editable = false;
if ( isset($_GET['edit']) ) {
	switch ($_GET['edit']) {
		case 'XHTML':
			header("Content-type: application/xhtml+xml; charset=iso-8859-1");
			echo '<?xml version="1.0" encoding="ISO-8859-1"?>'."\n";
			$make_editable = true;
			break;
		case 'HTML':
			header("Content-type: text/html; charset=iso-8859-1");
			$make_editable = true;
	}
}
if ( !make_editable ) {
	header("Content-type: text/html; charset=iso-8859-1");
}
include 'switcher_main.php';
?> 

switcher_main.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mozile Mime Type Switcher</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="switcher.css" />
<?php
if ( $make_editable ) {
?>
<link rel="stylesheet" type="text/css" href="mozile.css" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="rsd2.xml" />
<?php
}
?>
</head>
<body>

<div class="divNoEdit">
<div id="switcher">
<ul>
<li><a href="switcher.php">View in any browser</a></li>
<li><a href="switcher.php?edit=HTML">Edit in HTML Mode</a></li>
<li><a href="switcher.php?edit=XHTML">Edit in XHTML Mode</a></li>
<li><a href="switcher_code.php">Show source code</a></li>
</ul>
</div>

<h1>Mozile</h1>
<h2>Mozile Mode Switcher</h2>
<p>This &lt;div&gt; is <i>not</i> editable.</p>

<p><a href="../index.html">Return to main index</a></p>

</div>

<?php include 'switcher_edit1.php' ?>

</body>
</html>

switcher_edit1.php

<div class="divEdit" id="switcher_edit1">
<p>If editing is enabled, this &lt;div&gt; will be editable...</p>

<h3>HTML Mode (text/html)</h3>

<p>You could choose to edit in HTML Mode by serving the document as <b>text/html</b>.
The code produced is not valid HTML because the tags are formatted as XHTML tags.
E.g. &lt;br&gt; becomes &lt;br /&gt;, etc.
With most modern browsers this doesn't cause much of a problem so you can get away
without producing valid markup. When saving files you have a choice of saving
tags in upper case (the default for HTML) or in lower case if you want to be
XHTML compatible. Also note that the eDOM used by Mozile has been written for
XHTML rather than HTML editing, although it could be changed to produce valid HTML.</p>

<p>Editing in HTML Mode has some advantages in that you can still edit a page
even if it is not well formed.
If you try editing an XHTML page served as type application/xhtml+xml and it
contains even a single error in the markup all you will see is a parsing error message.
If you are using lots of scripts server side to dynamically generate pages small
errors could easily creep in unless you check the document is well formed XHTML
before you serve it.
(Even if you do check it, you still have to somehow correct it before serving it.)
Unless you are using an XML serializer server side it seems unlikely with
a large dynamic web site that you could guarantee all pages to be well formed.</p> 

<h3>XHTML Mode (application/xhtml+xml)</h3>

<p>More likely you want to take advantage of the XHTML editing features
that Mozile has been designed for. To do this you need to serve up the page
as <b>application/xhtml+xml</b> rather than as <b>text/html</b>.
For XHTML editing to work your pages <b>must</b> be well formed.
You can not expect to get away with writing sloppy XHTML code
and expect Mozile to work.</p>

<p>This seems easy enough provided you run all your code through a validator
such as Tidy, <i>but</i> you have to remember that <b>XHTML is <i>not</i> HTML</b>.
If it was there would be no point in changing!
In practice, this means you need to take more care over the HTTP headers, how
you specify the character set, and whether you include the XML declarations
at the start of your documents. Finally, you need to note that Internet Explorer
and many old browsers will not handle the <b>application/xhtml+xml</b> Mime type.
Hence the need to switch between different Mime types.</p>

<p>This test document shows the best of both worlds. How to serve up pages
as text/html for viewing in any browser, and how to serve up pages
for editing in HTML and XHTML Modes.</p>

</div>

Mozile.css

/* Mozile CSS */
.divEdit {
-moz-user-modify: read-write; -moz-user-input: enabled; -moz-user-select: text;
}

rsd2.xml

<?php 
header("Content-type: text/xml");
echo '<?xml version="1.0" ?>'."\n";
?>
<rsd version="1.0" zzxmlns="http://archipelago.phrasewise.com/rsd">
<settings>
<setting name="mes">XHTML</setting>
<setting name="tagCSS">XHTML</setting>
<setting name="pasteMode">text</setting> 
<setting name="savePresetDisallow">all</setting>
<setting name="saveContent">page</setting>
<setting name="saveMethod">display</setting>
<setting name="saveMethodDisallow">webdav</setting>
<setting name="httpSavePath">save_204.php</setting>
<setting name="httpSavePathModify">false</setting>
<setting name="saveHTMLCompatibility">xhtml</setting>
</settings>
</rsd>