Posts in the CSS Category

One of the first rules of life is that first-hand information is always better than second-hand information.  You can be more certain of something if you’ve seen it with your own eyes.  Anything else is hearsay, rumor, conjecture—an article of faith, if you will.  At the very minimum, you have to have faith that your source is reliable.  The problems begin when sources aren’t reliable.

No, this isn’t a rant about the intelligence screw-ups previous to the invasion of Iraq.  Instead, it’s a warning that inspector programs and saving as “Web page, complete” features can lead you astray.

One such example came up recently, shortly after I mentioned the launch of the new Technorati design.  A question came in:

I did want to ask about the use of -x-background-{x,y}-position as opposed to background-position. If I understand correctly, the -x prefix indicates an experimental CSS attribute, so in what circumstances should one use this sort of experimental attribute instead of an official one?

I’d have been glad to answer the question, if only I’d known what the heck he was talking about.  Those certainly weren’t properties I’d added to the style sheets.  They weren’t even properties I’d ever heard of, proprietary or otherwise.

Just to be sure, I loaded the CSS files found on the Technorati site into my browser and searched them for the reported properties.  No results.  I inquired as to where the reporter had seen them, and it turned out they were showing up in Firefox’s DOM Inspector.

Now, the DOM Inspector is an incredibly useful tool.  You can use it to look at the document tree after scripts have run and dynamically added content.  You can get the absolute (that is, root-relative) X and Y coordinates of the top left corner of every element, as well as its computed dimensions in pixels.  You can see the CSS rules that apply to a given element… not just the everyday CSS properties, but the stuff that the Gecko engine maintains internally.

That’s where the problem had come in.  The DOM Inspector was showing special property names, splitting the background-position values into two different pseudo-properties, and not showing the actual background-position declaration.  This, to me, is a flaw in the Inspector.  It should do two things differently:

1. It should show the declaration found in the style sheet.  There should be a line that shows background-position and bottom left (or whatever), because that’s what the style sheet contains.
2. It should present the internally-computed information differently than the stuff actually taken from the style sheet.  One possibility would be to show any internal property/value pair as gray italicized text.  I’d also like an option to suppress display of the internal information, so that all I see is what the style sheet contains.

The person who asked why I was using those properties wasn’t stupid.  He was just unaware that his tool was giving him a distorted picture of the style sheet’s contents.

Don’t think Firefox is the only culprit in unreliable reporting, though.  Anyone who uses Internet Explorer’s save as “Web page, complete” feature to create a local copy for testing purposes isn’t getting an actual copy.  Instead of receiving local mirrors of the files found on the Web server, they’re getting a dump from the browser’s internals.  So an external style sheet will actually be what the browser computed, not what the author wrote.  For example, this:

body {margin: 0; padding: 0;
  background: white url(bodybg.gif) 0 0 no-repeat; color: black;
  font: small Verdana, Arial, sans-serif;}

…becomes this:

BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
BACKGROUND: url(bodybg.gif) white no-repeat 0px 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: small Verdana, Arial, sans-serif;
COLOR: black; PADDING-TOP: 0px
}

Okay, so it destroys the authoring style, but it isn’t like it actually breaks anything, right?  Wrong.  For some reason, despite IE treating the universal selector correctly, any rule that employs a universal selector will lose the universal selector when it’s saved as “Web page, complete”.  Thus, this:

#sidebar {margin: 0 74% 3em 35px; padding: 0;}
#sidebar * {margin: 0; padding: 0;}

…becomes this:

#sidebar {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px;
MARGIN: 0px 74% 3em 35px; PADDING-TOP: 0px
}
#sidebar  {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px;
MARGIN: 0px; PADDING-TOP: 0px
}

Oops.  Not only can this mean the local copy renders very differently as compared to the “live” version, it’s also very confusing for anyone who’s saved the page in order to learn from it.  Why in the world would anyone write two rules in a row with the same selector?  Answer: nobody would.  Your tool simply fooled you into thinking that someone did.

Incidentally, if you want to see the IE-mangled examples I showed in a real live set of files on your hard drive, go save as “Web page, complete” the home page of Complex Spiral Consulting using IE/Win.  And from now on, I’ll always put “Web page, complete” in quotes because it’s an inaccurate label.  It should really say that IE will save as “Web page, mutated”.

So if you’re Inspecting a page, or viewing a saved copy, remember this:  nothing beats seeing the original, actual source with your own eyes.  If you see something odd in your local copy, your first step should be to go to the original source and make sure the oddness is really there, and not an artifact of your tools.

• Web Page, Mutated was published on Wednesday, July 6th, 2005.
• It was assigned to the Browsers, CSS, and Tools categories.
• There have been twenty-three replies.

I think that, overall, the workshops went very well indeed.  Probably the most frustrating thing was that the hotel lacked net access for the entire time I was there.  Oh, they had a network, with drops in the rooms and a first-floor wifi cloud.  It’s just that the network was completely broken for the entire five days, save a two-hour window in the middle of one of the days.

But that annoyance aside, everything else was great.  The attendees asked a lot of interesting questions and soaked up the firehose of information I was blasting their way.  There was some good (and good-natured) give-and-take on the subject of tables versus CSS for layout, with plenty of examples of where each approach might be better or worse than others.  And hey, I wore a tie!  Both days!  Ryan has the picture to prove it!

He also has the British spelling of “favorite” to prove that he’s been away from Colorado for too long.

Anyway, I’d like to send a huge thank you to everyone who attended for making it a great experience.  I had fun, and I think you did too.  Now for two bits of trivia about the attendees:

• The quiet, bearded man who sat house right in the third or fourth row on Saturday was none other than Michaël Guitton, a significant and early contributor to S5, the slide show system I used to present the morning notes.  I didn’t find this out until the end of the day, or else I’d have made him stand to take a bow.  (Which might be why he waited until the end of the day to introduce himself.)

  He was also the only person at lunch to order the salmon, although I came very close to doing so myself.

• On Friday, as a number of us headed up the street for social hour, one of the attendees mentioned he’d been in Cleveland and Columbus many years ago.  I asked what had brought him there, and he said he’d been touring with a band.

  “Oh, really?” said I.  “That’s cool.  Um, any chance it’s a band I might have heard of?”

  “The Jesus and Mary Chain”, he said.

  “WHAT?!?!?”

  I had to ask him three times if he was having me on.  Turns out he wasn’t: I was talking to Dave Evans, who was their guitarist in the late 80s.  Seriously.  I could not make this up even if I tried.  I really had a former member of the Jesus and Mary Chain in my CSS workshop.

  That’s so far beyond incredible that I can’t even describe where it ends up.

• Workshop Wrap-Up was published on Wednesday, June 8th, 2005.
• It was assigned to the (X)HTML, CSS, and Speaking categories.
• There have been six replies.

The other day I hit a situation that pushed me to come up with a way to simulate the child selector in a way Internet Explorer could understand using two rules.  I doubt I’m the first to think of it, but I’d never seen it before, so I thought I’d document the solution here.

The deal was that I had a column of text featuring white background with some black flecks in it.  On top of that went some near-black text.  All fine, except where the text sat on top of a fleck, which made it next to impossible to read.

To counteract that effect, I decided to set the background of the various descendants of that div to be white, so they’d mask any flecks they were overlapping.  Thus I wrote:

#main * {background: #FFF;}

It worked great for about a second.  That’s when I realized that I had links in the column, and some of them were sitting inside table rows with a non-white background.  The rule I’d just written was giving the links white backgrounds, which had the visual effect of punching holes in the row backgrounds.  That was no good.

What I really needed was a way to just set white background on elements that were children of #main.  CSS has a child selection combinator (>) but neither version of Internet Explorer supports it.  After a few moments’ thought, I realized that I could add a rule that would make transparent the background of any element that was at least a grandchild, but not a child, and it would still work in Explorer.

#main * {background: #FFF;}
#main * * {background: transparent;}

The end result is that there is a way to simulate child selection without actually using the child combinator.  The general pattern is to use a normal descendant selection in your first rule, and then “undo” the first rule with a second that has a universal selector in the middle.  Suppose you want to boldface any p element that’s a child of a div, but no others.  The solution:

div p {font-weight: bold;}
div * p {font-weight: normal;}

It might not be something you use every day, but if it’s needed, there you go.

Update: Lachlan points out that you’ll need to watch out for specificity conflicts when using this technique.

• Universal Child Replacement was published on Tuesday, May 31st, 2005.
• It was assigned to the CSS category.
• There have been thirty-five replies.

Since I’m going to be arriving in London a week from today, I wandered over to the Professional CSS / XHTML Techniques Workshop site to see how things were going.  I discovered that there are only three seats left for the Friday session, Saturday having sold out long ago.  So if you’ve been hesitating, might be best to overcome that hesitation in a timely fashion.  I’m just sayin’.

• Limited London Seating was published on Thursday, May 26th, 2005.
• It was assigned to the (X)HTML, CSS, and Speaking categories.
• There have been eleven replies.

I just talked with Ryan, organizer of the XHTML and CSS Workshop happening in London on Saturday, 4 June 2005, and he says there are only a few seats left—there were but seven when he contacted me on Friday, but for all I know it’s fewer now (and no doubt it is if you’re reading this post in the archives, instead of when it was first published).

Thanks to the very strong registration numbers, Ryan is seriously considering adding another day.  If that happens, it will mean the Saturday session is all sold out, so if you want to attend that day, you’d better get your reservation in quickly.  We’ll spend the day learning about the ins and outs of standards-based design, as well as chewing over attendee questions and generally having fun while we learn a ton.  And don’t forget about the exclusive Survival Kit CD-ROM that all attendees will receive.

All in all, a good time is in the offing, and it’s yours… but only if you grab a seat.

Update | 22 Apr 05: the Saturday session has sold out, and the Friday session has been scheduled.  Registration is open!

• London Workshop Filling Up! was published on Sunday, April 17th, 2005.
• It was assigned to the (X)HTML, CSS, and Speaking categories.
• There have been nine replies.

As recently announced by Mark Baker, Tantek Çelik and I will be co-chairing a full-day track on microformats as part of Developers’ Day at WWW2005.  We’ll announce the details in the near future, but we can already say that have some great speakers and topics lined up.  I encourage anyone who can to come check it out.  You can register at the WWW2005 site; make sure to check the option for “Developers’ Day, 5/14” when you do.

Tantek and I will also be presenting a poster on XMDP at the conference, and on Tuesday, May 10th, I’ll be delivering a half-day tutorial on Standards-Based Design—assuming enough people register, anyway—as well as delivering the afternoon keynote at, and participating in the closing panel for, the 2nd International Cross-Disciplinary Workshop on Web Accessibility (W4A).

Add to that an expected public appearance in Tokyo the evening of Friday the 13th (for which I hope to have details very soon) as well as a few other agenda items, and I’ve started to wonder if I’m going to have any time to sightsee while I’m there.  That’s becoming something of a theme, actually: I’m not expecting to have more than a day or so to make the rounds when I’m in London this June.

For some reason, I’m reminded of Mel Brooks in Blazing Saddles: “Work work work work work!”

• WWW2005: Microformats Track was published on Monday, April 4th, 2005.
• It was assigned to the CSS, semantic web, Speaking, and W3C categories.
• There have been nine replies.

A little while back, I made a joke about presentational class names.  As it happened, there was a second joke hidden within the joke—as is so often the case with me—and I was delighted to see that one of my readers caught it.

But is there a reasonable alternative?  I’ve long been using the class value border to indicate when I want to put a border around a picture.  This is, to me, one of those gray-area situations that’s very hard to resolve.  I can claim that border is not very presentational: it doesn’t say anything about the specific appearance of the border, only that there should be one.  I could also argue that it’s entirely too presentational: from a semantic point of view, what does it matter if the picture is bordered or not?  It doesn’t, so the class name is unacceptable.

And yet, it does matter.  Visually, some images need to have borders, while others need to lack a border.  I can’t invent a new element or attribute to express the difference (not without writing my own DTD, anyway).  Technologically, class values are the only place I can make the distinction.

There are some other sort-of-presentational class names hanging around my site, too.  standalone is used when an image, or set of images, stands on its own, as opposed to illustrative images that are floated.  The intent is presentational, though again, standalone doesn’t say exactly how the images stand alone.  It just says that they do.

I’ve yet to come up with a good semantic way of saying “this image needs to have something that visually separates it from the rest of the page”.  I’ve kicked around ideas for other values, like framed or separated, but these fall into the same gray area… probably because the intent is basically presentational.  I’ve abstracted the presentationalism of the intent, but it’s still there.

So, anyone have a better class name, or even a better approach to drawing the distinction?  And before anyone tells me to quit worrying about this, I’m not worrying—I’m playing.  It’s like doing a crossword, or working on a logic puzzle.  Usually I just do this stuff in my head, but in this case I’m fairly stumped, and could use some help.

• Class Presentation was published on Sunday, April 3rd, 2005.
• It was assigned to the (X)HTML and CSS categories.
• There have been forty replies.

World Tour 2005 continues to add dates.  In addition to Japan (May) and Austraila (September), I’ll be heading to London for a one-day workshop on CSS, XHTML, and standards-oriented design to be held Saturday, June 4th.  You can get all the agenda and other details on “Professional CSS XHTML Techniques” from the Carson Workshops website.

This is a limited-access event: only 40 attendees will be allowed.  Suppose you’re one of that 40, as of course you should be if at all possible.  Not only does that give you a 1-in-40 chance of winning a full copy of Dreamweaver MX 2004, it also gets you the “Survival Kit”, a disc containing all kinds of examples, articles, tools, and so forth.  You’ll also get a whole day of high-tempo, practical instruction in CSS-driven design, with plenty of opportunity to pose questions and get answers.

While this won’t be a workshop for total beginners, it won’t require advanced knowledge of CSS and XHTML, either.  Basically, if you’re at least somewhat familiar with HTML or XHTML and know the basics of writing style sheets, then you’ll fit right in.  Even if you’re beyond that, I’ll be covering a  lot of ground that you should find interesting.

And then there’s always the opportunity to hang out that evening, after the workshop is officially over, and talk about whatever comes to mind.

“Professional CSS XHTML Techniques” — London, UK on Saturday, 4 June 2005.  Hope to see you there!

• Workshopping in London was published on Wednesday, March 23rd, 2005.
• It was assigned to the CSS and Speaking categories.
• There have been fourteen replies.