Liveblogging AEASF: Debug/Reboot – Eric Meyer

Debugging/Rebooting
Meyer

Debugging markup using css

Why would you debug in the first place? Because the markup shown is useless, but valid. Good for finding things that are awry, but not necissary wrong.

Accessability checkers at best offer suggestions. Can’t distinguis between cases where you need alt text and where you need a blank alt.

Using a user stylesheet, you can do this locally.

empty pseudoclass finds empty elements that should have content. Nice to have things like this visually hilighted. This will not do img:empty and hilight unloaded images. It only tests for the presence of child nodes.

BRAT stylesheet: depricated tags and attributes. Shouldn’t be style attribs in your markup. class and id should have content or be omitted.

Using the :not selector to hilite alt and title issues
Same kind of thing with tables and links.
Subtle difference between outlines and borders. Outlines are outside the border and do not have layout effects

Set background color for html cyan so if you forgot the background on the body.
You can also set html and body to have different background images for parallax.

The point of the reset is to set make the browser differences the same.
Margins on h3’s, divs, p, etc.

Legislation markup, would supress the auto numbers on ol, and hard code them since they are important as content.

background:transparent exposed a bug in ie6: ie6 doesn’t do backgrounds on trs, it copies the colors down to the tds. so the tr background gets lost since tds have a background of transparent.

Questions:

Fixed width: Is there a good way to add up all hte widths to make sure your math checks out? Firebug. If you have a bunch of elements and you want
Seems like somebody would write some javascript about it. That’s tough.

Progressive Disclosure, any javascript tricks to show hidden stuff?
The question is how is it being hidden, then undo that, like display:block !important, or left:0 !important, or coment out the bits that hide it in the first place. I never have things that I hide and expose, but if I did I would shift it all away with css and bring it back with css, only because I am not good at creating stuff with the dom. If someone has a slow computer, they could get stuck with half a structure, but that’s just a git feeling.

testing platform to test?
The most interesting would be a wiki where people can edit the test page collaboratively, until you get to edit/revision wars. I had to build that form example for the screenshot. By no means is it a comprehensive test suite, it was for the screenshot.

workaround for ie not supporting class chaining?
Use dean edwards ie7 script. It makes that sort of thing happen and it seems to work. Yay.

Insigt into css reset for tags for definition lists?
That would be somethign I would build on top of a default reset. Many remember articles of dl;s using margins or padding so they are included int hte giant initial list of margin:0 padding:0 at the top. It really depends on how you want the background to behave. Customizing the reset allows you to build these things up.

2 ways to set sup and sub? Use vertical-align, or position:relative; then use font-size: 75% or whatever. Something you can add on top of that is to set the line-height to 1px so only the vertically-centered pixel is used to calculatethe line-height which means you are less likely to have sup/subs push lines apart.