Targetting Relevance in Long Web Pages with the CSS :target Pseudo-Class

Context and relevance are sometimes lost when linking to pages on the web. Basic HTML and good hypertext copywriting habits (like using title attributes) can help, but not always enough. Here’s a totally new method (I think) to embed what I call relevancy messages into the destination page of a site.

Browser Developer Insight and Nightmares

Dave Hyatt, a developer of Apple’s Safari web browser offered some amazingly enlightening insight into the nightmares of browser developers the other day. The only thing I can think to say is: Dave, thanks for trying. This is a great example of how IE’s inconsistent rendering behavior has long-lasting negative effects on the adoption of …

User Stylesheets to the Rescue

I was just heading to bed (well, kinda) but this was too blogworthy to pass up. Browsing my newsfeeds, I happened upon this post from Andy Budd which points to this Mac OS X Hints post regarding a CSS-savvy web developer trying to do some online shopping. Unfortunately for the online store owners, their pages …

Centering, Absolute Positioning, and Document Flow

The question of how to center an absolutely positioned element came up recently in a CSS forum I frequent. It’s a relatively old question that has several answers, but it’s been asked often enough imho to warrant a short discussion. CSS has given Web Designers a powerful tool to create breathtaking layouts. However, some things …

Observations on the CSS3 Box-Sizing Property and How Designers Use Style Sheets

Recently, I became aware of CSS3’s box-sizing property. This property can have two values, content-box and border-box. The content-box value is what we’re all used to. It causes the selected box’s dimensions to be sized by setting the specified width of the box equal to the width of the content area of the box. Any …

View the Web Your Way with Edit CSS

For a while I have been using the Web Developer Toolbar in Firefox for various puroses. It’s extremely helpful, allowing me to quickly and easily outline custom elements, display the rendered sizes of block-level elements, provide an overview of the page’s structure without fiddling with the DOM inspector (choose CSS → View Style Information… and …

Make Marked-Up Lists Look Like Paragraph Text

Here’s a useful little snippet of CSS2 lifted straight off a personal project I’ve been working on. The following four rules display, find, and insert appropriate punctuation for making unordered lists read like English prose. ul, ul li { display: inline; list-style: none; margin: 0; padding: 0; } li:after { content: “, “; } li:last-child:after …