About this site
This site has been set up to explore the possibilities of using HTML5 with CSS.
I will not be using 'hacks' in any of the demonstrations, so if a demonstration doesn't work in a particular browser then so be it.
Internet Explorer 6, 7 and 8 will almost certainly not support the styles used in these demonstrations, although I have added the recommended javascript routine 'http://html5shim.googlecode.com/svn/trunk/html5.js' so that these browsers will at least recognise the new elements that appear in the HTML5 specification and display these pages more or less as they should be. However, IE9 should be up to the challenge.
This site went live on the 16th December 2010.
An example of what's to come
CSSplay - 'BizBox' - the CSS only answer to jQuery/javascrpt Lightbox scripts.
Working in Firefox, Opera, Safari, Chrome, IE9, Flock and SeaMonkey. It also works using Safari on the iPad, iPod Touch and iPhone.
With CSS3 enhancements, for all the above browsers, and 'keyframes' for Safari to give a fade in/out and expanding of the large images.
A demonstration of what is already possible using just CSS to produce a popup 'BizBox' which can contain any information you like, in this case images with descriptive text. Just click any of the above images to show a larger version in a popup 'BizBox' that will be sized to fit the image. The popup 'BizBox' will always fit the browser window, adding a vertical scrollbar as required and allow you to navigate all the images using 'previous/next' buttons.
The popup 'BizBox' will stay visible and open until you click the 'close' icon.
All photographs are from an exhibition of art held at Gloucester Cathedral.
IE9 & HTML5 Standards Compliance
The Microsoft meta tag <meta http-equiv="X-UA-Compatible" content="IE=edge"> which ensures that IE9 and later versions of IE are using standards compliant mode, does not validate when using the html5 doctype <!DOCTYPE html>. The answer is to put this into your .htaccess file as follows:
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
</IfModule>
</IfModule>
