Posts in the CSS Category

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.

There’s a great theme at the Zen Garden: What Lies Beneath.  It’s very non-traditional (hint: you don’t scroll like normal) but very well done, nice and earthy.  There have been several other contributions since I last mentioned the site, all of them quite interesting.  The design process behind one of them has been explained in some detail by its author, Doug Bowman, who knows quite a few things about the power of CSS-based design.

Meanwhile, the Literary Moose has taken advantage of the CSS3 definition of content to show how text can be replaced with an image in a gracefully flexible manner.  If you just see plain text for the headline, follow the link to the screenshot, which was taken in Opera.  If more browsers supported this behavior, we could stop using <span>-based image replacement hacks such as those employed at the Zen Garden and other sites.  I’m not slamming said sites: such hacks are necessary if certain effects are to be achieved in today’s browsers.  It’s still good to have someone pointing out where we might be able to go tomorrow.

As you might have guessed, I’m back from TODCON MX Vegas, which was a real kick on many levels (but not the literal one).  That is one seriously unhinged and fun group of folks, and I’d like to thank Ray West for finally getting me there.  It seems my presentations were all very well received, which is always preferable to the alternatives, especially the ones involving torches and pitchforks.  I hope to get my files online in the next few days, particularly the ones from the “Redesigning” talk.  Pictures from the conference are already appearing over at DWmommy.com, and I’d bet there will be plenty more to come.

I think that of all gifts one person can give another, trust is the rarest and most precious.  In a way that few other gifts do, trust creates a bond that is at once strong and fragile, and that very paradox is part of what gives it so much beauty.  The next time I’m feeling downcast about myself, I need only think of all the people who have trusted me with their thoughts, their feelings, with pieces of their lives.

• Zen, Now, and the Hereafter was published on Friday, June 6th, 2003.
• It was assigned to the CSS and Speaking categories.
• There have been no replies.

This afternoon I wrapped up an interview with a guy from Radio New Zealand’s Digital Life programme, who was calling me from tomorrow morning.  (They’re eighteen hours ahead of me.)  I noticed almost no lag despite the distance; after watching the one-second-plus pauses in conversations between anchors at CNN Center and field correspondents in the Middle East, I expected a similar effect.  There was a very slight delay, it seemed, maybe a quarter-second or less, but no more.  We were separated by roughly ten thousand kilometers (six thousand miles) of linear distance and probably thirteen thousand kilometers (nine thousand miles) of surface distance as we talked, and yet the conversation was no different than if he’d been sitting across town.  Just wow.  I’ve been promised a transcript of the interview, so I hope I was reasonably coherent.

Yesterday’s entry drew some responses, all of them basically telling me to stop worrying.  I appreciate that.  I think I’ll still fret for a while anyway, just because it forces me to think about what I really want to do.  If I find other things more interesting than CSS, then I need to admit that and move on.  If not, then I need to stop dithering and get back to work.  Probably the latter, but one should take stock every year or so.

On this, the second anniversary of starting at Netscape, Microsoft agreed to settle an antitrust lawsuit by paying AOL a large pile of cash, and furthermore let AOL continue to use IE in the AOL client for the next seven years for free.

Well.  Perhaps the reflections upon my career and its future will come in handy after all.

• Spanning the Globe was published on Thursday, May 29th, 2003.
• It was assigned to the CSS and Interviews categories.
• There have been no replies.

I’m continually amazed by what interests people.  The most recent examples: Simon Willison’s CSS tutorials and Stuart Robertson’s “The Search For the Missing Link.”  This is in no way a denigration of the work either man is doing—it’s top-notch stuff, and is not only well presented but is obviously striking a chord with readers.  I’m just saying that it never would have occurred to me that people would be interested in those kinds of things, so even if I’d had the ideas, I probably wouldn’t have bothered to write them up.  (Exception: Simon’s CSS makeovers of the Winer and JWZ sites, which I wish I’d thought of first.  Oh well.)

This bothers me, because it hints at a personal failing.  If I’m not talking about the things that interest people, if I’ve lost touch with what people want to know, then how can I be an effective teacher and author?  Why should anyone bother to listen to what I have to say?  For a communicator like me, this is a real problem.  I thrive on the exchange of information, both incoming and outgoing.  Of course I can always consume knowledge, but that isn’t enough.  If I can’t provide it as well, the meal is unsatisfying.  The important thing is the sharing.

Am I bored with CSS, and having that stunt my abilities?  Is this a lurking fear of being eclipsed by newer (and generally younger) contributors to the field and eventually forgotten?  Have I just been in the game too long to stay in touch with the audience?  I’m sure people out there would be happy to tell me that I could still see what the audience wants if only a massively swollen ego weren’t blocking my sight, and for all I know they’re correct.  Maybe it’s time to move into a different area of study, and see what happens.  I hear they’re taking applications at that truck driving school.

It was two years ago tomorrow that I started work for Netscape, by the way.

• My Dull Surprise was published on Wednesday, May 28th, 2003.
• It was assigned to the CSS and Writing categories.
• There have been no replies.

The XBL/Zen Garden thread continues over at Surfin’ Safari, including an interesting (Gecko-only) example of XBL in action and comments from various parties.  Share and enjoy.

I got a bit of feedback on the Color Blender, including a request to make it a downloadable package for offline use.  I’ll probably merge the CSS and JavaScript back into the HTML document, so people can just save the source if they want an offline blender.  I split the styling and scripting out to make development easier, so I probably should have poured them back in before going public.  It’ll be fewer hits on the server, even.  Look for an update in the next couple of days.

Thanks to El Jefe, I discovered that diveintomark.org (whose favicon I may steal) has Eric Meyer on CSS in his “Recommended Reading” section.  I’m blushing!  The book’s sales are actually on the rise, apparently, which is kind of amazing given both the industry and the economy.  It’s the kind of thing that makes me wonder if I should write a sequel quickly, to strike while the iron is hot; or wait until sales trail off to avoid buyer confusion (and to milk the original for all it’s worth).  Hopefully it’s the latter, because frankly I don’t have time right now to tackle a sequel.  Too busy with another writing project (itself a sequel of sorts).

Thanks to Technorati, I found a site that asked if the DevEdge redesign was the “worst use of CSS ever?”  Ah, me public.  It’s okay, though; in reading through the rest of the site, I concluded that if the person in charge didn’t like our design, we’d probably done something right.

• I Can Feel The Love was published on Tuesday, May 13th, 2003.
• It was assigned to the CSS category.
• There have been no replies.

For some reason I decided this weekend to crawl into a hole and hack some JavaScript, so the Color Blender‘s gotten an upgrade.  You can use a “waterfall” display of “web-safe” colors to input colors, or type them in as before.  If you have already filled in colors and switch value formats, the colors will stay and the values will be converted in place.  This can be useful if you want to, for example, find midpoints between #AA31FF and rgb(13%,23%,42%).  I think the changes make the tool even more useful, and I hope you do too.

Oh, and yeah, I used a simple table to lay out the page.  I toyed with positioning and floating the three “columns,” but in the end the table approach seemed the easiest, so I went with it.  This was partly because I have a footer and didn’t want to mess with floating and clearing just to get it below everything else.  It was also because, after a day or two of grappling with JavaScript, I got lazy.  I may go back at some point and replace the table with floats.  In the meantime, this works well enough.

CSS2 and the official CSS1 Test Suite both turn five years old today.  I’m not sure if I bring this up in celebration or protest, but in my case, it’s definitely cause for introspection.

A couple of contributed designs have sprouted in the CSS Zen Garden, and I imagine there will be more to follow.  What an incredible resource!  A few weeks back, I said in my close-up* interview:

While an artist is certainly limited by his medium, it’s more often the case that the medium is limited by its artists. Until a Picasso or Serat comes along, you don’t truly appreciate what the medium can produce. As more designers come to use CSS, we’ll see more compelling CSS-driven sites.

Dave Shea and his contributors are doing exactly that:  showing us more of what the medium can do, and creating a compelling site.  Just moving from design to design in the Zen Garden should be ample proof that CSS is capable of more than most of us have ever thought possible—me included.

Meanwhile, David Hyatt posted to say that XBL directly addresses the point I made in Thursday’s post:

You attach XBL to an element through CSS, and XBL can generate a complete anonymous content subtree that can then be styled using a scoped stylesheet applied to those elements. You can even scatter the real content however you’d like within the anonymous content tree…. XBL is a perfect tool for implementing complex layouts at the presentational level and preserving the purity of the main source document. XBL can even execute scripts for fancy animation effects or rollovers, all without the source document being polluted at all.

Sign me up!  I had no idea XBL was capable of this sort of thing; when the “XSLT vs. XBL” thread erupted on www-style a few months ago, I pretty much tuned it out after the fifth message.  Obviously I should have paid a little more attention.  If I can, for example, take a paragraph and use XBL to generate three block boxes and two inline boxes, styling each one independently to create given effects and applying multiple backgrounds, then it seems like the ideal solution.  Except for that whole lack of cross-browser support thing, of course.  Still, a similar lack didn’t exactly stop me from digging into CSS, back in mid-1996.

• Blending Galore was published on Monday, May 12th, 2003.
• It was assigned to the CSS and Tools categories.
• There have been no replies.

Want to see some wonderful, and strikingly different, designs for the same content?  Want to contribute your own themes?  Then get on over to the CSS Zen Garden.  I have two reactions: delight and jealousy.  As I’ve said before, I don’t have strong visual design skills.  I’ve been working on a new set of designs for meyerweb, and they’re almost ready to go live.  I was feeling rather proud of what I’d done.  Then these guys come along and show me just how fumbling and crayonesque my design efforts have been.

There are quite a few span elements littered throughout the Zen Garden’s source, but as I’ve been finding recently, this is almost necessary.  It’s troublesome to me that really interesting CSS-based visual design should require that we clutter the document structure with gratuitous elements, but there truly doesn’t seem to be a good way around this.  It may be that future CSS, or some other styling language, will allow the author to create multiple layout boxes (or other shapes) for a given element and style them independently.  The syntax would probably be weird compared to what we have now, but it would allow for a lot more design flexibility.

And speaking of design, don’t forget about the Web Design Meetup tonight!

• Zen and the Art of CSS was published on Thursday, May 8th, 2003.
• It was assigned to the CSS category.
• There have been no replies.

This morning’s Penny Arcade just floored me (it makes more sense if you read the preceding comic first).  Say, did you know the Pants Association encourages you to wear your pants at least three times a day?  Yes, that’s a quote.  You get major geek points if you can identify the source, and about a million times more geek points if you know the exact episode name.

Some time later, I chuckled quite a bit at this joke:

Look inside a typical CSS flamer house.  What do you see?  Chairs, only chairs.  No tables.

That was followed by a post asking for realistic experts to explain how to use CSS effectively.  Hey, that’s me!  It’s what I strive to be, anyway, as I have for quite some time.  I hope it shows in my work.

I’m still trying to get a handle on this whole “CSS flamer” thing, a term I first encountered only a few days ago.  I can’t quite tell if there are people running around using CSS advocacy as a way to pummel others because it’s fun, or if strong advocacy of the use of CSS is interpreted as flaming, or what, exactly.  I mean, yeah, I think that if you can design without tables, then you should definitely do it.  Is that being a CSS flamer?  Even though the reasons are good things like reduced page weight, simplified page structure, and better accessibility?  I also think that if you need to do something CSS can’t handle, then use the next best tool—tables, Flash, public radio, whatever.  Is that some sort of betrayal of the Holy Path of CSS?  Help me out here, people, I’m trying to understand.  Are technologies forever dead because they aren’t perfect?  Did visual styling become a war?  How?  When?  Why?

I thought about ranting a while longer, but frankly everything I wrote sounded whiny (as if the above didn’t) and it was getting pointlessly angry, so I decided to stop.  Maybe I’ll come back to it later.  Summary: technologies are tools, not religions.  Use the best tool for a job.  Show other people how to better use a particular tool, if you can.  No matter how skilled you are with a tool, please don’t hit other people with it.

Every now and again, a little anger does indeed leak through.  I might be grouchier than usual today because of the spam I’ve been getting over the last few days.  Here’s one I got just this morning: “Remember Mom on Mother’s Day!”

Well gee, Mr. Spammer, thanks so much for reminding me that I can’t really do anything else.

• Laughter and Sorrow was published on Monday, May 5th, 2003.
• It was assigned to the CSS and Personal categories.
• There have been no replies.