Posts in the Browsers Category

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.

So IE7 beta 2 is out.  As you might expect in a beta, it has some things that don’t work as one might hope, whether due to long-standing behaviors or brand new bugs.

I’ve said it before, and I’ll say it again: don’t panic.  Trying to fix a site that’s “broken” in IE7b2 is kind of like deciding to raze your profitable gas station just because you heard car companies are experimenting with hydrogen fuel cells.  When the final version of IE7 comes out, then you can worry about what to do.  Maybe your site won’t be “broken” any more, and you won’t have to do anything.

In the meantime, what you should do is figure out what’s causing the problem you’re seeing in b2, create a very minimal test case that causes the problem, and submit that to Microsoft.  By doing that, you give them a chance to identify the problem and fix it before IE7 goes final… at which time, you won’t have to do anything about your site, because it won’t be broken.

That’s if they fix the bug in question.  They might not; they don’t have infinite time and energy.  But I can absolutely guarantee that they’ll never get around to fixing a bug nobody told them about.

In the CSS world, there are some points of concern, including bugs that are new to IE7b2.  The css-discuss community has started collecting information over on the wiki, and if you have test cases that demonstrate CSS bugs in IE7, you should feel free to add information and links to that page.

Before you do, though, make sure to observe the following (adapted from my post to css-discuss):

1. Make absolutely certain you’re testing IE7 beta 2.  IE7b1, which is available for download on various sites, had no known CSS enhancements.  It did not support CSS2.1 selectors, or fix any bugs on which CSS hacks depend, or just about anything else.  If you test with IE7b1, you’re wasting your time.  Again, be SURE you’re testing with IE7b2.

2. If you’re testing property, value, or behavioral support in IE7, make absolutely certain that your test case uses no hacks, filters, conditional comments, or other measures.  If you’re testing float margin-doubling, for example, but you still have in a CSS hack targeted at IE6, you might get completely spurious results. Make your tests as simple as humanly possible while still showing the problem.

3. If you’re testing support for hacks, filters, or conditional comments in IE7, try to make sure you’re testing using simple effects. For example, here’s how I’d test for IE7 support of a child combinator:

      p {color: red; font-style: italic; font-weight: normal;
         text-transform: none;}
      div>p {color: green;}
      div > p {font-style: normal;}
      #test>p {font-weight: bold;}
      #test > p {text-transform: uppercase;}
   
      <div id="test"><p>Bold uppercase green</p></div>
      <p>Italic normal case red</p>
   

   This approach uses property/value combinations that we all know IE/Win has supported for a long, long time.  If I tried to test with widths and margins and padding, I’d be concerned that a box model bug was sneaking in and making me think there was a selection bug.  With the color-font-text approach, this is far less likely.  (Not non-zero, but close.)

   Similarly, to test arbitrary-element hover, I’d do nothing more exciting than:

       p:hover {color: green; background: cyan;}
   

4. If you find a new bug, as Al Sparber has with the a:hover/@import problem, absolutely document it with a basic test case (as Al did) and feel free to ask others for confirmation.  But remember the previous points when you construct your test case.

The goal of all this isn’t just to make sure Microsoft knows about every CSS bug under the sun, though that certainly wouldn’t hurt.  What I also hope to see happen is that we get an idea of what’s new, what’s broken, and what absolutely must be fixed.  To pick a hypothetical example, suppose it was discovered that in fixing float margin-doubling, IE7 broke clearing behavior.  That would absolutely have to get fixed before IE7 final.  Doing so would be far more critical than, say, adding support for generated content, or even fixed positioning.

Again, don’t panic, but please do help find any bugs or other problems in IE7b2, so that we have a chance of seeing the problems corrected.

Addenda: so just after I posted this, I found out about the IEblog post What’s New for CSS in Beta 2 Preview? and the in-progress MSDN technical note Cascading Style Sheet Compatibility in Internet Explorer 7.  Those might come in handy as a baseline of “here’s what I should see” while you work to find out what you actually see.

• Charting IE7b2 was published on Friday, February 3rd, 2006.
• It was assigned to the Browsers, CSS, and Standards categories.
• There have been thirty-one replies.

Just as a quick update, I’ve done some testing of S5 1.2a1 in the latest version of Opera I have available (which, under OS X, is version 8.51).  I’m happy to report that this copy of Opera has all of the S5 features supported in other browsers.  Incremental display, font scaling, keyboard navigation, and even the notes window are all present and account for.

To use the notes feature, here’s what I do.  Upon loading the base slideshow into Opera, I position the window on my secondary monitor, which is here taking the role of an LCD projector.  Then I hit “n”, causing the notes window to appear on my laptop’s monitor (in the role of the presenter’s machine).  After bringing the slide show window back to the fore, I select “Full Screen” in the “View” menu, and the presentation maximizes itself to the secondary monitor.  As I navigate through the slide show, the notes window stays perfectly synched with the presentation.

There may be better ways to get the notes window on the primary monitor and the presentation on the secondary monitor, but that one worked for me.

I did notice some odd bugs here and there in Opera 8.02, a copy of which I also have hanging around, but nothing that was a show-stopper.  The one that sticks out in my mind was that multi-slide jumping wasn’t cleared out after the jump.  For example, from the first slide I’d type “3 (right arrow)” to skip to slide four.  Hitting the right arrow again jumped me to slide 7, which is wrong.  Opera 8.5 acted as intended, so I’m going to assume that it has something to do with how the JavaScript is written.

If there are problems in Opera 8.5 or Opera 9 that my testing didn’t uncover, let me know.  I’ll fix anything I can—and if there’s anything I can’t, I’ll turn it over to the Opera community to figure out.  Members of that community have already been invaluable in figuring out how to work around bugs in Opera’s CSS handling in order to make the controls available, so I’m confident they’ll be able to handle anything I can’t figure  out.

• Opera and S5 1.2a1 was published on Thursday, January 12th, 2006.
• It was assigned to the Browsers, S5, and Tools categories.
• There have been three replies.

To follow up on what I said recently, there’s another major reason to remain un-stressed about the impending release of IE7 and the use of CSS hacks.  If you read over the list of things that have been fixed, they read like a who’s who of CSS hacks—and a who’s who of the reasons we use most CSS hacks in the first place.

How is that the ticket to a stress-free existence?  I’ll give you an example.  One IE bug I deal with a lot is the doubled-margin float bug.  So I’ll write something like this:

#main {float: left; width: 30em; margin-left: 150px;}
* html #main {margin-left: 75px;}

I’ve halved the margin value in the “IE/Win only” line, which is the second one; that’s the CSS hack part of the duo.  By taking this approach, the layout is consistent between IE/Win and every other modern browser out there.

Okay, so here comes IE7, which the team says has a fixed CSS parser so the Tan hack (which is what I used) isn’t recognized.  That means IE7 completely skips the second line, the one with the hack.  But IE7 has also fixed the double-margin bug on floats.  So the hack rule is completely ignored by IE7, and it acts like other browsers when reading the first.  It’s like it was Firefox or something.  Meanwhile, any IE6 users out there get a consistent experience thanks to the Tan hack line, which it still recognizes.

So why aren’t I proclaiming that there’s absolutely nothing to worry about, as opposed to declaring my intent to stand pat?  Because the promised fixes are just that: promises.  I have no doubt as to the IE team’s deep desire to get these fixes shipped.  They may, however, find themselves overruled by other factors on one or more fixes.  Perhaps a given fix breaks the layout of eBay, or interacts badly with a particular version of Windows.  Simply put, forces beyond their control might lead to a shipping browser that doesn’t fix everything they want to fix.

That’s a big part of why I said I wasn’t going to make any moves until we have a working release in hand.  There’s absolutely no sense in rewriting all our style sheets to remove hacks—at least, there’s no sense right now.  We’d be trying to author against a moving, distant, and phantom target.  That’s a recipe for frustration.

In general, if the planned fixes do come through, then as far as site breakage, the advent of IE7 will be practically a non-event in the standards-oriented design community.  Assuming those  fixes are released, we’ll honestly have next to nothing to do.  Yes, there will be examples here and there of sites doing funky stuff and experiencing problems, as with Slashdot.  Those problem sites will be identified and fixed one way or another—maybe new hacks, maybe conditional comments, maybe reformulations of markup and CSS.  The same basic thing happened when IE6 came out, and I suspect we’ll have less upheaval with IE7 than with IE6—and IE6 was pretty small stuff, site-breakage-wise.

Note that I suspect.  I don’t know.  Nobody can know until the IE team releases a version with the fixes included.  When that happens, then we’ll start figuring out which way to jump.  Or I will, at any rate.  If anyone out there wants to do a little pointless panicking ahead of time, well, be my guest.

• To Hack With It was published on Tuesday, October 18th, 2005.
• It was assigned to the Browsers and CSS categories.
• There have been twenty-four replies.

As noted on the WaSP site, the IE team is asking developers to clean up their CSS hacks because they’re causing sites to break in IE7 builds.

I have to admit that this call elicited an arid little chuckle from me, because it’s a case of chickens coming home to more than one roost.  There’s the fact that bugs in older versions of IE led us to use hacks, and so they’re making life harder for the IE team.  And then there’s the fact that the use of hacks is an inherently risky and fragile process, so the release of IE7 will make life harder for those who used them.  No smug self-superiority should be read into that second point, by the way: I quite firmly include myself in that crowd.

So—now what?  Personally, I’m not going to make a move until an IE7 beta with new CSS behavior is released.  Why change hacks just to have to hack more?  Put another way, if the ground is going to start shifting, there isn’t much sense in trying to guess how.  Wait until it does, and then adjust your footing.

Still, it might pay to consider ways to cope once the ground shifts.  This leads to something I’ve been pondering for a bit, and now’s a good time to bring it up.  When IE7 (the browser) comes out, it will make IE7 (the script) even more useful than it is now.

Here’s why: all the stuff that IE7 (the script) does, IE7 (the browser) is supposed to do as well.  That is to say, the script can bring IE6 up to par with IE7 the day IE7 is released.  See where I’m headed with this?  Instead of being chained to the fat tail of IE6 installs while being unable to use parser hacks in IE7, we can clear away the hacks and have IE6 and IE7 act basically the same.

They will of course not act exactly the same, and yes, there are drawbacks.  IE6 users will have to download the extra script, and those with JavaScript disabled will have problems.  Not every site will be able to accept those costs—but I’d wager the vast majority will.

In the main, it will be a lot less painful to clear out the hacks with IE7 (the script) available than without it.  A lot.

Oh, and before people start exhorting the use of conditional comments instead, it’s still too soon to know how good an idea that might be.  Doubtless they’ll come into play, but exactly how is completely unpredictable until we know what IE7 actually does.  Perhaps we’ll start using conditionals around the call to IE7 (the script).  Perhaps not.  Time will tell.

As I said before, it’s too soon to know which hacks to clear away or how to rework our code, but thanks to Dean Edwards’ efforts, I’m feeling a distinct lack of stress over the impending shifts.

• IE7 and IE7 was published on Monday, October 17th, 2005.
• It was assigned to the Browsers and CSS categories.
• There have been thirty-six replies.

Okay, ALA fans, we’ve deployed a print style sheet on the articles.  I don’t know if I could call it done, but it’s a big step.  Why wasn’t it online sooner?  Say it with me: “browser bugs”.  Just when the convergence of screen CSS handling had me feeling good, I had to go and mess with print styling.  Good feeling’s gone.

At the moment, the print styles seem to work quite well in modern browsers except for Firefox 1.0.6 (which is what I have in OS X).  There, when I call up a print preview, any article is fine until page 4.  Then things go off the rails in short order.  Content disappears, margins go wild, all kinds of fun stuff.  Here, try previewing or printing Nick Usborne’s “Helping Your Visitors: a State of Mind.  Now try it with J. David Eisenberg’s “Validating a Custom DTD” or (somewhat ironically) Ross Howard’s “High-Resolution Image Printing“.  Pages 1-3 are fine for me, but after that, no good.  When you get a nice long article like Joe Clark’s “Facts and Opinion About PDF Accessibility” or (completely ironically) my own “Going To Print“, you’re just asking for trouble.

I tried searching Bugzilla for some report, but my skills over there are not what once they were.  So while I got a bunch of results, I don’t know if any of them described this problem.  Could some kind soul let me know if there is a report on this sort of thing already?  If not, I can submit the report.  I just don’t want to add yet another DUPLICATE to the database.

And hey, if you can work out a solution to the problem, I have a factory-fresh ALA T-shirt all ready to send out—you even get to choose which one you want.  Let me know.

Update: Dan Wilkinson is our winnah!

• When Printing Maims was published on Wednesday, September 14th, 2005.
• It was assigned to the Browsers and CSS categories.
• There have been seventeen replies.

As a followup to my entry about id="tags" causing problems in IE/Win, here are four five test pages for IE/Win:

• IE Keyword Testing (length)
• IE Keyword Testing (item)
• IE Keyword Testing (namedItem)
• IE Keyword Testing (tags)
• IE Keyword Testing (urns)

These are based on Kevin Hamilton’s observation that it’s highly likely the problems are caused by the tags method in IE/Win’s document.all DOM interface.  As he says:

[I]f you have an element with an id=”tags”, then document.all.tags is now a reference to that element, and no longer a method of the document.all object.

Such states would completely shatter any IE DOM scripting that relied on the document.all methods, and at least in the case of tags causes problems like crashing on print (probably because of the aforementioned conflict between the ID value and the DOM method).  The other keywords of concern are chronicled in the test pages listed above.  I’d test IE/Win myself, except I don’t have a printer handy for IE/Win to use, and besides, bug-hunting is best conducted in large groups.

Basically, load up each test page in IE/Win and do anything you can think to do.  Try to print, view source, save a local copy, et cetera, et cetera—the more obscure and offbeat, the better.  Let us know via the comments any problems you run into with said pages (trying to print them is a good first step, since that’s what messed up on tags) and I’ll add notes to each page based on what’s found.

In the meantime, I’m personally going to avoid using any of those words as ID values, and heartily recommend the same to you.

Update: I’ve added a test (for length) to the above list, and have another that’s not on the list due to its unfinished nature.  It’s a test of id="all"; the problem is, I don’t really know how to test it, or if it’s likely to be a problem at all.  Suggestions are welcomed in the comments.  I added some JavaScript links to some of the test pages as a secondary test, but I’m not sure how much good they do, to be honest.  As with suggestions, your feedback is welcome.

For those in search of more background, or trying to find new ways to test possible conflicts, or whatever, feel free to look over Microsoft’s documentation of the “all Collection”.

• Reserved ID Values? was published on Monday, August 29th, 2005.
• It was assigned to the (X)HTML, Browsers, CSS, and DOM categories.
• There have been forty replies.