Month: March 2004

Semantically Correct Rounded Corners in CSS

Ashley Bischoff3 Comments

It seems that rounded corners are making a comeback in web design (or, maybe it’s just the designers I work with). And there’s not really an easy way about it since the current versions of CSS have no native support for rounding corners (however, I believe something may be in the works for CSS3).

So, what it comes down to is using multiple background images and placing them at each corner (top-left, bottom-left, and so on). Of course, CSS only supports one background image per element, so that doesn’t make things easier. The workaround is simply to use multiple nested elements (such as nested DIVs), each with its own background image.

Nested DIVs can have their own problems, as they can quickly become semantically meaningless (that is, the HTML no longer describes the document’s structure). However, Ryan Thrash has come up with what he calls the ThrashBox — a semantically correct set of HTML & CSS to create rounded corners.

His technique still relies on nested DIVs but he structures them so that the code remains meaningful (one div for the box, one div for the box’s header and one div for the box’s content). It may not be semantically perfect, but I think it’s the best that can be achieved with current CSS. And, the next time I need to create a box with rounded corners, I’ll consider his technique.

Ultimate Safeway Shopper Card

Ashley Bischoff3 Comments

Slashdot had an article a few days ago on Budweiser’s internal sales tracking network. Some expressed concern about Anheuser-Busch’s tracking down to the 6-pack, but most posters wisely concluded that you shouldn’t have anything to worry about since there’s no reason to buy Budweiser in the first place ;).

In any case, the Slashdot discussion turned to customer tracking of other kinds, such as those supermarket cards. And, switcha pointed out Rob Cockerham’s Ultimate Shopper endeavor. In short, Rob took a digital photo of his Safeway card, cropped the image and then printed a bunch of replica barcodes onto labels with his inkjet. This way, you can use one of his stickers and become Rob. More importantly, your privacy remains intact since Safeway no longer tracks your identity.

I like the tongue-in-check character of the page, but I’m still not fond of these shopper cards. Sure, you can trade them with your friends or even apply for them with fake credentials, but you still have to carry around that silly card in your wallet (or even three or four, depending on the number of supermarkets in your area). So, these days, I’ve emptied my wallet of those cards and I just go to stores that offer sale prices without any strings attached.

Tabbed Editors for OS X?

Ashley Bischoff28 Comments

Though I’m thoroughly enjoying my PowerBook, I’m not yet as productive on it as on my Windows box. It’s just a few niggling apps for which I haven’t yet found equivalents. And, at the top of the list is an editor.

I don’t need much in an editor — one with a tabbed interface along with syntax highlighting for HTML/CSS would be fine. Multiple undo/redo would be even better. But, I can’t find such an editor for OS X. Sure, on Windows, there would be several from which to choose — TextPad is probably the benchmark editor in this category and Crimson Editor (what I use) is freeware but just as good.

I’ve used tabbed editors on Windows for years and I’ve found them very handy. I often have four or five documents open at once — a couple CSS files, perhaps a JavaScript file or two, and a few HTML documents — and having a separate window for each document just feels clumsy to me. They invariably overlap and the filenames in their titlebars end up underneath each other. With tabs, I can see each filename easily and switch between files quickly.

When I first started looking for software for my PowerBook (before it even arrived, even), I penciled-in SubEthaEdit (formerly Hydra) as an interim editor. SubEthaEdit is a freeware editor with syntax highlighting and (as a bonus) Rendezvous support. But, it still didn’t have tabs for multiple documents.

Since finding SubEthaEdit, I’ve searched for other suitable editors, but I couldn’t find even one freeware editor with a tabbed interface. So, for a lack of other options, I figured that I may need to consider shareware/commercial editors as well. In that vein, I went to VersionTracker to peruse their HTML Tools section. I checked every app — shareware or otherwise — I couldn’t find even one with a tabbed interface :-/.

Some may claim that tabs are against Apple’s Human Interface Guidelines, but even Safari supports tabs (however, Apple does frown upon MDI interfaces). So, are tabbed interfaces a new thing to the Mac world or is there some mystical tabbed-editor that’s just been eluding me?

Optimized Firefox Builds

Ashley BischoffLeave a comment

As an open source project, anyone can create builds for Firefox (formerly known as Firebird). And, indeed many have. As Neil Turner writes about in his blog, Jesse Ruderman has a section of his site — “The Burning Edge” — where he chronicles bugs fixed in each day’s Firefox builds.

And, next to each day’s listing are links to processor-specific builds. In order to save some space, he makes use of some acronyms, but there’s a section which goes over all those. The key is to match up your processor’s special features (such as SSE) with the build that offers those.

If you’re not sure which features your processor has, Neil mentions that AIDA 32 will check your processor and figure that out for you. AIDA probably works fine, though I prefer WCPUID for that kind of thing — it’s a processor-focused utility and all the information you need is right on the first screen.

In the FAQ, Jesse also includes a quick-reference to match up which build is fastest for your processor:

So which optimized build should I get if my processor is X?

  • P2: G6 is fastest
  • P3: G6 SSE is fastest
  • P4: G7 SSE2 is fastest
  • Celeron: Depends on whether your Celeron is P2-based, P3-based, or P4-based.
  • Athlon XP: G7 may be faster than G7 SSE even though SSE is supported

Yeah, those acronyms may seem a bit obtuse for now, but it’s fairly straightforward once you’re looking at the list of builds for the day. And, apparently, the results can be quite dramatic:

Still with me? Good, because if you follow the above you may make yourself very, very happy. This optimized build is insanely fast — probably the fastest browser I’ve ever used. New tabs open instantly, menus appear as soon as you click on them, and page rendering is noticeably faster. If you’re willing to spend a few minutes trying to find a build that works best with your computer, then you’ll be thanking yourself in future.

If I had a halfway-decent processor, I’d try some of these optimized builds for sure ;). As it is, I have just an Athlon 700 in my box and about the only thing it supports are MMX and 3DNow, neither of which appear in specialized builds. To be fair, I may give a G6-optimized build a chance, as that one has rather lenient optimization that doesn’t completely require a modern processor.

PNG Alpha Transparency Support in IE 5.5+

Ashley Bischoff2 Comments

A coworker was asking me about PNGs the other day, and I pointed him to the LibPNG page — one of the more comprehensive sites I’ve found on the PNG format. For those not aware, PNG is a lossless image format (like GIF) but it supports up to 24 bit color (like JPEG). It’s also supported by all the major browsers and many desktop applications.

Another advantage to PNG is that it supports alpha transparency. Unlike GIFs which have on-or-off transparency, PNGs support up to 256 levels of transparency. So, a properly designed PNG image with alpha transparency can look good against a background of any color.

Basic PNG functionality is supported by almost all browsers (Netscape, IE and so on), and support for PNG’s alpha transparency is also widespread. In fact, just about every browser — even the Sega Dreamcast browser — supports alpha transparency… except for IE on Windows (PNGs work there, just not the alpha transparency part).

And, as IE/Windows currently has the largest market share, it was thought that PNGs with alpha transparency essentially weren’t usable on the web. However, after re-reading the IE/Windows section, I see that there’s now a workaround to get PNG alpha transparency support in IE 5.5+!

As I understand it, IE can be induced — via some proprietary HTML — into using DirectX to render PNGs. And, as DirectX supports alpha transparency, you get alpha-channel support in IE. As all the other major browsers already have alpha channel support, it’s conceivable that PNGs with alpha channel transparency could be used throughout a site.