I've been tinkering at a new theme for my website 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.
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+).
I use SVG 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 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.
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.
It turns out, as Shelley has mentioned, 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.
I encountered some funniness when I tried to validate my pages on the W3C Validator. 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:
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");
}
?>
You might find some of my old site themes amusing, sad, or boring:
- 2004-04 - Early static HTML, table-based layout, no CSS.
- 2005-04 - Reworked into a templated PHP site. Eventually I turned it from table-based to CSS layout-based (snapshot is table-based).
- 2006-01 - Theme from 2006. Using CSS for layout. Embedded SVG aqua buttons for navigation menus. All modern browsers now support the features I was using on this page.
I admire your boldness, Jeff, the new design looks great in Opera 9.5!
140554 qi Shelley is such a rebel
140615 qi Dillo wants to save http://realtech.burningbird.net/standards/adventures-in-xhtml/ via file dialog. no option to view
My browser is Opera 9.5. It looks nice. The only issue I see is that the blue gradient only extends a little distance down the page instead of down the full side.
Very nice, congratulations
@Phil: What OS? In Windows, Opera 9.5 Build 9694, I get the gradient border all around my pages. I’ll have to check this out on Linux tonight…
@stelt, @Fyrd: Thanks!
I see the same as Phil on 9.5b build 9613 (WinXP), so I assume it’s something that’s been fixed between then and 9694.
Trunk gecko looks good, other than for an annoying sidescroller. I assume this is one of the reported bugs. If so, could you list bug numbers?
@Sander: Oddly I just noticed the horizontal scrollbar in Firefox 3 nightly this morning – and no, it hasn’t been reported yet. I also confirmed Opera behavior: Opera 9.26 on Windows exhibits the same behavior Phil describes. I’ve already talked with Erik @ Opera on this and I might try and fiddle with it to work around this…
Good point about the bug #s. I’ll try to get a post out on the Mozilla and WebKit bugs maybe later tonight…
Jeff: thanks in advance.
Oh, here’s something on Opera I just noticed. The « character (ampersand-laquo;) for going to the previous entry doesn’t show up in Opera (om the same build). Which I think is right, as of course it’s a named character entity which isn’t known in XML (Gecko completely ignores DTDs and “thus” doesn’t know that it shouldn’t know about it).
I’m pretty certain I made at least one major gaffe with that explanation – I never quite could wrap my head around those intricacies of XHTML as application/xhtml+xml – but either way, you’ll probably want to replace it with the numerical character entity. 🙂
@Sander: Thanks – yes I was aware of raquo causing a problem in XHTML. That’s on my list of TO-DOs… as soon as I wrap my own head around it 😉
Btw, I think I fixed Opera 9.2’s unwillingness to show the side gradients. Furthermore, I think I’ve fixed the horizontal scrollbar thing in Firefox/Safari in my latest CSS. Might have to force a refresh to your browser cache though.
Very neat. I like the way you have put an alternative inside the object element. I’m going to try it on FF2 at some point.
But what about the snow??
@Candace: hehe, I think we’re done with snow this winter… I’ll figure out some fun stuff to do with this new theme as it matures and I find the time. In case you need your fix, you can always get it here
Okay Jeff, I’ll look forward to whatever fun stuff the future holds. The new theme looks great btw.
I wish i could use SVG on my wordpress.com served blog
@stelt: It looks like you are using a theme, correct? Does WP.com allow only certain themes or do they allow total customization? If it’s only certain themes, I may work to get my theme ‘publishable’ one day. Until then, you should at least be able to use <object type=”image/svg+xml” …/> correct?
object and iframe are both stripped on preview 🙁