AEAChicago2007 – “The State of CSS in an IE7 World” by Eric Meyer

Back to main AEAChicago2007 post

the 800 pound gorilla is awake again! (King Kong pic)
IE was dead, rolled into the operating system, but now it's back
"if it steps on me, I'm going to be a small raspberry stain."
tower biplanes played, in this case, by Firefox and Safari and so on
IE's group program manager announced 100 million installations
	after a couple months
at first there was a question about whether people would install it at all
making IE upgrade part of a Windows update was one of the best things
	Microsoft had done in years
WebSideStory reported 25% of people using IE7, but their statistics
	aren't really great
really you care about the browsers visiting *your* sites
was in charge of Netscape DevEdge editorial (and some development)
	for two years
initially assumed could design for Firefox and Gecko
but IE accounted for 60% of their traffic
IE7 advances in CSS
	fixed positioning
		things static with respect to the viewport (browser window)
		i.e. fixed footers at the bottom
		legal teams will probably want to make copyright visible all the time
		but you can also use for navigation elements, etc.
		make sure to put padding on the bottom of the body so it doesn't
			get hidden behind
		another good use was a blog's comment form fixed in the sidebar
			(since redesigned)
		idea: JavaScript so you could click a paragraph and have it quoted
			into comment
	min-width, max-width, min-height, max-height
	attribute selectors
		div[class] is any div that has any class
		div[class~="val"] is any div with a class attribute containing val,
			like div.val
		div[class|="val"] is any div with a class attribute starting with val
		img[alt|="figure"] would be all images with alt tag figureX
		CSS3 has more: [attr*="val"] will find anywhere in string, like
			[href*=".org"]
		though that will also catch www.organic.com
		also selectors for begins with and ends with
		input[type="text"]  finally, instead of making radio buttons
			hundreds of px wide
		input[value="required"] so input with "required" inside is red/bold
		then when JavaScript blanks text, when user types it's not red/bold
		can visually type PDF links, with href ends in .pdf or title has (PDF
		then add background, padding, etc to display PDF icon
		that's an example of progressive enhancement
		but is it an enhancement or does it break things for your users?
		doesn't work for IE6, so if vital the icons appear, can't do it
			this way
		but then it's probably better to make it an img tag anyway
		might not be an accessibility problem if screenreader reads URL
			of links, or might be
		similar idea for a[href^="https"] with a lock icon
		might be bad on normal sites but great on a banking site, for instance
		would be great for associations with member-only areas
		th[scope="col"] border-bottom, but th[scope="row"] border-right
		or th[scope="row"] + td (td next sibling after th for row) gets
			left padding
		could put different borders on gifs and jpgs to check that are
			using correct format
		believes values are case-sensitive
	child selector >
		can use to mark top-level so can explore:
			body>div {border: 1px solid red}
		ul.interesting>li won't get nested links
		technically a combinator, but we refer to it as the child selector
	adjacent sibling selector
	:first-child
		pseudo-class, like :hover
		body:first-child isn't right, want body > *:first-child
		body:first-child is everything below a first-child body
		since body is generally not the first child of html, that's nothing
		td:first-child will get you tds that are the first element in their row
	chained classes and pseudo-classes
	arbitrary-element :hover
	full background-attachment: fixed
	alpha channel in PNG images
	abbr tag
how they determined what to add was driven by looking at the
	design community
they tried to fix things that people had been complaining about
	for five years
positioniseverything.net
they asked the community. can't do all of CSS2, so what's most urgent?
diagnostic styles
	selecting images by types
	any div with an id, put a border on it: div[id] {border: 1px dotted red;}
	images missing alt attributes img {border: whatever}
		img[alt] {border: none !important;}
	can create diagnostic stylesheet, similar idea to a reset stylesheet
	could help with accessibility testing on a shoestring
	was hoping to publish one here, but it's not quite done
	[here it is]
Dean Edwards' IE7 script is a library to make lots of things work in
	IE5 and IE6
	used to be IE proprietary behaviors, then rewritten in JavaScript
	the IE7 team looked at it to help decide what to fix
	it's been 0.9 (alpha) since he finished it four years ago
	con: extra stuff to download
many dead bugs, dead parsing bugs
	mostly the dead bugs make it good that the parsing bugs are dead
	a fix for IE6 isn't needed by IE7, and IE7 doesn't read the parsing
		bug hack
new parsing bugs!
	*+html
	* + html
	html*
	p/**/#example
	@import url() media;
or can use conditional comments
his clients have chosen CSS hacks over conditional comments
theoretically you can use the not pseudo-class to select, say, elements
	without class foo
but it's CSS3 and no one supports it
	"and its syntax makes my eyes bleed."