Page is a not externally linkable
- Code, Content, and Presentation
---- Designing layouts
swa66 - 9:47 am on Sep 28, 2008 (gmt 0)Future proof in regard to browser support. This is extremely important as there is simply no way we can test all current, let alone future browsers. So we need to stick to established standards such as CSS2.1 . Validation is one of the steps we need to achieve here.
I think any way that leads to a good result is good.
Still that leaves us with wanting to know what a good result is, and the easiest path to get there.
A good result in my book has to allow
Easy to maintain in the long term. To me this means html that is independent of the layout, and where the html allows to switch the css to allow for an entirely new layout without changign anything in the html.
Easy to understand might be part of easy to maintain, but I separated it out as many of us (myself included) "sin" in this regard. Superfluous markup, hacks, lack of comments, ..,
Now current browsers in use out there include IE6 and IE7. Both are potential horrors and they can't be ignored due to their market share. Conditional comments to make them work are your best possible option. Make sure not to apply the conditional comments on IE8. Microsoft promised it would be standards compliant, we'll need to continue to twist their hand into giving us what they promised, and not let them have any excuse that the "stuff out there" won;t work unless they keep their errors of the past.
So that leaves how to get there the easiest.
The path I use currently is:
Make the html as easy as possible, keep a very few concessions for now like a wrapper div (cause the body isn't usable in IE for a lot of things)
Make sure to use html that makes sense without CSS at all. This is how the visually impaired might perceive your page, this is how a search engine will see it, ...
Develop the CSS in Firefox (that way I can use plugins like firebug and the webmaster toolbar). This is important as it allows often a better understanding of what my CSS is tellign the browser to do.
Do the CSS step by step, take out anything you added that didn't have an effect you sought.
At major landmarks in the design, test my CSS against a validator, against some of the other standards compliant browsers (opera, safari, ...). just to confirm I'm not using a bug or feature only found in Firefox. I'd use any other of the standa compliant browsers if they had the same add-ons.
When I've done this, I consider my CSS "done". Review it, make sure you have comments in it for the future etc.
Start a virtual machine with IE7 (I use a mac, so I've got no native IE - IE for mac is dead and buried). Use conditional coments to add a CSS file that adds the CSS IE7 needs to make it render properly. Resist the temptation to add the CSS in the main file, as it'll create superfluous CSS and might give this stuff to IE8, needlessly prolonging our pain as well as potentially creatign trouble in browsers we can't easily test (you got all game consoles, all mobile devices, all fridges and washing machines of the future that will have a browser? I for sure don't).
Start a virtual machine with IE6 (assuming most of you upgraded to IE7 long ago, virtual PC for windows is free, and Microsoft also allows you to download an image with EI6 in it). It'll be in general more messy than IE6 was, so be prepared to add stuff like IE7.js to the conditional comment (although it's not without trouble of its own). Still add everything to it's conditional comments only.
Consider to jsut fix the display. It's pretty hard to find logic in the bugs. I just work around the display problem,a dn once it's ok, I'll forget it.
Since the IE6 and IE7 workarounds don't affect the other browsers, it's now ready.
Where to learn: The cleanest source is w3.org . But they tend to focus on the standards, even for things where no browser bothered to provide the support for it. It's still the best reference to know what a given CSS statement is supposed to do.
w3schools is a source that's very useful if you're beginning with things.
The library out here has some really nice things in it, but some are old. That being old results often in techniques such as hacks being promoted, such as ignoring newer versions of IE, ... take care to walk away with the desired parts only.
There are a number of ready-made thing like complex menu etc out there that you're allowed to reuse. Take great care with this as in al likelyhood, it'll mean you won't fully understand how it works. How will you fix it should it break in IE8 when it's released ?
I know of no books that are current, but then I'm not seeking them out either.
Thread source:: http://www.webmasterworld.com/css/3753665.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com