Posts in the CSS Category

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.

When you withdraw for a couple of weeks, all kinds of stuff piles up—in the house, in the Inbox, in life in general.

During our Passover seder on April 17, I spotted a label on a bottle that cracked me up.  Since I’d acquired a digital camera just the day before in hopes of taking pictures of both our families at one table, I couldn’t resist capturing the label for posterity, so I’ll share it with you. Somebody really needed to think a little harder about their domain name choice.  Then again, had they done so, I’d have been deprived of a good laugh.  Hey, maybe they’re going back to their original recipe!  Wouldn’t that be fun.

The day after Mom’s death, Netdiver published a close-ups* interview with me.  You’ve probably already seen it, but if not, there you go.  It’s long, but that’s mostly due to it having a lot of questions, some of which were actually difficult to answer.

Chris Casciano updated his PNH Developer Toolbar to fix some typos, add more links to useful tools, and make the toolbar work in Phoenix/Firebird as well as Netscape/Mozilla.  I don’t think I mentioned the toolbar here before, so let me just say it’s insanely useful and thoroughly awesome.  I’m already becoming addicted to it, especially in conjunction with the DevEdge Sidebar Tabs, which lets me drill into various W3C specifications quickly and easily.

Everyone got all upset at Dave Winer, who in turn got upset with everyone; things were said, mistakes were made, meanings were imposed and decomposed.  If it hadn’t started with a post about designers and CSS, I wouldn’t even bother to mention it.  My reaction: everyone over-reacted.  Dave didn’t say in that particular post that there was anything wrong with CSS, although he did make some interesting statements about what works and what doesn’t.  Of course the advantages of using CSS are fairly self-evident to anyone paying the slightest bit of attention, and (to my eye) far too compelling to ignore or eschew.  There are indeed flaws and omissions both in browser support and the CSS specification itself, but that’s never stopped anyone.  Meanwhile, anyone who’s using CSS as a political club of some sort needs to cut it out.  CSS is a technology, and a good one that promises to get better.  It’s not a religion, despite the odd quasi-religious titles people keep affixing to my name (“CSS Pope” being one of the funniest).

On an oddly related note, Jeffrey and Tantek and Matt batted about thoughts on RSS, syndication, hand-rolling a weblog, and so on.  This particular journal (as I call it) is basically hand-rolled, and for a long time I manually updated the current entries and archives: when I added a new entry to the home page, I’d cut the least recent entry and paste it into the archive page.  That worked so long as I posted weekly and didn’t want to do anything else with the entries.

But then I started hearing from people who said that without an RSS feed, they couldn’t keep track of a site.  I write these entries so that people can see them, and I was sort of interested in RSS anyway, so I decided that I needed a way to set up a feed and automate the process of managing the entries.  As long-time readers will recall, I accomplished this by teaching myself XSLT and using it to create a very minimal content management system of my own.  Entries are written in an XML format I derived from RSS itself, and I run the XML file through a series of XSLT recipes to produce the most recent entries on the home page, the archives, and the RSS feeds.  I suppose I could also create messages to e-mail to people who signed up for them, but I’m not up to that yet.

So anyway, I agree with what Jeffrey says about pouring an entire site’s contents into an RSS feed: why would I bother?  Part of the experience of reading a personal site is how it looks, the way the words are arranged, the layout of the content.  So I’ve been doing basically what Jeffrey is now doing, and dropping the first sentence of each entry into the feed.  That keeps the feed small, it allows people to know when I’ve posted something new, and gives them enough information to decide if they want to go read the new entry.  It also forces me to think about writing good lead sentences, since an entry description of “I just had a thought….” isn’t nearly is interesting as “I was pondering the relationship between XSLT and CSS, and had an idea I think is pretty cool….”

(Incidentally, those of you chastising Jeffrey for “selling out” need a serious perspective check.  Try some deep-breathing exercises while you’re at it.)

Matt observed that I should drop the plink class on the permalinks and use a contextual selector to style them, and that I should add rel="bookmark" to the permalinks.  The latter I’ll implement in my next XSLT update, as I should have done long ago.  The former, however, I’ll probably not do just because I like having a class that applies only to the permalinks and nothing else.  I might decide in the future to move the permalinks from one element to another, and I don’t want to have to juggle a bunch of selectors when I do.  The structure and design of the site are always in a slow state of evolution, so I try to plan for future mutations as best I can.

That’s one benefit of hand-rolling the whole system.  I can plan ahead with the greatest possible clarity because I know exactly how everything is put together, and how changes to the structure will affect the layout and experience.  I can also make sure the site’s markup is as lean and relevant as possible, because the most advanced document optimization tool ever devised is still the human brain.

• Randomatters was published on Friday, May 2nd, 2003.
• It was assigned to the CSS, Interviews, Personal, RSS, and Web categories.
• There have been no replies.

The css-discuss archives are back into active and complete form, although the URL changed slightly.  If you’re looking for something in the annals of our little community (1,966 members and counting), go to it.  The archive makes for a handy way to publicly link to list posts… say, if I wanted to point out a post I made about the issues with creating a monthly calendar without using a table. The archive upgrade happened a little while ago, and I’ve been utterly remiss in mentioning it.  I’d like to thank the fine folks at Incutio for their support and services in keeping the archive going and growing.

This is kind of cool: a design generator for CSS columnar layout.  Simon says that it “appears to use Big John’s source ordered columns technique,” which wouldn’t surprise me.  Either way, it’s an interesting tool.

Spring is well underway hereabouts, and the days are once again sunny and beautiful.  Cleveland is an interesting city; through the winter we’re one of the least sunny spots in the country, but during the rest of the year we’re one of the sunniest.  Right now, there’s a flawless blue sky backing up barely-budded trees swaying in the wind, and I wish this spring could last the better part of forever.

• Renewals was published on Sunday, April 13th, 2003.
• It was assigned to the CSS and Personal categories.
• There have been no replies.

The CSS1 support chart known as the mastergrid disappeared when Web Review’s servers got shut off, which has apparently caused some anguish in the community.  Anguish no more!  It’s back online now, thanks to Netscape DevEdge.  Actually, there are three charts now, with more planned for the future.

There are also plans afoot to (finally!) get the charts expanded to include browsers that have been released since the end of 2000.  You know, like two three major releases of Opera, three of Netscape, Mozilla 1.0, IE6, and so on.  I don’t know if Linux browsers will be added or not, but I’ll see what can be done.  Also, I’d really like to add Safari, but since I don’t have Jaguar, I’m kind of stuck until I can find time to upgrade my laptop.

The charts are also now licensed under a Creative Commons license (specifically, Attribution-Noncommercial-ShareAlike 1.0) so that they can always be available to the community, regardless of what happens in the future.  They can also be extended, should somebody wish to undertake the effort, without removing the extended works from the community.  I’d like to thank the folks at Netscape for not only giving the charts a home, but also for being very supportive of this licensing approach.

• Master of Your Cascade was published on Friday, April 11th, 2003.
• It was assigned to the CSS category.
• There have been no replies.

Holy cow, there’s some cool stuff over at Squidfingers.  One of his offered patterns may well find its way into the next redesign of this here site.  And, if you’ll notice, the pages are very structural markup that’s laid out with CSS.  No layout tables for our cephalopodic pal!

(Last week, while watching a video on octopi, it occurred to me to wonder if scientists who study octopi and squid tentacles are called cephalopodiatrists.  Do cephalopods ever get tenticular cancer?  And is it illegal in Georgia to cuttlefish?  Even stuffed ones?  Even if the stuffing is a really nice Gulf shrimp stuffing?)

I’m currently reading a book called Conspiracy, which is actually an exploration of people’s readiness to believe in conspiracy theories and the roots of such theories.  For a couple of days, though, I couldn’t find the book anywhere in the house.  I began to wonder if it had been stolen by the Illuminati or something, but then it turned up on Kat’s desk.  Very suspicious.  Maybe she’s actually an agent of the Illuminati, keeping an eye on me to ensure that I don’t uncover the real truth.  Yeah, that seems reasonable.  I’ll need to look into making some tin hats to block out their mind-control rays.

The book I read before Conspiracy was James Gleick’s Faster: The Acceleration of Just About Everything.  Ironically, it took me almost a month to finish.

As I was working on something late last night, FX showed a program called “UFOs: The Best Evidence Ever (Caught On Tape) 2.”  Leaving the odd punctuation aside, how is it that there was more than one of these shows?  I mean, once you’ve shown the Best Evidence Ever, then shouldn’t the next show be called something like “The Next-Best Evidence Ever?”  Then I saw Denis Leary doing a Quaker State commercial, which seemed really sad somehow.  That was immediately followed by a double shot (sorry) of ads for a “natural male enhancement” product.  As if I don’t get enough of that kind of spam in my Inbox—now I’m getting it on TV as well.  So when do we get mainstream-media spam for breast enhancement products?  It would only be fair.

• Tentacle Alert was published on Monday, April 7th, 2003.
• It was assigned to the CSS and Personal categories.
• There have been no replies.