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…
Archive for December, 2009
-
CSS for Accessibility
Posted: 2 years ago in Tutorials
Read More: CSS for Accessibility
-
Introduction to CSS Escape Sequences
Posted: 2 years ago in Tutorials
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…
Read More: Introduction to CSS Escape Sequences
-
The New Clearfix Method
Posted: 2 years ago in Tutorials
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 either obsolete or well on their way. Specifically, Internet Explorer 5 for Mac is now history, so there is no reason to bother with it when using the clearfix method of clearing floats…
Read More: The New Clearfix Method
-
Styling HTML Lists with CSS: Techniques and Resources
Posted: 2 years ago in Tutorials
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 you’re new to CSS, this article should provide a good overview of the different types of lists available, as well as some of the browser quirks that occur in relation to HTML lists, with some helpful advice that should prevent those quirks from becoming major road blocks to good design…
Read More: Styling HTML Lists with CSS: Techniques and Resources
-
Better CSS Outline Suppression
Posted: 2 years ago in Tools
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…
Read More: Better CSS Outline Suppression
-
Don’t Lose Your :focus
Posted: 2 years ago in Articles
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…
Read More: Don’t Lose Your :focus
-
Smoother @font-face embedding in IE 7 & 8
Posted: 2 years ago in Tutorials
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 google ready to get wild I vowed to come up with a solution and I think I may just have…
Read More: Smoother @font-face embedding in IE 7 & 8
-
CSS Variables with PHP
Posted: 2 years ago in Tutorials
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 new trick, but I’ve never specifically covered it so I thought I ought to…
Read More: CSS Variables with PHP
-
Z-Index And The CSS Stack: Which Element Displays First?
Posted: 2 years ago in Tutorials
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 break out of the plane of the page and stack elements on top of each other…
Read More: Z-Index And The CSS Stack: Which Element Displays First?
-
Create a Button with Hover and Active States using CSS Sprites
Posted: 2 years ago in Tutorials
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 design…
Read More: Create a Button with Hover and Active States using CSS Sprites