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…

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

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 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…

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

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 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…

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

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…

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

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)

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 google ready to get wild I vowed to come up with a solution and I think I may just have…

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

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 new trick, but I’ve never specifically covered it so I thought I ought to…

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

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 break out of the plane of the page and stack elements on top of each other…

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

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 design…

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

eCSStender – Use CSS3 in All Browsers

Extensions built with eCSStender greatly simplify the design process because you can author modern CSS using advanced selectors, properties such as border-radius, or custom font faces and rest assured that your design will work… even in IE6. To see what you can use today, browse the extensions. To use the extensions, download eCSStender and include it and your extensions in your site…

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