Kimler Adventure Pages (http://randsco.com)

I recently published an article about cross-browser font embedding, using the @font-face CSS selector. It turns out that the code I put forth causes a 404 look-up in Internet Explorer. A reader has suggested some superior code, which I put to the test

Paul Irish Sets My Morning Schedule

Geeky @font-face Newz: It's a thumbs up for Paul's "Bulletproof @font-face Syntax"! (Do geeks really look like this?)

Funny how a single comment can change the direction of my day!

Paul proposes two concepts - new to me - in his recent article, "Bulletproof Font Face Implementation":

• Internet Explorer tries and fails to download the TTF file (with 2-selector syntax) even though the 2nd @font-face selector includes a "format" declaration.
• He proposes a single @font-face selector, which satisfies all browsers (obviating the need for two selectors), searches the local computer for the font first and eliminates the Internet Explorer "file not found" problem.

Okay ... this is techie, geeky cool and - for sure - not everyone is going to want to read about this, so here is where you should get off the geek train (if you haven't already).

If you're all aboard, heading for geekdom and want to be cool, then read on brave web-font enthusiasts ...

I'm a Geek, I want More

There's a spiffy-looking CSS Technique that's been getting a lot of play in the web-design and web-development social circles lately. Unfortunately, it's not a CSS technique and even as a JavaScript technique, it's crap! Did you spot it?

"Innovative CSS Technique" Making Rounds is NOT a CSS Technique

Even as a JavaScript Technique, it's Crap

This article, authored by Emanuele Feronato, has been getting some attention within the web-design and development social network recently. I've seen it Tweeted, FaceBook'd, Blogged, Digg'd and included in various "Totally Amazing CSS Techniques" lists.

On his website, Emanuele bills himself as an "Italian Geek & Programmer". Unfortunately, his article demonstrates he knows very little about web-standards, W3C validation, pure-CSS, graceful degradation, cross-browser compatibility, accessibility or white-hat SEO. He says his LightBox-like effect is "100% CSS-based" and that it's made "only with CSS - no JavaScript needed".

No JavaScript needed? What a pile of hooey!

The article is the most popular article on his blog, sporting over 252 comments and it's currently being shot across the design social circuit like it was the newest communications satellite. While some of the commentary points out the shortcomings, most (who don't know better) are lapping up this code - using it on commercial sites and passing it on.

At first blush, the technique seems very cool, but it's not code we would use and you shouldn't either. In a nutshell, out-of-the box it's crap. (Are you a web-developer, designer or programmer? Can you spot the problems?")

To learn more about why this code is crap (and to get an improved version) ... carry on ...

Turning Crapola into Shinola

For years, web designers and bloggers have been limited to a select number of "web-safe" fonts. With the Jun 30th release of FireFox 3.5, it's now possible for cross-browser font embedding using the CSS3 @font-face selector. Here's a tutorial to show you how

@Font-Face: Typography can be art! Web designers have been limited to only 13 or so "web-safe" fonts for years. Now, cross-browser use of the CSS3 @font-face selector may change all that.

Expand Your Font Palette Using CSS3

In a tale involving proprietary font formats and a week-old release of FireFox, I'm here to say that using the CSS @font-face selector to spice up your website typography is an easy, light-weight, valid and cross-browser solution. Finally, fancy fonts for the masses!

Can this be true? You bet your sweet bippy! Read on.

Fancy Fonts For All

We have a "new" twitter update status tool for our blog. See how it works (will be followed-up with a detailed discussion of how we made it, modified the JavaScript that comes with the Twitter API and some other nifty tricks we added). Some assembly required.

Twitter This, Twitter That

When the blue bird chirps, we've Tweet'd w/in the past hour.

It seems that the whole world is a-flutter, over little blue birds (which are the universal symbol for "Twitter", a increasingly popular "micro-blogging" service). Twitter is used to make 140-character comments about what you're doing. You can even embed photos, videos and links - to be rendered in-place, by browser add-on applications. Use it to keep in touch with "friends", for time-delayed "conversations", social networking, staying on top of important (and not-so important) breaking news, popular topics, wasting your employers time or digging deeper into research: trends, keywords, news and other things.

We started tweeting early this year and I finally got around to customizing a "twitter status update", which you'll find in our "Site Tools" section of our blog sidebar. It's a bit different than most Twitter status updates I've seen and here's how it works:

Twitter Status Message: When you hover over the twitter status "bird", you'll see our latest "tweet". Here's an example. When you click, our last 5 "tweets" will pop-up in a list and include a link to "follow Randsco" on Twitter.

IF you see the blue-bird a-singing (animated musical notes), it means that we've "tweeted" within the last hour or so. Hovering over this little blue twitter bird will reveal a stylish pop-up containing our latest "tweet" (140-char story-line of "what we're doing right now"). It's a great way to see what we're up to, see how witty we can be and we think it's a nice add-on (a mini-blog, if you will).

If you CLICK the blue-bird, whether he's singing or not, you'll get a pop-up list of our last 5 tweets. Each tweet may - or may not - contain links to web-pages or our fellow twitter friends, with whom we're "conversing". Follow the links to learn more. At the bottom of the 5-tweet list is a CSS-rollover link that invites you to "follow us" on twitter. It even degrades gracefully if JavaScript is disabled. We think it's pretty cool.

Coming Soon: A Twitter-torial covering "How to add a Twitter status update to your own blog", which will include detail about using the Twitter API, modifying the JavaScript, make a Twitter status list pop-up and some of the other cool stuff involved in making our own twitter status update tool.

Sometimes we include a list of "additional information" links at the end of our articles. Generally, they've been styled on the fly, but we thought it was high time to spend a bit of attention on this detail. The resulting CSS-styled ordered list looks nice, includes a block hover effect, a "visited" status indicator and is XHTML/CSS valid. We thought people might like to use it on their website, so included a tutorial and ZIP file.

Adding Pizazz to an Ordered List

Ordered List: Advice on getting things done around the house ... in a simple ordered list.

A lot of online articles include, at the end of the article, a list of "additional resources" - or links - for further reading and research. Several Randsco articles have such a list, but styling them is generally an afterthought, because most of the energy goes into the article itself.

Ideally, additional information links would be contained in an ordered list. It's semantically correct and allows visitors to reference a particular link by number. Unfortunately, we don't always follow our own advice and some of these links are held in simple paragraphs which may, or may not, be numbered.

We thought it was about time that we come up with a proper "additional information" list. By melding together some existing design ideas and adding our own CSS touches, we have constructed an ordered list that not only looks nice, but also includes a number of other features: a hip CSS roll-over effect; compatibility with fixed-width or liquid layouts; toggle-able ":visited" link status images; pure CSS (no JavaScript, AJAX or jQuery); and it's cross-browser friendly.

Have a look at the demo page and read on to get the ZIP file, learn about the design, look at the code and see the live example.

Styling an Ordered List