Google Doctype is an encyclopedia of the open web. The open web is the web built on open standards: HTML, JavaScript, CSS, and more

Overview - Google Doctype - Google Code

The CSS Redundancy Checker

Oh. My. God. This will very quickly become an invaluable tool!

You pass it a single CSS file and either a directory of HTML files or a .txt file listing the URL’s. It then looks at each file in turn and at the end lists all the CSS selectors in your CSS file that aren’t used by any of the HTML files.

It’s not perfect but it’s way better than a messy CSS file!

(thx @dotcode)

During the portion of his talk where he discussed image replacement and its impact on findability, he addressed the white elephant question that has likely occurred to most designers who have used image replacement over the past five years or so: what does Google think of CSS image replacement, anyway? But the part that surprised me is that he actually had an answer: Google’s okay with it, you won’t be penalized for using image replacement properly.

mezzoblue § Image Replacement + Google

A qualified selector can only contain one < . The element immediately to the left of the < is the target of the selector, everything after is the qualifier. In this case, the style would only apply to anchors that contain an image.

Shaun Inman proposes an addition to the CSS spec: CSS Qualified Selectors

This is How You Get sIFR to Work

This is the sort of documentation the sIFR website actually needs. If you want to use sIFR on your next project this is the place to start. Very nice work

960 Grid System

Lots of grid goodies here including photoshop templates, css examples and other random things. All for the wonderful 1024 layout.

CSS Type Set

This is an amazing tool that allows you to get your CSS type setting sorted right there, live on the page.

One box is for the text you want to type set and the next box shows you the rendered CSS. Use the sliders to mess with the basic typographic bits. Very awesome, indeed!

SitePoint CSS Reference

I have used SitePoint a lot over the years. They produce excellent books, and well written articles on all things web. They now have an awesome CSS reference that is neither ugly nor out of date.

The Files

I thought I’d write up a short post outlining the discussion we had at Barcamp regarding building your CSS Framework (or template).

I’ve been using a standard three column template (both css and HTML) for a couple of years now. I wrote a post back in Feb ‘06 outlining my CSS Methodology (named rightly or wrongly…) I’ve refined and tweaked that set of tools a fair bit and have cut it down to only one main CSS file (if you exclude the IE CSS overrides and the print CSS)

What I now have are these two files:

• The base HTML file
• The CSS template/framework/whatever

Linking to those files means that you’re welcome to download and use as you see fit. I have decided to license them under Creative Commons (Attribution-Share Alike 3.0 New Zealand License) so please don’t be a dick - if you use it credit me somewhere (in the comment will be fine) and if you change/alter/make better please be sure to release it back into the wild. These files are what I use and I would love you all to help make them better - remember: this isn’t a competition - this is for the greater good!

The Holy Trinity of IE hacks

Note: these are IE6 hacks

During my talk I mentioned the holy trinity of IE hacks. I need to clarify and correct an error in that statement. I was too pepped up on coffee and didn’t list them correctly. So here is what I call the holy trinity of IE hacks:

• display: inline; this removes the 10px margin issue that floated elements tend to have
• position: relative; this fixes random issues (too many to name)
• height: 1%; this also fixes random issues (too many to name)

And as an added bonus here’s another one (which I listed at Barcamp instead of the above height:1%; one)

• overflow:hidden this forces IE to respect block level widths and/or heights set to an element. If this is omited the layout it likely to ‘blow-out’ if the content of the block-level element is too wide/tall

Please use the comments section below to ask any questions or pass on any other advice/tips/etc you may have.