Neatly Sliced

An Event Apart Day 1, 9:45-10:45 am:

Read the previous talk in the series, Understanding Web Design by Jeffrey Zeldman, or skip to the note’s talk Table of Contents

• CSS for accessibility checking
• You can set up safari to use a debug stylesheet
• Example of his personal debug.css
• Hilight the things that you do NOT want, that are not supposed to exist:
• Empty checking
• div:empty, span:empty, td:empty, etc.
• Note, these things are not supported by IE, but who cares because this is a development purposed stylesheet
• Really nice if the CMS isn’t pouring stuff into the HTML like it is supposed to.
• May be generating LIs that are completely empty – never notice them if hiding bullets, but there you go.
• A CMS with a “rich text editor” – see what this evilness has pushed in. Those love to generate empty Ps.
• Markup that shouldn’t be there
• *[style], font, center{ outline:red 5px solid;} – these are invalid/not good practices. Point them out and then manually address them.
• Also *[class=""], *[id=""]. Want to be able to catch these.
• Important to keep your code clean. Take pride in your work, just like in HVAC you want to keep it pretty even though it’s behind a wall, the same here. No one will see it, but have pride.
• Image cleanup
• img[alt=""] – blank attr
• img:not([alt]) – look for absense of alt
• outline – does not affect layout of the page. Not counted in width/height. It is drawn outside the border. Outlines are perfect for diagnostics, for hover in Ajax effects, etc. (Don’t want your layout going like crazy on hover because you’ve added a border to hilight Ajax action)
• Table cleanup
• Your THs should have scopes:
• th[scope="col"], th[scope="row"]
• Links
• a[href]:not([title]) – check for title attribute existence.
• a[href="#"] – “when a href = octathorp(e)… yeah that’s what I said. Because that’s how I roll.”
• Evidence that you’ve been naughty and not cleaned up your JavaScript. You want to have a fallback for your links.
• a[href=""] – CMS or you have forgotten to fill it in.
• What if you can’t develop in Firefox? What if you have to develop in IE7?
• Well fortunately, IE7 does support attribute selectors. But not not()… so you have to simulate.
• IE7 does not support the outline style.
• Give everything a border, and then as things are good, take them away.
• a[href]{border:5px solid red;}, and then a[title]{border: 0}, a[href="#"]{background:lime}, etc.
• Next section, checking for cleanness of code.
• div div div div div blah blah{outline}, because nesting too much can be just as bad as tables. Fix things, and for each subsequent section he increases the intensity of the color outline.
• form:not([action]) – there needs to be a real life action so that if no JS, they can still do something.
• *new thing* inputs cannot be direct children of the form element – it has to be wrapped by a block level element, like (or, specifically) a fieldset.
• Recap of his reset.css
• He admonishes us to personalize the reset.css.
• Make it less a reset.css as a reboot.css. Do the change once, in this document, than resetting and THEN rebooting
• Don’t count on CSS for content generation-
• Don’t use it for quottation marks – go ahead and turn the auto-insert off, but probably shouldn’t use it.
• Don’t use it for legislature and legal code and whatnot – could lead to lawsuits later. Point 1.2.5 will always be that, don’t use CSS because that can easily change, and it won’t appear in CSS disabled devices.
• NEVER turn off :focus, because you’ve made it insanely impossible for people who navigate by keyboard.
• Why the huge group selector rather than a *?
• Different browsers allow for styling for form elements, others don’t. They often ignore stuff. Browsers very inconsistent in styling form elements. Soooo just ignore.
• It’d be nice to say *[not(form,input,textarea....)].. but not() can only have one element, not a group selector.
• Learned a few things / issues:
• font-size, font-weight, font-style, etc. for fonts: inherit is not supported by IE for windows.
• Plus, issues are caused of inheritance – everything is reset. so you reset the li, but the p, strong, span inside are set to that initial reset to line-height 1. Inheritance has been broken.
• background: transparent also causing issues with td in IE.
• IE will not apply the TR background to its children – it will just apply the reset background:transparent. Silliness. You’ll have to say td, th background specific. This explains why the issues with background table colors in IE. Set the TD.
• If you use a CSS framework, it should be one that you built.

Read the next talk in the series: Storytelling by Design by Jason Santa Maria, or skip to the note’s talk Table of Contents