Loose notes from SXSW 2007 panel session: Unleashing CSS: How I Learned to Stop Worrying and Love Internet Explorer 7, with Christopher Schmitt Lead Ninja, Heatvision.com Inc
Fast-paced session by a single presenter on new CSS capabilities in IE7; the pain it’s taken leading up to this point, how to sort out your IE hacks into separate files for better degradation, etc.
Technorati Tags: sxsw2007
Rules for developers:
#1) Ignore the betas (of all browser releases) – the first versions tell you nothing and you tie yourself up in knots wondering why feature X isn’t there.
#2) Know your adoption rate – how much should you care? At under 10% marketshare, “It would be nice.” At over 10%, “You have to deal with it.” IE7 adoption has gone from 0% – 30% between Oct. 06 and March ’07. Which is really nice for developers. Part of this is due to forced upgrades via Windows Update. IE6 took a year to lead. IE7 will take about 6 months to lead.
#3) Take inventory. Look at the “back of the milk carton” to see what’s missing. CSS3 still in draft (though Safari and Firefox already implement partially). Text shadow, multiple mbackgrounds on one element, auto-generated content (not sure what this means). Shows looonnng list of squished IE6 bugs – life is better. 41 big IE7 bugs outstanding.
#4) Keep ’em separated (referring to IE6-specific CSS hacks). Old IE6 hacks are now ignored (underscore hack, star hack, child selector hack, all ignored by IE7. Use conditional comments.
#5) Kick Ass.
New Features:
In IE7: :hover on block level elements, alpha transparency via PNGs, attribute selectors, fixed background postiioning, more up -t-date CSS2 support (IE7 is the browser MS should have had five years ago).
Alpha PNG support: Simple method for IE6 compatibility.
O’Reilly’s CSS Cookbook site – example of alpha PNGs in menu gradients (see how gradient covers the whole button set as a group). Create color shade with opacity to ~10% and save as PNG. So there’s just one alpha png, applied for each button with a different level of opacity. You can use this same technique to handle the rollover colors.
Dave Shea’s Site: – Uses alpha transparency to have site logo change color various pages of the site – pick up a color from feature image and drop its value into the CSS for the alpha PNG, so the background color shows through.
Styling forms: New ways to style forms (via attribute selectors), e.g.:
input[type=submit] {
foo
}
input[name=q]{
bar
}
Fixed Backgrounds – Use for navigation headers.