[CSS] NINJA

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

Chroming: How google is changing the browser

The browser wars are in full effect once again thanks to a healthy plethora of browsers available such as Safari, Firefox, Opera and Chrome all leading the way in the addition of new and exciting features in the upcoming CSS3 & html 5 specifications.

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

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

iPhone bookmarklet, for saving bookmarklets

Have you ever found a useful bookmarklet while browsing on your iPhone only to discover that you can’t actually save it directly from the phone. Frustrating I know, so much so that I decided to make my own bookmarklet that lets you save it on your phone. Let’s delve right in and take a look at the JavaScript involved.
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