Posts in the Tech Category

Over on IEblog, Markus Mielke has a great IE7 post with screenshots of a CSS Zen Garden-inspired layout showing off fixed positioning, PNG alpha channels, arbitrary-element hover, and so much more.  There are those who have called for its inclusion into the Zen Garden, but as Dave points out, it would break in IE6 and so couldn’t qualify as an official design.  Oh, the irony.

Getting back to Markus’ post, he has this to say near the end:

…we are now layout complete with the release of the MIX build – we don’t plan to add more layout features or drastically change layout behavior. This gives web developers a chance to test and prepare your pages for Vista Beta2 and the final release of IE7.  There are still bugs and missing features (display tables, generated content to name a few) we would have liked to do for IE7 but based on your requests to have some lead time to test your pages we need to lock it down now to be able to ship IE7.

So there you go: no more CSS functionality will be added to IE7.  Anything that isn’t there, like CSS table properties and the like, will have to wait for a future version.  As has been publicly stated, though, we won’t have to wait five years for the next version.  There’s no solid guarantee of how long or short a wait there will be, but Bill Gates himself said that new versions would come out more frequently.  The IE team reiterated this.

So will current bugs in IE7’s CSS handling be fixed?  I give that a solid “maybe”.  Markus has left the door partway open by saying that there are no plans to make drastic changes to layout behavior.  That could mean that if a bug fix only causes minor changes, then it might get in.  On the other hand, it could mean that unless existing behavior causes massive problems (or crashes), no bug fixes will be taken until after IE7.  Personally, I wouldn’t count on it, but I’ve been wrong before.

Then, in the same post, Markus drops an entirely new bombshell:

The good news is that we are in the progress of building up a public bug database where you can submit your issues, track their progress and see when we internally fix an issue – Al is going to post about this soon.  Your participation will help us greatly to improve IE and also help us to prioritize what bugs to fix for the next releases.

Sweet fancy Moses—a Bugzilla for IE?  There was no mention of this within my earshot at Mix 06, so I’m as surprised as anyone else.  Did I fall down a rabbit hole and quaff a bottle labeled “DRINK ME”?  If this is a dream, I don’t ever want to wake up.

The Redmond-haters will claim that this is just a lot of catch-up, played years late, and amounts to little more than aping what Mozilla and other browser makers have been doing—better standards support, a tabbed interface, open bug databases, and so on.  It happens that they’re right, but what’s wrong with that?  The IE team has looked over what happened while they were in hibernation and is emulating the best of it.  That’s not lame, that’s smart.  And it should have other browser makers a little bit worried.  A lot of their success has been due to Microsoft’s complacency.  They’re going to have to be a lot sharper and more nimble now that the 800 pound gorilla is actually awake and paying attention to its surroundings.

No, I don’t think IE will wipe everyone else off the map, but I do think the browser space is getting a lot more interesting.  What makes it particularly interesting is that the competition is not going to be over who can add the coolest non-standard geegaws, but who can deliver the best product based on the same standards as everyone else.

I’ve wondered what that would be like ever since I got seriously into standards back in mid-1996.  I almost can’t believe that there’s a chance I’ll get to find out.

• IE7 Improvements and Bug Tracking was published on Thursday, March 23rd, 2006.
• It was assigned to the Browsers and Standards categories.
• There have been thirty-six replies.

Actually, I shamelessly used that title simply because it’s a little play on words.  By and large, my impressions of Mix 06 and what I’ve seen here are positive.  This isn’t my last word on everything going on here, but I wanted to share.  Enjoy!

• You can drag-rearrange tabs in Firefox just by click-and-dragging the tabs.  Seriously, I had no idea.  Thanks to Dan Short for setting me straight on that score.

• In his keynote, Bill Gates said “we need microformats”, which I didn’t even know was on his radar.  For more about that, head on over to microformats.org.

• Microsoft is coming out with a new Windows-only Web design tool called Expression.  It’s pretty slick, with features like visually illustrating margins and padding in the design view and what seemed like smart management of styles.  Unfortunately, I had a little trouble following what it was doing, mostly because I saw it presented in a talk and didn’t have hands-on time.

  Basically, Expression seems to be FrontPage done right, with a relentless focus on standards-oriented design principles. It has its own rendering engine for the design view, and the whole thing was built from the ground up, which means it isn’t trapped by legacy rendering concerns, but it made several of us wonder why that isn’t what they use in IE7.

  I also had trouble mentally distinguishing it from other visual Web design environments like Dreamweaver, but that’s probably because I don’t use a visual design environment.  BBEdit 4-evah, baby!

  Speaking of which, there are no plans to port Expression to the Mac.  Whether that’s good or bad probably  depends on your worldview.  Look for public betas of Expression somewhere in the June 2006 time frame.

• It was publicly stated that the current build of the IE7 beta available from Microsoft is rendering-behavior complete.  In other words, the only changes to IE7 from now until it goes final will be fixes to security holes, crash bugs, and browser chrome/UI stuff.  Whatever its CSS support does or doesn’t do, that’s how the final version is expected to behave.

  Ladies and gentlemen, start your engines.

I’ll take a few minutes on that last point.  A little while ago, I said that designers should remain calm and not hack their sites to fix them in the IE7 beta because it was a moving target.  That is no longer the case.  It’s now time to start testing sites in the IE7 beta and identifying any layout problems that may occur.  (And there will be problems.  No browser is perfect.)

I’ll be doing this as soon as I can, and I encourage everyone who can to do the same.  Here’s the other key point: IE7 is scheduled to go final in the second half of 2006 (I couldn’t get anything more specific), so we have a calm period of at least three months in which to find out how things stand before IE7 goes final.  This isn’t an accidental circumstance, either.  The IE team has deliberately done this in order to give Web developers time to figure out what’s coming and how to deal with it.

This is entirely in keeping with the new spirit of the IE team, which has impressed me again and again at this conference.  Once upon a time, upgrades to standards support were blocked by the cry “We have customers!”, which was maddening both because it impeded progress and because it was true, as I wrote back in 1998.  The usual counter-argument was that Web designers and developers are customers, too.  We just weren’t (often) treated that way.

Now we are considered customers of the IE team—not the only ones, but important ones.  Not every decision will go our way (even if we had a single “way”, which of course we don’t) but our needs and concerns will be considered.  As further proof besides the “grace period” built into the IE7 timeline, the IE team is creating tools and resources meant to make it easier to update sites for IE7.

I’ll have a good deal more to say about all this in the near future, but those are the big points in my head right now.  I expect to hear Dave‘s, Andy‘s, and Molly‘s takes on all this, and hopefully others will add their thoughts as well.

• Mixed Impressions was published on Tuesday, March 21st, 2006.
• It was assigned to the Browsers, Microformats, and Standards categories.
• There have been fifty-three replies.

I don’t think I can say this without sounding smug, so I’ll just say it: this is what I was talking about.  If you went ahead and tried to hack your site so it worked in the previous beta, I’m sorry, but I tried to warn you.

It’s also why I said CSS hacks weren’t necessarily dead yet, or even likely to cause real problems, because there’s every chance that IE7 will be close to being another Firefox (in the standards-support and layout-behavior senses).  We can’t be sure of that yet, of course, but the results described by Molly are pointing in that direction.

Sure, we’d like to see a hack-free Web, but that point will not come until a few years after IE7 finally ships.  No, that’s wrong: we’ll never have a hack-free Web.  But we might reach a time where cross-browser presentation has become not only commonplace, but subconsciously assumed, like our current expectation that a browser will know how to handle hyperlinks.

• IE7 Revs Up was published on Saturday, March 4th, 2006.
• It was assigned to the Browsers category.
• There have been fifteen replies.

Once was lost, now is found: “Images, Tables, and Mysterious Gaps” has been resurrected from the Great Bit Bucket Beyond and given new life on Mozilla.org.  In fact, it looks like just about all the technical articles written by me and the other members of TEDS are available.  Look through the full list of CSS articles, for example.  You can dig into any number of topic areas from the main page of the Documentation section.  (Scroll down to the “Mozilla Developer Center Contents” headline.)

Some other popular articles from my Netscape days gone by:

• Consistent List Indentation
• Defining Cross-Browser Tooltips
• Issues Arising From Arbitrary-Element Hover
• Understanding Underlines
• Liberty! Equality! Validity!

So far as I’ve been able to determine, some of the less technical pieces, like the interviews with Doug Bowman and Mike Davidson, are not available.  Not now, anyway.  Perhaps one day that too will change.

• DevEdge Content Returns was published on Thursday, March 2nd, 2006.
• It was assigned to the History, Standards, and Writing categories.
• There have been six replies.

It only took most of a year for this to happen, but WP-Gatekeeper 1.5 RC5 is now available.  The only change is that it will now auto-add the challenge to any standard WordPress 1.5 install from the moment you activate the plugin.  Before now, this auto-insertion wasn’t working on any WordPress install that had gzipping turned on, as many do.  A heap of thanks to Jeremy Dunck, who first identified the problem; and Andy Skelton, who showed me how to solve it.

For those who joined the party in the long silence since RC4, Gatekeeper is a WordPress plugin that lets you manage a series of challenge/response pairs.  The default challenge is “What color is an orange?” (correct response: “orange”), though you should definitely disable that one and add your own.  This helps stymie spambots, though of course it is easily defeated by a manual spammer—and they do exist—and it can do nothing to stop trackback spam.  I actually stopped using Gatekeeper on meyerweb when I installed Akismet, which may be good enough for most people.  For those who can’t or won’t run Akismet, though, Gatekeeper is a decent alternative.

Gatekeeper is technically a CAPTCHA, but it is a fully accessible CAPTCHA, as it uses no images.  It’s also highly configurable, allowing you to add as many challenges as you like and then rotating between them randomly.  I know of a few sites that are quite happy with Gatekeeper, and recently caught wind of a Django implementation of the same concept.

So it’s there and ready for use by those who are interested.  If I haven’t heard about any bugs within the next month or so, I’ll strip off the RC designation and go with 1.5 final.  And about time, too.

Note to WordPress 2.0.x users: I have no idea if WP-Gatekeeper 1.5 will work in WP2.  It may.  Then again, it may not.  I’d be interested to know either way.

• Gatekeeper 1.5 rc5 was published on Wednesday, March 1st, 2006.
• It was assigned to the Tools and WordPress categories.
• There have been five replies.

The alpha 2 release of S5 1.2 is now available (177KB ZIP file; also available for previewing in the testbed).  There isn’t any major change here, but I did add some notable enhancements to the notes window.  These are:

• On any slide with incrementals, an indicator of incremental progress will appear in square brackets next to the overall slide show progress on the title line.  It’s a little crude, I admit, but it serves the purpose well enough.
• Clicking on the title of either the Elapsed Time or Remaining Time counters will “minimize” them.  Click a minimized title to maximize the box.  The actual minimum and maximum effects are purely CSS-driven, hooked onto a collapsed class name.  I’m still pondering the best way to handle this feature, so the class name may change, as for that matter may the mechanism by which one can min/max the boxes.  Suggestions are welcome.
• Keypresses and clicks are passed from the note window back to the slide show.  In other words, the slide show fully is fully operable from either the slide show window or the notes window.  The only difference is that the notes window doesn’t have the navigation links and popup navigation menu (said difference to disappear in a future release).

That’s it.  In the process, though, I uncovered a bug that shows up in Safari 1.3.1 and 2.0, where it’s ignoring the show-first feature for incrementals.  I’m going to assume that the problem lies in the getIncrementals() function, though of course I could be wrong.  If anyone can spot the error and provide a fix, I’d be grateful.

Update 2 Mar 06: in addition to the Safari problem, I’ve discovered that IE/Win doesn’t seem to share event information between windows.  Thus, if you try to run the slide show from the notes window, errors get thrown.  I managed to fix this in clicker() by adding a test for notes-window events, but trap() has a very different structure and I’m not sure how to fix it.  Thus the testbed in IE/Win currently lets you advance the slide show from the notes window by clicking the mouse button, but keyboard navigation throws an error.  If anyone can tell me how to get around this, even with a pointer to a good article on passing events from one window to another, I’d be very grateful.

• S5 1.2a2 was published on Monday, February 27th, 2006.
• It was assigned to the S5 and Tools categories.
• There have been fifteen replies.

I’d like to share something that will be old news to readers of CSS: The Definitive Guide and all of my other books, but nonetheless needs to be said out loud, in public, for everyone to hear.

The property line-height can accept unitless number values.  You can also give line-height united values, though generally you shouldn’t.  But unitless numbers are just fine for this property.

So what’s the difference?  When you define a united value, like 1em, you’re setting things up to pass along the computed result to any descendants.  For example, suppose the following CSS is applied to a document containing the following markup fragment:

ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px;}
small {font-size: 80%;}

<ul>
  <li>I'm a list item with <small>small text</small>.</li>
</ul>

The ul element has its line-height computed to be 15px because for line-height, em-based values are calculated using the computed font-size of the element itself.  I declared the font-size directly, so we know its computed size in pixels.

(Yes, yes, I know, pixel-sized text is evil and wrong, but it makes explaining how all this works a lot simpler.)

So that computed value of 15px is what’s passed on to the descendent elements.  The li and small elements will inherit a line-height value of 15px.  End of story.  They don’t change it based on their own font sizes; in fact, they don’t change it at all.  They just take that 15px and use it, exactly the same as if I’d said:

ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px; line-height: 15px;}
small {font-size: 80%; line-height: 15px;}

Okay, now suppose I take the em off that line-height value, so that the styles now read:

ul {font-size: 15px; line-height: 1;}
li {font-size: 10px;}
small {font-size: 80%;}

Now what’s passed on is that raw number, which is used by descendent elements as a scaling factor—a multiplier, if you will–and not the computed result.

Thus every element that inherits that value of 1 will take that value and multiply it with their computed font-sizes.  The list item, with its declared font-size: 10px, will have a computed line-height of 10px.  Then it will pass that 1 on to the small element, which will multiply it with its computed font-size.  That’s 8 pixels; therefore, its line-height will also be 8 pixels.

The end result is exactly the same as if I’d written:

ul {font-size: 15px; line-height: 1;}
li {font-size: 10px; line-height: 10px;}
small {font-size: 80%; line-height: 8px;}

That’s a pretty major difference.  This is why it’s always strongly recommended that you use unitless numbers if you’re going to set a line-height on something like the html or body elements, or indeed on any element that is going to have descendant elements.

The fact that the CSS validator has a bug that causes it to generate parse errors on unitless number values for line-height (see report #2307) rather confuses things; we get an occasional jeering e-mail over at A List Apart as a result, since running CSS validation on the site gets an error due to my use of line-height: 1;.  Jeffrey points the correspondents to that bug report, and usually we never hear anything back.

And if anyone reading this feels motivated to fix the validator, please do.  As it says in the bug report, all they really need is a patch for review.  I might do it myself when I have some free time.  That’ll be in, oh, 2009 or so.

Again: the property line-height can accept unitless number values, and they’re a better choice than united values in 99 out of 100 cases anyway.  Okay?  Thank you.

[Addendum 26 Aug 06: Roger Johansson points out a bug in older Gecko browsers relating to unitless line-heights.]

• Unitless line-heights was published on Wednesday, February 8th, 2006.
• It was assigned to the CSS category.
• There have been one hundred fourteen replies.

Registration for AEA Atlanta has been open a week now and one-fifth of the seats are already claimed, so you might want to step up the pressure on your boss.  The early bird deadline won’t be here for another three and a half weeks, but seat availability may not last that long.  (As I’ve mentioned before, it didn’t in Philadelphia.)

Even better, the value of any one of those seats just went up.  How so?  We’ve just announced that we’ll have two (count ’em!) guest speakers joining us: Jason Santa Maria, who delivered one of the highest rated presentations in Philadelphia; and Atlanta native Todd Dominey of Dominey Design, Turner Entertainment, and What Do I Know.

What will they talk about?  You’ll have to come to Atlanta to find out.  Personally, I can’t wait.

• AEA Atlanta Heats Up was published on Monday, February 6th, 2006.
• It was assigned to the Speaking and Standards categories.
• There have been three replies.