Expo dock paging using CSS3 and DOM
This is what it looks like
A friend of mine shared a link to a web-design site. Its layout interested me since it broke the norm of having a traditional link-based menu, and instead scales the pages you want as you click on them. It uses Flash "painted on top" of HTML, so I don't think there'd be an issue with the site on the grounds of accessibility: but I thought it would be a good challenge to see if the same thing [which if you're on Linux and use Compiz-Fusion will look similar to the Expo effect, and on Mac looks like the Dock] was possible using the only things I know, namely HTML, CSS, PHP and a miniscule amount of DOM methods.
The answer is: yes! It took me
six hours in total to work it all out; and there are lots of things that could be improved, but it does show the new and free technologies in stylesheets are really opening up things for designers and non-designers [like me!] to create some amazing things.
This probably isn't going to work for you if you're not using
- Opera 10.51 or above
- the latest versions of Safari, Google Chrome and other Webkit browsers
- whichever beta-testing build Firefox is up to
Because they're the only browsers that "see" the CSS3 I've used. I tested this in Opera 10.51, Opera 10.10, Google Chrome, Firefox 3.5.3 and Internet Explorer 6.0. It's readable in Internet Explorer, which is as much as you can hope for.
The use of the
onfocus attribute means that you'll have to
write a page with a Transitional doctype; or use HTML 5. I added page numbers at the top of each section so you don't need DOM for the page to work.
The magic bit is the CSS3 transitions and transforms module. But there's a catch here, since each browser uses its own proprietary mark-up for this, I have to enter more code. Erm... well done Browser Chaps. I think you've literally taken the web to the Eighties again.
So I used server-based browser detection to switch the extension [
-moz-/-o-/-webkit-] in the CSS depending on the browser, as well as protecting the "elderly" Opera versions from the sizing I had to use. I had to do it this way because you cannot degrade gracefully between browsers that are all heading towards one standard. As the range of difference becomes smaller, each one looks the same. So the only way you can tell them apart is by asking the browser what it is.
View the source code as your browser sees it, or look at the PHP file source.
CSS3 is bad at scaling up; but it's fine at scaling down. After lots of thinking, the solution that I found was to scale down the content box and then relatively scale the
divs inside. Then it's working out the positioning and sizing, which is trial and error.
<div id="section" onclick="body.className='c'; location.href='#section';" onfocus="body.className='c'; location.href='#section';">
So I was able to link to the section dynamically, then style the section appropriately in the CSS using the
:target selector. Sweet.
But seriously, why?
You can actually access each section from a keyboard without losing any visual loveliness [well, you can in Opera, which allows you to cycle through elements in a page].
I didn't check with the Exhibit-E site, and you can probably do it there too: but I think it might be trickier with Flash. Here, it's just natural browser behaviour. Also, those people who can't or don't use Flash still get a design fest, but without a plug-in.
Unlike the Exhibit-E page, what you see here is literally what you get: on that page I can see four pages, but the source gives me one [which I think is very tidy, by the way]. Looking at the source here gives you ALL the content that you can see. This has pros and cons.
CSS3 transitions and 2D transforms by David Storey and Molly E. Holzschlag was the starting point, and constant reading. Most of the dev.opera articles are of exceptional quality and are well worth a read.