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 a daunting prospect, there are also many small things that don’t take anything more than a bit of judicious planning, are very easy to test (without having to buy expensive assistive technology), and can make all the difference to certain user groups…

In this short article we’ll focus on keyboard accessibility and how careless use of CSS can potentially make your sites completely unusable…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Equal Height Columns – Companion Columns Method

The search for a technique that offers real equal height columns leads nowhere because we don’t have full vertical control in current CSS 2.1 implementations cross browser. The available techniques are simulations of columns: a repeated image displaying Faux Columns [Cederholm], columns made of borders [Livingstone], and variations.

We couldn’t even fall back on a (CSS-)table, since there is no broad, sufficient implementation of display: table in the browsers. And a table would dismiss the accessibility request for having the columns logically ordered in the source.

OneTrueLayout [Robinson] uses a promising technique [Challoner] where the columns are still not equal in height, but they are cut in length, so they appear as-if. Surprisingly, this trimming made problems that are not solved.

In this article, we draw up a variation for the equal heights columns illusion, standing on the shoulders of OneTrueLayout. Both techniques use excessive padding and compensating negative margins, a tricky concept…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

On Having Layout – The Concept of hasLayout in Internet Explorer

A lot of Internet Explorer’s rendering inconsistencies can be fixed by giving an element “layout”. John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs” meaning that they can often be solved by applying a width or height. This leads to a question of why “layout” can change the rendering of and the relationships between elements. The question, albeit a good one, is hard to answer. In this article, the authors focus on some aspects of this complicated matter…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Is Your CSS Reset Doing More Harm Than Good?

You know the drill. Code the XHTML. Check. Validate. Check. Start the CSS style sheet with a reset. Che… Hold on there. Before you dump the latest and greatest CSS reset in your style sheet, you might want to think about what those style declarations actually do. If you’re resetting tags that aren’t in your markup or tags that don’t need to be reset, you could cause more problems than you fix…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

5 Rules To Write More Readable CSS Files

Complex CSS files can often be difficult to manage especially if you don’t use a structured way to write and organize their code. In a previous post I already illustrated a methodic approach to CSS coding. This post illustrates five simple practical rules that can help you write well structured and more readable CSS files to make your developer life easier…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS Differences in Internet Explorer 6, 7 and 8

This article will attempt to provide an exhaustive, easy-to-use reference for developers desiring to know the differences in CSS support for IE6, IE7 and IE8. This reference contains brief descriptions and compatibility for:

  • Any item that is supported by one of the three browser versions, but not the other two
  • Any item that is supported by two of the three browser versions, but not the other one
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Methodic Approach to CSS Coding

Which approach is better to write CSS code? In general I always prefer to use a methodic top-down approach I want to present you in this post. I called this process Four Bubbles Model.The model is based on four progressive phases that helps you quickly develop CSS files and maintain a better control of code you’re writing. The following picture illustrates the four main phases that compose the model…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS Frameworks and Semantic Class Names

One of the most common complaints about CSS frameworks like Blueprint, YUI Grids, and 960.gs is that they require designers to dirty their fingers by adding presentational class names to their HTML documents. However, some of the latest CSS frameworks provide clever solutions to this problem…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)