Number 35

Thirty five is a tetrahedral number, the licence plate code of Izmir in Turkey, and the minimum age of candidates for election to the United States Presidency. To me the number thirty five is the position I placed in the 2012 CSSOff, a global competition for front-end developers.

One of the driving factors for me entering into this competition was the valuable feedback that is offered by having other professionals review the quality of my entry. I am yet to review and address all the feedback I received and hope to follow this up with another post in the coming months. However for comparison purposes my score was summarised as follows which placed me at number 35 of over 400 entries:

Code Cleanliness: 7.5
Code Semantics: 7.25
Code Validation: 5
Match Original Design: 7
Good Choice Points: 7
Interactions: 5.8
Modern Browser Support: 8
Legacy Browser Support: 4
Overall Project Size: 4
Resource Optimization: 6
Responsive Implementation: 7

HTML5 Elements in Internet Explorer

The HTML5 specification is still a working draft and it is estimated that it could be 2022 before it becomes a W3C Recommendation, however HTML5 is ready to use today!

A HTML5 test page displayed correctly by default in Firefox 3

The Caveat

From a mark-up point of the view HTML5 is supported in the latest release of all the major browsers with the exception of Internet Explorer, thankfully this issue can easily be resolved using a little JavaScript.

A HTML5 test page displayed incorrectly in Internet Explorer 8

Measuring the impact

Being a big advocate of accessibility in websites, one of the first thoughts that come to mind when learning about this technique was “What if the user has JavaScript disabled?”. The answer of course is that any HTML5 sections of the layout will fall back to being unstyled, but how much of a problem is this?

This question can be answered by studying your analytics data which will tell you how much of an impact this will have on your visitors, hopefully providing you with enough information to make you comfortable using this work around. It is important to note that if your analytics’s software uses JavaScript to track statistics, as Google Analytics does, then you wont be capturing how many users have JavaScript disabled. An alternative solution is required for this statistic to be tracked.

Studying the analytics data for Thank The Forces reviled that whilst 66% of visitors to the site are using Internet Explorer, less than 1% of ALL visitors have JavaScript disabled; therefore for this website the use of this work around was deemed an acceptable solution with a minimal effect to the users.

Resolving the Issue

The JavaScript to fix this issue, discovered by Sjoerd Visscher, is as simple as calling the following code in the head of the page.

document.createElement('article');
document.createElement('aside');
document.createElement('command');
document.createElement('figure');
document.createElement('footer');
document.createElement('header');
document.createElement('hgroup');
document.createElement('menu');
document.createElement('nav');
document.createElement('section');
document.createElement('time');

View a demo page without the fixView a demo page with the fix applied

A HTML5 test page displayed correctly after the fix in Internet Explorer 8

Split Page Scrolling Without Frames

Recently I was asked to develop a solution to the problem of displaying two independently scrollable content areas side by side in the browser window.

The current solution used in the project didn’t work very well and involved a mixture of frames and a strict doctype, which is not valid in HTML4. The solution I came up with validates to HTML4 Strict and uses JavaScript to detect the window height.

View Demo