[CSS] NINJA

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

Don’t kill IE6, degrade it.

Buzz about the internet has been rampant this year with many claiming that this is it, 2009 will be the death of IE6. A campaign in Norway has declared war with some great success. There are now some high profile Norwegian sites following with a week long campaign to educate users on more suitable browsers they can use instead of IE6.
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

Continue reading

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