{"id":425,"date":"2008-02-18T23:01:58","date_gmt":"2008-02-19T05:01:58","guid":{"rendered":"http:\/\/www.codedread.com\/blog\/archives\/2008\/02\/18\/new-xhtmlsvg-theme\/"},"modified":"2008-02-18T23:01:58","modified_gmt":"2008-02-19T05:01:58","slug":"new-xhtmlsvg-theme","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2008\/02\/18\/new-xhtmlsvg-theme\/","title":{"rendered":"New XHTML+SVG Theme"},"content":{"rendered":"

<\/object>I've been tinkering at a new theme for my website<\/a> since the Christmas holidays and finally got around to flipping the switch this weekend. I decided to try my hand, for the first time, at real XHTML served as application\/xhtml+xml but with PHP content negotiation to text\/html for poor ol' Internet Explorer. <\/p>\n

I like the idea of having a seamless transition between my blog and website. so this evening I decided to flip the switch on the blog, even though the WordPress theme is very much a work-in-progress. I still need to figure out what to do with the sidebar, but I can always hack away on the theme on my old blog installation internally and publish updates once they have been verified on a set of decent browsers (Firefox 2+, Opera 9+, Safari 3+).<\/p>\n

I use SVG<\/a> in a bunch of different places: inline as decoration around the page (the blue gradient and the title) and referenced (via <object>) for the icon menu (at the top) and W3C validation badges (at the bottom). Once I nail down all the particulars, I'll compress menu.svg<\/a> and serve only menu.svgz so it can be neatly cached (at roughly 15kb). But I'll keep menu.svg around for web developers to look at if they're curious.<\/p>\n

Work on this led to a few bugs reported at Mozilla, WebKit and Opera - but no show stoppers. The best user experience is in Opera 9.5. For the first time, I'm using declarative animation (in a simple way) for icon mouse-hovering. Firefox and Safari users miss out for now, unfortunately.<\/p>\n

It turns out, as Shelley has mentioned<\/a>, that the best developer experience to work on XHTML is also (by far) Opera. Instead of Firefox's \"yellow screen of death\" we're greeted with Opera's \"light grey screen of mild achiness\". Instead of cryptic messages about unexpected tags, the element which failed to be terminated and the tag that broke the XML parsing are highlighted for you.<\/p>\n

I encountered some funniness when I tried to validate my pages on the W3C Validator<\/a>. Apparently it thought they were text\/html pages. So I had to add a little catch in my PHP content negotiation code to force application\/xhtml+xml when I want to. Anyway, the PHP content negotiation code looks like this:<\/p>\n

<?php
if( (!stristr($_SERVER[\"HTTP_ACCEPT\"],\"application\/xhtml+xml\") &&
     !isset($_GET['xhtml'])) || $_GET['xhtml'] === '0' )
{
  header(\"Content-Type: text\/html;charset=utf-8\");
  header(\"Vary: Accept\");
  printf(\"<!DOCTYPE HTML PUBLIC \\\"-\/\/W3C\/\/DTD HTML 4.01\/\/EN\\\"\".
    \" \\\"http:\/\/www.w3.org\/TR\/html4\/strict.dtd\\\">\\n\");
  printf(\"<html lang=\\\"en\\\">\\n\");
}
else
{
  header(\"Content-Type: application\/xhtml+xml;charset=utf-8\");
  header(\"Vary: Accept\");
  printf(\"<\" . \"?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\" ?\" . \">\\n\");
  printf(\"<!DOCTYPE html PUBLIC \\\"-\/\/W3C\/\/DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1\/\/EN\\\"\" .
    \"\\\"http:\/\/www.w3.org\/2002\/04\/xhtml-math-svg\/xhtml-math-svg.dtd\\\">\\n\");
  printf(\"<html xmlns=\\\"http:\/\/www.w3.org\/1999\/xhtml\\\" xmlns:svg=\\\"http:\/\/www.w3.org\/2000\/svg\\\"\" .
    \" xmlns:xlink=\\\"http:\/\/www.w3.org\/1999\/xlink\\\" xml:lang=\\\"en\\\">\\n\");
}
?><\/div>\n

You might find some of my old site themes amusing, sad, or boring:<\/p>\n