Category: web

Flash — Click to View

Ashley Bischoff2 Comments

I’ve never been much a fan of Flash. These days in particular, it seems to be mostly used for ads on the web. But, there are occasional uses for it (mushroom mushroom comes to mind).

Now you can have your Flash and eat it too. As a spin-off from bug 94035 (“Allow blocking of any media type”), Jesse Ruderman wrote some code to cover Flash elements with a “Click to Play” box. And, from there Ted Mielczarek packaged that into a handy XPI browser extension for Mozilla & Firefox.

Once installed, each Flash element in a page will be covered with an unobtrusive gray box labeled “Click to Play”. If you want to view that Flash, just click the box. I’ve found that this browser extension makes Flash much more palatable since I only view the Flash elements that I want to see. And, because it installs to your profile directory, you don't have to reinstall it each time you upgrade Mozilla.

XHTML Jokes

Ashley Bischoff1 Comment

I found these XHTML Jokes at Photo Matt though they’re originally from HTML Dog. I’m guessing that only standards-aware web developers will get these, but I found some of them rather amusing:

Q: Why did the XHTML actress turn down an Oscar?
A: Because she refused to be involved in the presentation.

Q: Why was the font tag an orphan?
A: Because it didn’t have a font-family.

Q: Why do CSS designers have too many children?
A: Because they employ lots of child selectors.

Q: Why was IE5’s 3-metre wide cell in the insane asylum smaller than IE6’s 3-metre wide cell?
A: Because the width of the cell included the padding…

Q: Why was the XHTML bird an invalid?
A: Because it wasn’t nested properly.

I think the XHTML/Oscar one may be my favorite, though I liked the IE/cell-width one as well. And considering geeks’ general penchant for tech humor, I’m almost surprised that these jokes have only come about now. In any case, they brightened my day a bit :).

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.

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.