Hand Coding

CSS Media Types can be rather handy for delivering CSS rules to one platform or another. Not uncommonly, they can be used to automagically create printer-friendly pages. They can, however, also be used to create mobile-friendly pages (such as for PDAs, cell phones and the like) through the “screen” media type. The general idea is that large screen devices (CRTs and LCD monitors) can be fed CSS rules with the “screen” media type while handheld devices get a set of CSS rules with the “handheld” media type.

One fly in the ointment is that Pocket IE tries to outthink a page’s media types. Because some front-end coders put much of their CSS in a file with the “screen” media type, the Pocket IE development team decided that their browser should render rules with the “screen” media type. Ruh-roh. All of a sudden, all of the potentially small screen-unfriendly declarations “ floating, absolute positioning and the like — were being gargled and swallowed by this diminutive browser.

What that meant was that coders had to employ CSS with “screen” and “handheld” media types; and, in addition to having the usual mobile-type tweaks in “handheld” (such as perhaps removing extraneous page elements), coders also had to resort to undoing the effects present in “screen” stylesheets. Yuk. Pleasantly, Michael Angeles discovered a workaround — by capitalizing “Screen”, Pocket IE properly ignores CSS with that media type.

I’ve not been able to find a comprehensive table of CSS media support among handheld browsers, but the comments attached to this post about CSS for Mobiles are a decent starting point. There, the author set up some test pages for CSS media support and invited readers to send in their results. Here’s an excerpt:

• Pocket IE — applies “screen” and “handheld”
• SonyEricsson browser — passes over “screen” and applies “handheld”
• Blackberry (7730) — neither “screen” nor “handheld” are applied
• Motorola browser — passes over “screen” and applies “handheld”

I wouldn’t be surprised if some handheld browsers still incorrectly apply the “screen” media type. All the same, with Pocket IE back on the good side of the force, that helps quite a bit; granted, Pocket IE doesn’t have quite the market dominance that desktop IE does, but (until now) it was still one of the major offenders among mobile support for CSS media types. And, with a work-around as straightforward as tossing in some capitalization, it’s not hard to push Pocket IE in the right direction.

I came across a mention of a #CSS IRC channel among the comments on a post at TechCrunch. I did some Googling around to try to see if it was a just-started channel trying to get off the ground, but it looks to be a more established venue.

I’ve found that a second set of eyes can often be invaluable when debugging CSS (or code in general, I suppose) — sometimes all it takes is a second point of view to help shed some light on a problem. So, I think I may just give this channel a shot. The channel is #CSS on EFnet and I figure that I’ll load it up during the day and let it run in the background; even if I don’t run into an issue myself, maybe I’ll be able to help someone else out.

The channel’s official home page goes over a few rules that they follow — they're generally pretty reasonable, such as “You must validate” and “We need a URL to your problem”. In addition, though, they also discourage nick-changing (“nickname_lunch”, “nickname_brb”, and so on) which I may have to un-learn. I’ll give it a try and see how it goes :).

(Oh, and here’s a list of EFnet servers in case that’s helpful.)

Opera has always been a good browser with excellent standards support — and now it’s free!

Opera has removed the banners, found within our browser, and the licensing fee. Opera's growth, due to tremendous worldwide customer support, has made today's milestone an achievable goal. […]

For a moment there, I was wondering how they’d make their money, but it looks like they have a Premium Support plan in place. All the same, I’m pretty stoked about this. And, if Firefox didn’t have so many scrumptious extensions, I’d consider trying Opera as my day-to-day browser.

Update 2005-09-23: According to Om Malik, it was Google that made Opera free, through a compensation deal. Well, yay Google :).

In an apparent policy reversal, Microsoft has said that it will release a beta of IE 7 this summer (Microsoft previously said that IE updates would only be available with Windows upgrades). Details seem to be scarce at the moment, but a Q&A with Mike Nash, their Corporate VP of Security, revealed this much:

“We’re very excited to announce at the RSA Conference today that this summer we’ll release a beta of Internet Explorer 7.0 for Windows XP with Service Pack 2, which will have even more enhancements to security and privacy protections. These enhancements align very closely with the three core tenets of Microsoft’s security approach that I mentioned earlier. Internet Explorer 7.0 will be the most secure browser we’ve ever released, building on and surpassing the success of the SP2-enhanced Internet Explorer 6.0. We don�t plan to ship it until it meets our quality bar, which we�ve set pretty high. […]”

So, while it looks like they’re primarily focusing on securing their browser (which isn't a bad thing), I’m hoping that they’ll improve IE’s standards compliance as well — oh, what I wouldn’t give to be able to use adjacent sibling or attribute selectors.

I heard about this an intriguing HTML Altimeter bookmarklet via Asa (or “Topographic View”, as the author calls it). It’s a bit hard to describe, but it essentially reassigns the CSS background for each element on the current page to represent the number of nested elements at that point.

Level zero starts at black and each additional nested element gets closer to white (with 16 shades in total). To make use of the bookmarklet, visit the author’s page and drag the “Topographic view” link to your Personal Toolbar. Then, just click that link to see the effect applied to the current page.

As you might expect, well formed CSS-based sites barely get out of black, but table-based layouts can easily approach pink (the color designating nesting past 16). All the same, though this bookmarklet is good for an easy laugh at the expense of poorly built sites, I’m not sure if it has any practical development applications :-/.

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 :).

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.

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.

Margin-collapsing can sometimes be tricky to CSS beginners; especially as modern browsers support CSS better, collapsing margins is something that you could easily run into. However, Andy Budd has written an extended blog entry on the workings behind collapsing margins.

For the most part, margin collapsing has few rules:

At its core, margin collapsing is very easy to understand. Basically when two vertical margins meet up, instead of adding together, the largest margin takes precedent and the other one “collapses” to nothing. […]

For example, if you have two adjacent paragraphs, the first with a 20px bottom margin and the second with a 15px top margin, the space between them will only be 20px — since the smaller of the two margins (15px) collapses into the larger one (20px).

It can get a bit tricky when borders come into play. In the case of borders, the two elements’ margins are no longer directly touching and so the margins don’t collapse. I’ve run into that one a few times when I’ve turned on borders on an element (for debugging) and then found the layout to be wildly different after I finished debugging and turned off the borders.

The article also goes on to talk about how margins collapse around floated elements. But, most beginners who would run into collapsing margins may not be using floats as a layout technique anyhow. In all, I found the article informative and I won’t hesitate to refer to it if I run into some weird collapsing issues.

Joe Maddalone of Insert Title Web Designs has discovered a method of running multiple versions of IE on one box! He made the discovery when he noticed that a developer’ edition of IE was able to run concurrently with his installed version.

Working backwards, he discovered which files the developer’s edition used and applied that knowledge towards older IE versions — he downloaded their respective CAB files and extracted bits as needed. A few tweaks later, and he had stand-alone versions (screenshot). (The tweaks, involving IEXPLORE.exe.local, are further explained in the article.)

Of course, Joe outlines the steps he used to create the stand-alone versions and you could follow along with those. Or — even easier — QuicksMode.org has links to the ready-to-run stand-alone versions of IE download.

I’ve tested this on my XP machine here at work, and it works great! When running multiple versions of IE, it can be easy to confuse which version is which; so, QuicksMode wrote a small script to dynamically prepend the IE version number to the page’s title (so that it’s easily visible in the taskbar).

Joe also includes a link for PayPal donations at the bottom of his page to cover bandwidth costs and the like. And, considering how much time this discovery will save me, I was happy to contribute.

PS As you may have noticed, I’m not one to use exclamation points gratuitously. It could have been two years or more since I last typed two consecutive exclamation points. But, I was so excited about this discovery that I included two in the title of this blog entry ;).