Liveblogging a session at Iceweb 2006 (Iceweb2006; Iceweb)
Talking about CSS after Eric Meyer is a little bit intimidating, so thanks for that. It’s been an amazing experience so far.
This is stuff that I find valuable in my own work. It’s not necessarily information that everybody is going to take away and use immediately. Like in San Francisco, developers from Sun.com told me, “We have about 37 million pages on our site, and we pretty much disagree with everything you said.”
CSS setup and how you’re going to build your CSS files in a way that makes them easy to manage: Naming, breaking into multiple files, debugging and management.
(Starts with his own site, which he says is easy to get permissions for and rip apart without hurting anybody’s feelings.) Imports two external stylesheets. He put a projection media type in because Opera users complained that, in projection (full-screen) mode, no CSS rendered.
Puts date on his files. Bowman found that browsers cache CSS; if you change the date in the file, the browser looks at it as a new file.
Uses two classes on body, including sidebarplease (implicitly also a nosidebarplease). You can use multiple classes on an element, letting you do modular CSS. Similar to CSS signatures (which he attributes to Eric Meyer, who shook his head over here at the kool kidz’ kouches). Putting a class or id on body lets you style plain elements like h2 differently on different pages.
Has lots of comments. Illustrates when I come into the file later what I was thinking when I wrote it. (And lots of people read his site.) Also uses very condensed whitespace, which has actually turned out to be a problem.
Server-side code: He uses PHP, but his concepts are translatable. Uses include files for nearly all the content on his page. (Mentions a CSS Zen Garden example with a body id="www-csszengarden-com" since you can’t use periods. But actually you can for id. In theory class can use nearly anything.)
Likes to break up CSS by section of the site you’re in: One for homepage, one for Services, one for Contact. If you break them up into different files, you avoid having to wade through hundreds of lines to locate a problem with CSS cascade.
Things that aren’t going to change, like headers and footers, should go in a global CSS file. But moving page layout to separate files makes sense.
Netscape’s Unix hackers could not handle added whitespace in their vi or whatever editors. But the super-condensed method is not as conducive to sharing. So if you’re stuck on one system or another, don’t change anything. But if you need to pick a method for consistency, the lots-of-whitespace method is easier to read.
Don’t use presentational names like red; but what do you call them instead? But I don’t think standardizing on naming works really well. id="secondary-navigation": If you want sidebar styling in another page that doesn’t happen to have navigation in that sidebar, it doesn’t make sense. There will always be exceptions. (Shows slide of John Allsopp’s naming survey.)
Doesn’t think that order of code-writing is too terribly important.
He comments everything. Multiple levels of divs are a problem. Adds a comment before </div> about which one he’s closing.
CSS server-side constants were developed by Shaun Inman.
undoHTML.css takes out all of the default style of a browser and tries to reduce the markup down to a very basic, common, bare-bones set.
Sees three tiers of browsers:
- Firefox
- Opera/Netscape/Safari
- Internet Explorer (including IE7)
Mentions Acid2 test. Safari now passes Acid2; it was the first browser to ship that passes it. Firefox, Opera are working on it, but not IE7.
If you build for the best browser in the market, namely Firefox, then you’re building as close as possible to the spec. Then start testing for the other browsers. Essentially, that means, for now, build in Firefox and then correct for Internet Explorer. If you build first for IE6, then you’re creating dependencies for how it handles bugs, dependencies that don’t exist for other browsers. You’re future-proofing you code; browsers are getting better all the time, not worse.
Position Is Everything is the largest list of IE bugs. A lot of the fixes require CSS hacks, which are a big question mark right now. (“Build for the ideal, correct for the exception.”) After you validate your CSS, then look at browser bugs and hacks.
I don’t get the impression that Internet Explorer 5 is much of a problem in Iceland. Does anybody still support IE5/Win? A couple here and there. I prefer to put hacks in separate files; if the hacks aren’t needed anymore, I just remove the reference to the file.
For IE6, creates ie6win.css, which all browsers will render, but they don’t understand the * html hack it contains – except for IE5 on both platforms, which have to be fixed by putting the IE5 files later in the cascade (lower in the file list) than the IE6 file.
But in IE7, none of those hacks will work anymore. It will simply ignore the IE6 hacks, as other good browsers do.
-
Question from woman: Is there a demo up for IE7? Yes, at Mix06 they released a beta. Just a couple of days ago, IE7 Beta 2 was released. The hope is that nothing is going to change before the final release. You can almost assume at this point that if your site’s broken in IE7, now’s the time to fix it.
-
(Question from man, inaudible.) Why would I use dates instead of a version number? You can do that, too. (Or add a
?and a fake parameter to the URL.) -
Question from man: Pros and cons of
!important? That is another method of parsing CSS for IE7; I would see it as equivalent to the child selector,html>body. Will be fixed in IE7. But use that to correct true browser bugs, as always. -
(Question from man, inaudible.) IE7 final release date? Molly: “Nobody knows. Microsoft itself doesn’t know,” but expected to arrive before Vista. Has anyone come up with a way of running IE6 and IE7 on the same computer? He doesn’t know, but it could be a similar method as with running IE3 and later at once. Microsoft’s suggestion seems to be running multiple instances of VirtualPC, with multiple licensed versions of Windows. Molly: If you use that particular method, you aren’t installing the whole set of operating-system files.
-
Question about which parts of the CSS spec will not be in IE7: CSS tables. Molly: Who knows, but there is supposed to be an Internet Explorer 8 release.