Christopher Schmitt

Wait I have his book! CSS cookbook

1. Expectations limit design
2. Browsers limit design (each has its own internal stylesheet)

Then a great story about an interview with Apple and a “hard” question. It all boils down to designing the American flag with CSS (which was something he had, by chance, done previously).

Semantic markup

Using appropriate html for appropriate element!

Only 91 elements! (but most people can only remember 40-50 of hand). Some people in the room didn’t even do that well.

Then goes on the show code he used to create the flag – lists all 50 states in ordered list.

Bad (not to do

• <p>&nsbp;</p>
• <p> … <br><br> … <br><br> … <br><br> </p>
• and so on…

Back to flag

Setting up easel

Recommends using css reset.

For Flag he only resents elements that he needs to style. Uses minimal divs.

Clearing out the Content

display:none;

Stripping

• Absolute positioning – allows for position that is ignored by other elements. However, screws up when fonts or other elements are resized.
• Relative positioning – starts at normal position then moved.

He positions 13 colonies (stripes) absolutely inside realativly positioned easel.

Uses attribute selectors to pinpoint each colony, color and position. IE 5and 6 don’t support – will need javascript to mimic (Jquery is recommended).

Pooling the Stars

z-index is like layersin photoshop. Uses z-index to position blue union area above stripes and -9999 hack to move text off screen.

Stars

Block vs inline.

Uses extra <i></i> (bad form, he admits) to work as element to position star image. Should have added extra info such as year <i>1800</i>.

Texture

Alpha transparency PNGs. Hack for older versions of IE.

Overlays each area with fixed alpha overlay. This is rather then overlay entire flag with z-index image. That would block all links. As it stands all stripes and stars are clickable!

Streached

Reason for pixels vs em? easier… but em based layout (divs not just text) would allow it to be stretched. Talks about setting text to 10px for easy em use.

EM is based in typography. Hard to match up for divs. And what about the images used for stars.

Switches stars to text. Finds star in ZapDingbats. Also, uses CSS Generated content. So this is limited use – wont currently work in IE or without font.

PS

He didn’t Take the apple job – moved to be with his (now ex) girlfriend.