We used to blog more before twitter came along.
Yahoo UI CSS
In response to my post from yesterday whining about IE. I feel it's my duty to follow up with some links to tools that help mitigate a good bit of that frustration.
Yahoo has been very aggressive about releasing and updating a number of UI components. These components assist you with drag and drop. auto complete. tablular data and a rich text editor (among many others). Their javascript libraries implement cross-browser support for a bunch of useful functions including ajax-type activities.
But the ones I am finding to be most useful are the CSS YUI tools. CSS is a major pain in the rear no matter what browser you're trying to work with. Peter Bell asked the question this morning whether it was even worth the pain of tweaking and refining a CSS-based layout.
A number of commenters fired back some great points regarding SEO and accessibility. I never really bought in to the whole "change one file and your entire site looks different" argument - whenever we do a layout revamp. we create an entirely new stylesheet AND base markup.
Curiously missing. though. was any mention of the fantastic running start that the Yahoo CSS Reset. Base. Fonts and Grids stylesheets will give you!
Ever since I discovered the Reset stylesheet. life with CSS has been much. much easier. By cleaning up the layout differences between the major browsers for me. the time spent making things work in different browsers is effectively zeroed out as well. The Base stylesheet adds a baseline style to all typical HTML elements - consistent styles that make it far easier to add color and set a decent layout.
"Fonts" assists with making the text consistent. a constant source of irritation for me. I don't like the idea of using a pixel-based font size (and it's not considered a best practice anyway). so using the "Fonts" stylesheet makes the percentage-based text sizes work the way they are supposed to. If you happened to see our site last weekend in IE. you would have found the text to be about 3px before the fix was applied.
The final stylesheet I have not yet used. but it would immediately address Peter's layout problems. "Grids" allows you to literally throw together a decent grid-based layout in just a few moments. Fluid and fixed-width layouts are supported in any configuration you can dream up. I almost trashed our layout to restart with YUI Grids. Probably will next time.
Best idea yet: a cheat sheet for these four stylesheets. Very convenient and currently hanging next to my desk.
Yahoo allows you to serve up these files from their servers. taking advantage of their (likely) faster servers and the performance boost that results from the files likely already being in your browser cache. The CSS is available in three forms too - compressed (crazy small). normal (readable) and debug (well commented and an education unto itself). Read a debug version of any of these files and you'll be amazed at the kind of effort Yahoo put in to these resources.
So if you couldn't tell. I'm a big fan of the YUI tools. Try them out - I bet it'll make your life easier too!
If you were at all curious. the Reset. Base and Fonts stylesheets are currently applied to our site. Yahoo
About the blog
Steve Rittler is the President of CounterMarch Systems and former manager of both the Philadelphia ColdFusion User Group and the Philadelphia Developer Network.
You can connect with me on Twitter and LinkedIn.
Thanks for the YUI links - I really need to revisit that again.
For the record. I'm sold on CSS (although I had hoped not to have to touch the front end at all. that just wasn't working out). it was more a matter of coming up with a convincing proposition for end clients so they could understand the benefits.
I've also got to say that on the whole. even without YUI I really don't find too many problems with layouts - the biggest problem was outsourcing the development to people who really didn't seem to "get" how to style a site using maintainable code. Unfortunately it is the same as any other type of programming - the developers who aren't great usually do more harm (with bad naming. inappropriate use of class vs. ID and other unintelligent choices) than good.
Most graphic designers don't have the ability to translate their Photoshop work to a non-table based layout. And even those table-based layouts are usually hideously coded (or more likely generated)!
Takes a programmer to do a programmer's job. an artist to do an artist's job...but some freakish hybrid to do CSS which falls uncomfortably in the middle!