Javascript performance tips from the IE7 folks

The IE7 team has announced “great fixes to our (JavaScript) engine to improve the garbage collection routine and to reduce unbounded memory growth.” They have also found many sites using less than optimal scripting patterns and have some great advice on fine-tuning your JavaScript. The following tips could increase your site download speeds from 4-10 times.

  • Evaluating Local Variables
  • Cache Variables Whenever Possible
  • Cache Function Pointers at all costs
  • Avoid Using the ‘with’ Keyword

Internet Explorer 7 For more information on these tips, visit the IEBlog’s post: IE + JavaScript Performance Recommendations – Part 1. Don’t forget to download and TEST your sites with the Internet Explorer 7 Release Candidate. The light at the end of the tunnel is getting brighter!

The big list of fixed stuff in IE7

The IE7 blog has a new post of items that have been fixed in the upcoming release of IE7. While not on the list, the problem I found with alpha transparent png sprites has been fixed for the final release.

Take a look at the list and think of it as new tools to use.

Bugs we fixed

All bugs on positioniseverything.net except the “escaping floats” bug (which is planned for the future)

  • Peekaboo Bug
  • Internet Explorer and Expanding Box Problem
  • Quirky Percentages
  • Line-height bug
  • Border Chaos
  • Disappearing List-Background bug
  • Guillotine Bug
  • Unscrollable Content bug
  • Duplicate Characters Bug
  • IE and Italics
  • Doubled Float-Margin bug
  • Duplicate Indent bug
  • Three pixel text jog
  • Creeping Text bug
  • Missing First letter bug
  • Phantom box bug

Details on some of the other bugs (from sources other than the positioniseverything.net list) that we fixed:

  • Overflow now works correctly! (That means boxes do not automatically grow any more.)
  • Parser bugs: * html, _property and /**/ comment bug
  • Select control: CSS style-able and not always on top
  • Auto-sizing of absolute positioned element with width:auto and right & left (great for 3 column layouts)
  • Addressed many relative positioning issues
  • Addressed many absolute positioned issues
  • % calculations for height/width for abs positioned elements http://channel9.msdn.com/ShowPost.aspx?PostID=191182
  • <?xml> prolog no longer causes quirks mode
  • HTML element truly independent of the Body (now gets its own width, height etc.)
  • 1 px dotted borders no longer render as dashed
  • Bottom margin bug on hover does not collapse margins
  • Several negative margin issues fixed
  • Recalc issues including relative positioning and/or negative margins are fixed now
  • CLSID attribute of <object> tag no longer limited to 128 characters
  • :first-letter whitespace bug described in http://blogs.msdn.com/ie/archive/2005/09/02/460115.aspx fixed
  • Descendant selector now works properly for grand children when combined with other selectors
  • First-line and first-letter now applies when there is no space between word :first-line and opening brace {
  • Pseudo-classes now are working as expected if selector is excluded
  • The :link selector works now for anchor tag with href set to bookmark
  • Addressed !important issues
  • PositionIsEverything piefecta-rigid.htm now works
  • List-item whitespace bug fixed
  • Fixed Absolutely Buggy II
  • Absolute positioned elements now use always correct containing block for positioning and size information
  • Nested block elements now respect all overflow declarations (hidden, scroll, etc)
  • Fixed the opposing offset problem (absolute positioned element whit all four top, bottom left and right are present)
  • <a> tags nested within LI elements will no longer add extra bottom margin when hover occurs
  • We no longer lose the image aspect ratio on refresh
  • Cleaned up our ident parsing according to CSS2.1 rules
  • Fixed parsing bugs for multi- class selectors and class selectors that are combined with id selectors
  • And many more

We also extended our existing implementations to comply with W3C specifications:

  • Enable :hover on all elements not just on <a>
  • Background-attachment: fixed works on all elements – so Eric Meyer’s complexspiral demo works
  • Improved <object> fallback

Finally, we added new features from CSS2.1:

  • Min/max width/height support (also for images, which did not work in IE7b2)
  • Transparent borders
  • Fixed positioning support
  • Selectors: first-child, adjacent, attribute, child
    • A couple of CSS 3 attribute selectors: prefix, suffix and substring since we were working already in the code base (also the general sibling selector)
  • Alpha channel PNG support (Not a CSS feature but too important for designers to not call it out J)

IE Blog

IE7 is still not as good as Firefox, Opera, or Safari. However, Microsoft is planning an aggressive updating campaign and hopefully it won’t be long before we can count on our average user’s browser supporting advanced CSS styles. It’s time to stop complaining about IE6 and begin planning how you will use these new tools.

Word wrapping for Internet Explorer

One of the @media seminars this year prompted me to ask a question to the Europeans about forcing text-wrapping on really long words. We’ve been having a problem on Yahoo! Tech with people pasting urls into their comments, questions, and reviews. These long urls want to extend past the containers and we have had to set a width to the container and overflow:hidden to hide what is too long. How, I asked, do they handle translations with really long words?

Krzysztof Szafranek caught up with me later and told me about the IE-only CSS rules that allow this. I had a bug come up on one of our pages in IE and so I got in touch with him recently for that bit of advice again. It’s pretty simple, you can define in your IE6.css file to either wrap these words or truncate and add an ellipses. These are proprietary, so they won’t work in other browsers and may cause validation errors. But that’s what your ie6.css and ie7.css style sheets are for anyways, right?

Wordwrap


div.IEwrap {
border: 1px solid red;
margin: 10px;
width: 50px;
overflow: hidden;
}
#break {
word-break: break-all;
}

Truncate the word

div.IEwrap {
border: 1px solid red;
margin: 10px;
width: 50px;
overflow: hidden;
}
#ellipsis {
text-overflow: ellipsis;
}

Big thanks to Krzysztof Szafranek for pointing this out and sending me the sample code.

IE7 Beta 3 is available

If you are testing IE7 Beta 2, it’s time to download the latest version from Microsoft, IE7 Beta 3. This will be their last beta release before the release candidate and final public release.

They’ve also published an article on how to install/uninstall the betas without a problem. I’ve had some issues with this myself. Hopefully IE7 Beta 3 will be a cleaner install/uninstall.

@media 2006 first impressions

@media and the WCAG2

I was waiting for the WCAG2 smack down at this week’s @media conference in London. The stage was set for some serious smack talk and WWF style-insults. Heck, Joe Clark was even mentioned at least a half dozen times.

But a surprising thing happened on stage. The presenters, Gez Lemon, Patrick Lauke, Andy Clarke, and Ian Lloyd didn’t explode in indignation. Rather, it was the opposite. The panel pulled out their hoses and began putting out the WCAG2 fires.  The new guidelines are not perfect and nobody was close to agreeing to them. They are overly complicated and confusing. This was agreed upon.

However, they also seemed to agree that the guidelines were not going to bring the four horsemen of the apocalypse to the web developing community either. The guidelines are deliberately vague and technology-agnostic to allow for future growth.  Gez Lemon pointed out a new part of the WCAG web site that allows you to print a condensed set of guidelines for your specific technology, i.e. XHTML, SMIL, CSS, etc.

On the other hand, the number of people in the room that had actually read the guidelines could be counted on two hands. Further, the number of people that had read not only the guidelines, but also the supporting documents could be counted on one hand doing a variety of gestures.

@Media and the state of web design

It was a bit of a surprise to see the less discussion web design  at this year’s conference. The panels also discussed accessibility, web 2.0,  microformats, DOM scripting, hand-held devices, CSS history, and internationalization. Dan Cederholm discussed his bulletproof web designs, Nate Koechly discussed contrasting design considerations for two Yahoo sites, and Andy Clarke discussed alternate inspirations for web design. There was also a great panel with Veerle Pieters, John Hicks, and Cameron Moll about good vs. great design.

getting ready for Andy Clarke presentation

At last year’s event, Joe Clark creating some buzz and inspiration with his impassioned plea for single-column zoom layouts. You could feel the energy as people began mentally designing their zoom layouts.

This year Clarke, as in Andy Clarke, set the stage for a renaissance in design.  Why concentrate on grids when the result is the same old layout with a bit more perfection? Instead, he suggested we take that grid and start playing hops scotch with it. Make a practice grid and begin placing different shaped boxes until something comes together that is exciting and new.

He further showed how you could get layout inspiration from newspapers, photographs, and fliers. A Japanese newspaper’s layout looked the most foreign to my eyes, as well as many others. Vertical and horizontal sections seemed scattered around the page. Clarke super-imposed the grid onto the page and introduced us to a new method of laying out a page.

Chinese newspaper
Header, left column, right column, footer… yawn.  It’s easy, comfortable, and static. Clarke suggests breaking free of these standards and moving your content around the grid. Leave some open spage, add vertical bars and maybe even a framing device.

He further challenged us to abandon the concept of graceful degredation and move on to transcendental CSS design.  Echoing the points of Nate Koechly’s essay on Yahoo’s Graded Browser Support Grid, Clarke suggested we begin coding for the best browsers. We need to use CSS2 and possibly CSS3 elements. IE5 may not look as good as Safari, but his gloss-black pinto with wrong-way flames isn’t going to impress the ladies as much as his Audi S4 convertible either. Do we continue to downgrade the experience for everyone?  Or do we begin looking forward and push past today’s limits?  The introduction of IE7 this year will hopefully solve much of the existing troubles and allow us to make this move guilt-free.

@media and Internet Explorer

Eric Meyer began the conference with a keynote about the history of CSS, HTML, web design, and browsers. He set the stage for Internet Explorer discussions that would span several presentations. Further, he placed faces to the browsers, introducing many people to Tantek Çelik who has been credited with the IE5 Mac goodness and Chris Wilson, who has been credited with the IE Windows goodness and badness.

It’s easy to look at the problems we have with IE6, an outdated browser, and accuse the Internet Explorer team of being a bunch of hacks who couldn’t code their way out of a garbage sack.  Meyer reminded the older developers and taught the newer developers the history of the browser wars and how technically advanced IE6 was for its time.  In its day, it was a great platform for accessibility and contemporary table-based web design.

Fortunately, we have moved beyond the table-based days and other browsers have replaced Internet Explorer as the technology leader.  Microsoft is playing catch up and Chris Wilson came forward to pimp IE7. I also think many of the developers in the room will have a harder time kvetching about IE6, the broken browser from the behemoth beast of Redmond, after seeing an actual person on stage saying how proud he was to have worked on it. This geeky looking guy with a history of bad haircuts was also upset about the deadtime between IE6 and IE7 and promised to do his best to continue building better Internet Explorers in the future.

Wilson covered some of the required marketing points that most developers didn’t really care about. Security, blah, parental controls, blah, new controls, blah… better RSS support, blah…  I actually think IE7 does a great job with RSS, but Wilson didn’t discuss this very much.

He did grab our attention with a new feature, OpenSearch.  Developers can add a small metatag in the document head that will allow the user to add their site to the browser’s built in search bar. You can allow the user to search your site from a consistent location within the browser.  I couldn’t tell if your site remained in the list of sites to search from permanently or only while it was being viewed.  I’m going to look into the specs and try this as soon as possible.

Wilson also went over the list of bugs that have been fixed and took questions from people about future plans, backwards compatibility, and more.  He didn’t come across as the super-friendly, super-smart, super-man like Tantek, the ex-Internet Explorer leader. But he did put a human face to what many people considered their enemy and this is a good thing for the future of web design.