Month: December 2009

CSS for Accessibility

CSS is magical stuff. In the right hands, it can transform the plainest of (well-structured) documents into a visual feast. But it’s not all fur coat and nae knickers (as my granny used to say). Here are some simple ways you can use CSS to improve the usability and accessibility of your site…
csshead 0 Comments

Introduction to CSS Escape Sequences

Regardless of where they appear, string values in CSS behave in a similar way. The most important thing to remember about them is that they are not HTML. This means, for instance, that inserting literal angle brackets without escaping them as HTML entity references (< and >) is perfectly legal…
csshead 0 Comments

The New Clearfix Method

Say goodbye to the age-old clearfix hack and hello to the new and improved clearfix method. The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. I have written about the original method and even suggested a few improvements. The original clearfix hack works great, but the browsers that it targets are […]
csshead 0 Comments

Styling HTML Lists with CSS: Techniques and Resources

In an online world now dominated by CSS layouts, CSS-styled HTML lists have become invaluable tools in a CSS developer’s toolbox, due to the HTML lists versatile and graphically flexible nature. All this despite some of the obvious browser inconsistencies that can affect the styling of the different types of lists available in HTML coding.If […]
csshead 0 Comments

Better CSS Outline Suppression

The aim of these tests is to check which combination of :focus, :hover and :active works best in order to suppress the outline when an image-replaced link is clicked with the mouse, but leave it visible for keyboard users tabbing through the page…
csshead 0 Comments

Don’t Lose Your :focus

For many web designers, accessibility conjures up images of blind users with screenreaders, and the difficulties in making sites accessible to this particular audience. Of course, accessibility covers a wide range of situations that go beyond the extreme example of screenreader users. And while it’s true that making a complex site accessible can often be […]
csshead 0 Comments

Smoother @font-face embedding in IE 7 & 8

You could say I’ve become somewhat obsessed with @font-face embedding over the past few months. I’ve most certainly fell head over heels for the @font-face generator from fontsquirrel.com see the recap below.One thing however that has always bothered me is IE7 and IE8’s rendering of embedded fonts, so today with IE tester at hand and […]
csshead 0 Comments

CSS Variables with PHP

When people are asked about features they would like to CSS, “variables” always seems to come up. Whether or not this is a good idea is still something I personally haven’t decided on, but I’d lean toward yes. Regardless, using PHP, it is trivially easy to use variables in CSS. This is certainly not a […]
csshead 0 Comments

Z-Index And The CSS Stack: Which Element Displays First?

Let’s start with a quick review. If you read the previous css positioning post you can probably skip to the next section.A web page is a two dimensional plane with width and height. z-index is the missing third dimension, depth, with an axis that moves in and out of your monitor. z-index allows us to […]
csshead 0 Comments

Create a Button with Hover and Active States using CSS Sprites

Too many designers neglect the click state (active: property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a […]
csshead 0 Comments
« Previous Page — Next Page »