Below you will find pages that utilize the taxonomy term “xhtml”
Futurebox, lightbox without the JavaScript
I was playing around the other day and had a bright spark. Is it possible to do the “lightbox” effect without JavaScript? The answer is yes! Thanks to the :target pseudo class. Without further ado I introduce Futurebox.
Continue reading.How to create offline webapps on the iPhone
Recently Google launched their latest mobile version of Gmail optimised for iPhone and Android based browsers. One of the features that stood out was the offline access thanks to the browsers support of html5 application cache.
Continue reading.Advanced hover states using CSS
The hover pseudo-element in CSS can be a powerful tool in a front-end developers arsenal, it’s not only for changing a links colour. In good browsers the hover element can be applied to almost anything but unfortunately ie6 & 7 only support the hover selector on the anchor tag, but of course that isn’t going to stop us accomplishing something cool. I’ll be looking at using the hover pseudo-element to add some clever functionality when a user hovers over an image.
Continue reading.5 clever uses of the canvas tag
If there is one thing that really gets me exciting about the upcoming HTML 5 specification it’s the canvas tag. This relatively simple tag holds so much potential and power thanks to the strong well thought out JavaScript API available to manipulate what appears on the canvas.
Continue reading.Sangraal layout: A true flexible, fluid CSS layout
The wait is over, finally a real ‘sangraal’ layout that ticks all the boxes:
- 3 column, 2 column, 1 column it’s all flexible
- Fluid centre layout
- No need for negative margins.
- Works in ie5+, firefox 1+, opera 9.6+, safari 2+, chrome
- Minimal mark-up & clean CSS
A look at pure CSS IE6 min-width solutions
As a large user base are still using Internet Explorer 6, with it’s extremely poor support for essential CSS, we as front-end developers need to come up with creative solutions to Internet Explorer’s limitations. One such limitation is the min-width property. In this article I will be looking at 2 pure CSS solutions each with their strengths and weaknesses.
Continue reading.Why display: table shouldn’t be frowned upon
I’ve seen a lot of commentary on the for, and against of using the CSS property display: table, a lot of it negative. It takes us back to the dark ages, using tables for layout. These people tend to forget that CSS is purely presentational and setting something as display: table is not the same as using the table tag. A screen reader going over a layout styled using the CSS table model will not get confused and muddled up. It will in fact breeze through a layout done correctly no matter which technique used floats or CSS tables. The display properties values: table, table-cell, table-row etc are named due to the fact its presentational result is that best described of how a table would work and the similarities end there.
Continue reading.