Stepping into the future
A little while back a friend of mine was telling me about a project he was working on. One of the things he mentioned was how he was using some of the new styles CSS3 offers. Around the same time I discovered a script that would enable some of those CSS3 feature in Internet Explorer. That got me thinking about things and one day I was looking at this site and decided to overhaul things.
Initially my plan was to to replace the complex use of images to do the rounded corners and drop shadow effects. But once I got going I ended up changing large chunks of the CSS, converting to HTML5, and radically altering IE support.
CSS3
I started out only intending to use the CSS3 styles border-radius and box-shadow to replace the way it was currently done. Previously in order to achieve the rounded corner effects, it required the use of some complex html, several images, and a large chunk of CSS. I decided with all current browsers but IE supporting border-radius (either border-radius directly or by extensions like -webkit-border-radius and -moz-border-radius) that I would use that. So I set out and deleted the complex html and replaced large amounts of CSS with just a handful of new properties. The results were great. Side by side the old way and new one looked identical. I then did the same thing using the box-shadow property. Doing this removed about 900 lines of CSS, 100k worth of images, and reduced the page size about 10k.
The old way
The new way
Now this had the site looking the same in all browsers but IE. The solution for this is a behavior file for IE that adds support for border-radius and box-shadow. After a short time fighting to get it to work I figured it out and had the site looking the same in IE…. Well mostly. The behavior file only supports border-radius so all 4 corners are rounded. The boxes in the right side bar only have the top corners rounded and the script didn’t work for those. After exploring possibly using something like DD_roundies to support this I decided that I was ok with that little bit of the site looking square in IE.
HTML5
After that I started wondering about other new browser technologies out there. With HTML5 being the main one. I started testing out the water by replacing the doctype with <!DOCTYPE html>. Ah simplicity. Then I reduced the html tag to <html lang=”en-US”>. Liking it so far. But there’s a lot more to HTML5 than just shortening a few tags.
One of the more notable changes is new input types. Types like email, url address, search, date, color picker. Now being a blog the only input box on my site is a search box to search the archives. So I changed it to be type=’search’. Now what does this do? In most browsers, nothing. It just acts like a plain old text input. But in Safari and Chrome when you enter something into the box a little x appears on the right that you can click to clear the box. I know right, it’s awesome. Another new input feature of HTML5 is the placeholer attribute. This attribute allows you to define text that will show up in the input when no text has been entered. So in browsers that support it (currently just Safari and Chrome) you’ll see ‘Search Archives’ show up as place holder text in the search box.
HTML5 comes with a new set of semantic tags. Those tags are: <section>, <nav>, <article>, <aside>, <hgroup>, <header>, <footer>, <time>, <mark>. Now when I first saw those tags I think I reacted like everyone else did. “Well those are stupid. Why not just use div’s.” But then I got to thinking about it and what HTML is really for. HTML is the Hyper Text Markup Language. It’s meant to mark up text on the web in some meaningful way. We’ve just been using div’s cause we needed a way to style things. So then it made sense to use specific tags to markup the different bits of content.
As a result I’ve taken to using the header, footer, nav, article, aside, and time tags in their respective places. Now this brings up the question of how browsers handle these unknown tags. It comes down to 2 issues, how are unknown tags styled and how are they placed in the DOM tree in relation to the other tags. Most browsers just don’t style unknown elemets but allow you to with CSS. Also most browsers place the nodes in the DOM tree how they are defined. The exception here is IE. It doesn’t allow styling of unknown elements and it places them as empty nodes in the DOM tree, thereby breaking the structure. There’s a fix for this though. By using JavaScript to create dummy elements, IE will then recognize them and do the expected thing. So we add basically the following code.
<!--[if lt IE 9]>
<script>
var e = ("abbr,article,aside,audio,canvas,datalist,details," +
"figure,footer,header,hgroup,mark,menu,meter,nav,output," +
"progress,section,time,video").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->
This code creates all the new HTML5 elements in IE so that they will work. I am using the html5shiv script to do this. Another thing to add is this bit of CSS that will give these new elements a sensible default.
header, footer, article, section, hgroup, nav, figure {
display:block;
}
With all that in place we can use the new HTML5 tags like we want.
The final stop on the HTML5 tour is video. I’m not really a fan of Flash and have never really gotten it to work for playing videos on the site. So I was excited about having the browser be able to handle the video. I decided that I wanted to make use of the Video 4 Everyone code that would make it so HTML5 video would work using H.264 or Theora depending on the browser, but also drop down to using a Flash player if HTML5 video wasn’t supported.
I searched for a WordPress plugin that would do this and found a couple, but upon trying them out found that they had problems and just didn’t quite do what I wanted. One of them had a feature that allowed you to upload any video and it would convert it to the H.264 and Theora versions for you. This was something that I thought was nice so I started with that as a base and started writing my own plugin to handle HTML5 video. Pretty quickly I started running into hurdles.
Time for a side rant. Currently the HTML5 spec doesn’t define what codecs are to be used for video. As a result it’s currently split between the proprietary H.264 codec and the open source Theora codec. Whatever I thought because I can provide support for both with ffmpeg encoding to both formats and the broswer can use the one it supports. Problem came when I tried to do this and found out my ubuntu server doesn’t support encoding to H.264 due to its licensing restrictions. From a technical standpoint I like the H.264 codec and the results it gives, but the patents and legalities that surround it are very scary. End rant.
So side stepping the encoding problem and converting to H.264 on a different machine and uploading it later, I got my plugin functional. Now all current and future videos on the site use HTML5 video and dropdown to Flash if that’s not supported. I hope to clean up the plugin code and add a couple features so that I can release it sometime soon.
Internet Explorer Support
Previously I maintained IE6 support using a separate IE6 only CSS file. This stylesheet file was 679 lines long of tweaks for just IE6. After having changed so much HTML and CSS and seeing how poorly IE6 supported a lot of it, I decided it was time to end support of that browser. I’m not alone on this. I searched around a bit and found a script I liked that would alert an IE6 user that their browser is old and unsupported. One of the requirements I had for this script was that even though it alerted them that the browser was old and unsupported, it would still allow them to use the site if they chose even though the experience was going to be a little ugly and maybe even a little broken. The sevenup script did just that.
Upgrade IE6
Wanting people to still be able to use the site in IE6 if they chose to meant I still needed a small amount of fixes to make it bearable. I added in the DD_BelatedPNG script to add in transperancy support for images in IE6. I replaced the IE6 stylesheet with just a handful of rules so things don’t look too terrible. All in all I hope anybody using IE6 would upgrade but if they choose not to at least it’s mostly usable for them.
As far as support in IE 7 and 8 goes, using the scripts mentioned above for HTML5 and CSS3 support they pretty much look the same as other browsers. There’s a few styles that don’t look as I intend, but I’m ok with the look deteriorating slightly in a browser with lackluster support.
Simplifying WordPress
After having changed all this HTML and CSS I began wondering if I could simplify the code used as part of my WordPress theme. Previously in order to add the complex HTML for the rounded corners into things like comments and the sidebar widgets required some equally complex and hacky code around the WordPress functions. I began removing this code and found that for the most part I could go back to using the default HTML produced by the WordPress functions and style them to look the same using just CSS. In the end I’ve ended up removing 168 lines of php code, and 100KB of images.
In the end I had a lot of fun with the changes I did to the site. Hopefully things like better video support get me posting more often. I have a few plans for things in the future. Stay tuned.
-Dexter-
Between the launch of Endeavour on 
