Posts from 2003

Just some fair warning: meyerweb may be sporadically offline over the weekend, as my hosting provider (the incomparable gang at The Opal Group) switches locations, upgrades services, and that sort of thing.  So if you drop by and don’t get a response, try again later.  In the meantime, go for a walk, plant a tree, or scratch a puppy behind the ear.  They really love that.

It’s already the last third of June, and what I want to know is this:  how did so much of the year disappear so quickly?

• Now You See Me… was published on Thursday, June 19th, 2003.
• It was assigned to the General category.
• There have been no replies.

Ever have the feeling that you’ve seen a site somewhere before?  It happens to me on occasion, and this morning e-mail hit my Inbox pointing me to the Web site for The Clasby Family, which looks darned familiar.  In case something changes, here’s a screenshot of the site, and a shot of a similar one.  Actually, all but one of its themes look really familiar for some odd reason.

How did I find out about this?  Someone e-mailed me to mention that the designer for clasbylife.com had posted a forum question about Opera’s rendering of the themes.  I read the post and was amused to find it was the exact same problem I hit back in February, and explained the situation in some detail in a site post.  So it turns out the source of the problematic styles is also the source of the explanation.  Funny!

For the record, I’m not really upset by this, although it would have been nice if I’d been asked about the use of the images, since some of them are my original works (those in “Natural” in particular).  One really good way to learn CSS-driven design is to snag a local copy of someone else’s design and take it apart.  Then put it back together in your own way.  clasbylife.com seems to have that underway, with a new theme that looks to be a mutation of “Natural.”  If grabbing a copy of something I’ve done help a designer understand CSS a little better, then I’ll be the last to complain.  More power to you.  Feel free to use them yourself, as long as they’re used for non-profit or educational purposes.  No charging other people for my designs, though!  I really have to get around to explicitly branding these things with a Creative Commons license so it’s all clear.

Anyway, as the new stylesheets note in fairly obvious comments, some of the images I use belong to me, whereas some came from other sources.  That won’t stop people from copying them, but at least I’m providing fair warning (and credit).

• Mirror Life was published on Tuesday, June 17th, 2003.
• It was assigned to the CSS category.
• There have been no replies.

The presentation and example files from TODCON MX in Las Vegas last week are now available via the Talks page.  Thanks and apologies to those who waited; it took me a lot longer than it should have to get these online.

• TODCON MX Talks Available was published on Monday, June 16th, 2003.
• It was assigned to the Speaking category.
• There have been no replies.

I would have posted about this yesterday, but frankly it was too depressing.  As others have noted, Internet Explorer for Macintosh is, effectively, done.  There will not be another major version: I’ll never get to write about CSS support in IE6/Mac, because there won’t be one.  As I said on Webdesign-L yesterday, and Zeldman quoted in part, I said:

[The IE/Mac team] was truly committed to the best standards support they could muster while working for a corporation that did not always share their ideals.  I wish everyone on the IE/Mac team the best of luck in their future projects, whatever they may be.  They not only paved the way for many of the things we now take for granted, but they fought the good fight, fought it hard, and in many respects they emerged victorious.  It’s tough to imagine a better legacy than that.

I was a beta tester for IE5/Mac, and it’s long been a favorite of mine.  There may be some personal bias stemming from the fact that I know bug reports and suggestions of mine are reflected in the final product, but the wider truth is that it was a groundbreaking browser.  I know DOM scripters find it annoying and substandard, but for those of us on the content-authoring side, it was rarely the worst of our troubles.

Others will analyze this development in light of the recent Microsoft/AOL settlement, the cessation of IE/Win as a standalone product, and so on.  I’m not really interested in all that right now.  Instead, I’d like to take a moment to run down a list of innovations and features that IE5/Mac introduced back in 2000:

• DOCTYPE switching—some would call this a bug, but in my view they’re missing the bigger picture.  DOCTYPE switching was the first mechanism that allowed authors to decide whether their document rendering should look to the past, or to the future.  It permitted browsers to fix bugs in standards support, instead of forever enshrining them for the sake of “backward compatibility.”  This quickly spread to Mozilla, and eventually made its way into Opera and IE/Win.
• Display resolution setting—there’s a preference dialog where you can set your monitor’s PPI value, literally by holding up a ruler to the screen and using a slider to match the ruler.  Some Windows display drivers had this before, but IE/Mac was the first major browser to build the feature into the browser itself.
• Text Zoom—don’t like a site’s font size?  Override it with a simple keyboard combination, scaling all the text up or down, depending on what you need.  Mozilla quickly followed suit and Opera introduced Page Zoom, arguably a better solution.
• Excellent CSS1 support—it’s easy to forget how revolutionary a reasonably complete and bug-free implementation of CSS1 really was.  Yes, there are some bugs, as with anything.  It’s still better than IE6/Win’s CSS1 support.
• Decent (if limited) CSS2 support—not quite as robust as the CSS1 support, IE5/Mac still made good forays into CSS2.  Remember the browser was shipped about two years after CSS2 went final, which means it was being written maybe a year after CSS2.  That may sound weak, but consider that in addition to fixing all its CSS1 bugs and finishing off CSS1 support, the team found the resources to look at CSS2 and take a stab at doing it right.  That’s pretty impressive, what with them also having to do all the other stuff a browser has to support besides CSS.
• XML source tree view—if you load up an XML file, you get a “pretty-printed” view of the document and its source, with collapsible element views.  Mozilla got this ability only recently, and I’ve always guessed that IE6’s similar ability only exists because IE5/Mac gave them an example to follow.
• Full PNG support—including alpha channels and gamma adjustment.  Sure, it was years after PNG was published, but who else was doing it at the time?  Even today, people are still signing petitions to get Microsoft to do the same for IE/Win.
• Customizable toolbar—you could define your own toolbar buttons, create PNGs (with alpha) to represent the buttons, and customize your browser.  It isn’t quite “skins” but it was still pretty darned cool.  Oh, and the toolbar configuration data was stored in XML.
• Page holder—eventually Mozilla came along with the sidebar, into which almost anything can be installed.  IE5/Mac was doing it long before, albeit with a somewhat different feature set.

There was more, I’m sure, but that was all that came to mind.  When it shipped in 2000, IE5/Mac had a feature set that would be respectable if the browser were released today.  I’d always hoped that one day it would be followed up with a similarly impressive new version.  Sadly, not so.

Just to add an extra layer of melancholy to the whole thing, when Tantek says he found out from folks pointing it out to him, I was one of those folks.  It’s at once difficult and all too easy to believe that the man who created such a good layout engine, and put in so much effort to improve the Web, found out about the end of his own project from friends and the press.

• Hail and Farewell was published on Saturday, June 14th, 2003.
• It was assigned to the Browsers and Standards categories.
• There have been no replies.

Thanks to the power of the Internet, I am now less annoyed at XSLT.  Chriztian Steinmeier wrote to suggest I try xml:space, something I hadn’t previously come across.  So the template now looks like this:

<xsl:template match="/archive" xml:space="preserve">
<div id="thoughts">
<h3>
<span>Thoughts From Eric</span>
</h3>
<xsl:apply-templates select="//entry" />
</div>
</xsl:template>

Ah, much better!  On the other hand, I discovered when I applied xml:space to another portion of my XSLT, it broke an xsl:choose structure.  I had to split one template up into three to sneak around that particular limitation, which some would say is a strength of the technology, since it forced me to further modularize my template.

If I’d been sufficiently determined to avoid splitting up that particular template, I could have used an idea sent in by Hugo Lopes.  He wrote to suggest that I could use custom-defined entities, like so:

<!DOCTYPE stylesheet [
<!ENTITY sp "<xsl:text> </xsl:text>">
<!ENTITY cr "<xsl:text>
</xsl:text>">
]>
<xsl:template match="/archive">
<div id="thoughts">&cr;
<h3>&sp;<span>Thoughts From Eric</span>&sp;</h3>&cr;
<xsl:apply-templates select="//entry" />&cr;
</div>
</xsl:template>

It’s a lot less ugly than what I had yesterday, I’ll agree, but in this particular situation xml:space is a better route for me to take.  Still, it’s an interesting solution to the problem, and a technique I’ll definitely keep in mind for future XSLT projects.  Thanks to Hugo and Chriztian for the help!

• Transformed Transforms was published on Friday, June 13th, 2003.
• It was assigned to the XSLT category.
• There have been no replies.

Three days ago, in the process of finishing up the transition to the new design(s), I discovered a new reason to dislike XSLT—and it’s not exactly like I was lacking for reasons to do so before that.  So what aroused my ire this time around?  Whitespace.  Suppose you have the following XSLT template:

<xsl:template match="/archive">
<div id="thoughts">
<h3>
<span>Thoughts From Eric</span>
</h3>
<xsl:apply-templates select="//entry" />
</div>
</xsl:template>

Further suppose you want to preserve those whitespace returns in and around the elements, in order to keep the resulting HTML clean and readable without being forced to indent all the elements.  You can very easily force source indentation with xsl:output, but if you indent elements then you indent everything, including inline elements, and that drives me crazy.  In addition, having the whitespace avoids strange layout bugs in certain Web browsers that shall remain nameless, but are not IE/Win, surprisingly enough.

There is, so far as I could discover, only one way to ensure that whitespace is preserved in the HTML output.  It isn’t xsl:preserve-space, which will only preserve the whitespace found in the source XML.  No, apparently the answer is to use xsl:text as follows:

<xsl:template match="/archive">
<div id="thoughts">
<xsl:text>
</xsl:text>
<h3>
<xsl:text>
</xsl:text>
<span>Thoughts From Eric</span>
<xsl:text>
</xsl:text>
</h3>
<xsl:text>
</xsl:text>
<xsl:apply-templates select="//entry" />
<xsl:text>
</xsl:text>
</div>
</xsl:template>

God, that’s ugly.  Really ugly.  Much uglier than XSLT’s inherently verbose clumsiness in template handling, which is what made me dislike it in the first place.  If there’s a better way to do what I did above, someone please let me know so I can share it with everyone else and feel a little less annoyed.  Thanks.

Don’t misunderstand: I really like what XSLT can do.  It’s just the syntax and what I find to be thoroughly weird limitations (such as the above) that I abhor.

• XSLTorture was published on Thursday, June 12th, 2003.
• It was assigned to the XSLT category.
• There have been no replies.

Yesterday, Jeffrey Zeldman was nice enough to point people toward meyerweb’s redesign, and also to say some kind words about yours truly that he’ll probably regret some day.  I know I have already, because when goofy rendering errors were reported in IE6/Win, I kind of felt obligated to do something about them instead of just shrugging and saying, “Eh, not my problem.”  Curse you, El Jefe!  I shall be revenged!

Two days ago, I got an e-mail message that had me falling out of my chair, I was laughing so hard, and I simply can’t resist sharing it with you.  I’ve edited the text a bit for clarity, and the name has been removed to protect—well, the guilty, really.  In a legal sense, I mean.

I’ve spent some time reading and working with several CSS books….  and I have to tell you that Eric Meyer on CSS is the best…. if I want to know how to do something and refer to the pile of books near my left hand, it is the one that most easily produces the answer.

It has one other great advantage over all the others as well:  it is by far the best book to roll a joint on.  Shape, size, thickness, glossiness, flexibility, and color are all excellent and [far] ahead of the competition.

It’s amazing how a well designed book serves all purposes.

Well.  Glad I could help out.

A day or two before that fascinating bit of e-mail arrived, I was standing in clothing store located in a brand-new shopping mall just recently built a couple of miles from our house, when the following lyrics came over the store speakers:

Don’t it always seem to go That you don’t know what you’ve got till it’s gone? They paved paradise and put up a parking lot.

…and I thought to myself, “Is someone trying to be ironic?”

• We Live To Serve was published on Wednesday, June 11th, 2003.
• It was assigned to the Books, CSS, Humor, Redesign, and Writing categories.
• There have been no replies.

Yep, I finally did what I’ve hinted at for some time now and updated the site design.  Behold: Eos.  It’s sort of an in-joke, one that I would expect exactly four other people to get straightaway, along with perhaps a few others who happened to see the pictures.  Checking the styles might help those who are really curious to unravel the mystery, but trust me, it’s not really that interesting if you weren’t there in the first place.

So anyway… the new design is based around positioning, as opposed to the old one, which was based on floats.  The underlying structure of the site has barely change, with one exception.  The navigation/presentation portion of the pages is now found at the end of the document, instead of the beginning.  This seems more accessible to me.  If you want to see what the raw, unstyled page looks like, pick the theme “void(style);” from the menu.

Note that not every theme is guaranteed to work in your browser.  I stuck to the CSS standards as much as possible, and I did do cross-browser testing.  This uncovered some weird whitespace-sensitive bugs in some browsers.  It also showed that not every technique works well in all browsers.  I’m open to hearing about workarounds for broken displays in browsers, should you find them, so long as they’re based on standard CSS and don’t break the display in too many other browsers.

A few other notes:

• Unlike the old design, the new themes are intended to have notably distinct layout approaches.  Almost all of them put the sidebar on the right, but that’s just because I prefer righthand navigation.  With the old themes, each one was basically a different set of colors and backgrounds for the same layout.  This time, I wanted to be a little more original.  I’d credit the CSS Zen Garden with prompting this, but I’ve been slowly working at this change since last fall.
• The cookies that store the theme name and base text size (if you change it) changed their names to be a little more verbose.  You can of course deny said cookies; the site will be completely navigable without them.  The theme switcher won’t work, that’s all.
• Only one of the themes uses pixel-sized text: “Classic MW.”  Since the theme is intended to reproduce the old design as closely as possible, I figured I’d leave its 11px baseline text.  You can always override it with text-zoom features, or else on the advanced setup page, like before.
• Some themes use ems or percentages to set the body element’s text size to be smaller than the user’s default.  I did this to prevent the sans-serif fonts employed in those themes from looking stupidly big in default browser installs.  If you object to this approach, then pick a theme that doesn’t override text size—the default theme, “Eos,” is one of these—or set your preferred base text size on the advanced setup page.  Or both.
• When switching from one theme to another, you may run afoul of bugs in various browsers that let styles leak from one theme to another.  If you see a totally horked display, reload the page to see if that fixes it.
• Although I was tempted, I didn’t end up using any PNGs to create the translucency effects in various themes.  I didn’t use background-attachment: fixed, either.  It was a lot more challenging to figure out ways to let IE/Win users see the translucent effects with scrolling backgrounds and regular old JPEGs.  I may write a tutorial on how I managed this, but anyone who can’t wait is free to tear into my CSS and figure it out for themselves.  And to copy the technique, if they so desire.
• Despite it not being the default theme, I think my favorite is Aware.  The name is not necessarily the English word meaning “having knowledge or cognizance,” but is instead a Japanese word meaning “the sense of poignant beauty arising from an ephemeral thing.”  Since I think the latter is only possible with the former, I find this to be a wonderful intersection of cross-linguistic meaning.  Thus you can take the title to mean whichever of the definitions appeals to you most.  For me, it changes back and forth over time.

There may be adjustments to the themes in the future as I find techniques I like better, or as I fix up oddities in and add extra visual frosting to the more experimental themes (like “Matrix”).  Meanwhile, please feel free to share and enjoy.

• Eos Rising was published on Tuesday, June 10th, 2003.
• It was assigned to the CSS and Redesign categories.
• There have been no replies.