Debug / Reboot - Eric Meyer - An Event Apart Boston 2008
- Description: With judicious use of CSS, you can visually call out problems in your markup, as well as wipe out a great deal of browser inconsistency. This exploration of how (and why) will illuminate some of the dustier, darker corners of CSS in the service of gaining a deeper understanding of CSS and browser behavior.by Matt at 6/24/2008 12:23:45 PM
- About Eric Meyer:by Matt at 6/24/2008 12:25:46 PM
- by Matt at 6/24/2008 12:25:48 PM
- Debugging = using CSS in a diagnostic way to find problems in your layout.by Matt at 6/24/2008 12:34:46 PM
- Why use CSS when we have validators?by Matt at 6/24/2008 12:35:02 PM
- Validators are a way to see if you have obvious mistakes. Everyone should use link checkers, make sure your links works.by Matt at 6/24/2008 12:37:02 PM
- You can set up a debug style sheet that will highlight things with problems, links with no href for example.by Matt at 6/24/2008 12:38:02 PM
- Pull up the debug style sheet by adding a user style sheet in your browser.by Matt at 6/24/2008 12:38:35 PM
- Debug style sheet uses new and interesting selectors and obviously won't work in IE6 but you're not developing in IE right?by Matt at 6/24/2008 12:39:46 PM
- The debug style sheet:by Matt at 6/24/2008 12:39:58 PM
- Find things that are empty: div:empty {background: yellow;}by Matt at 6/24/2008 12:40:37 PM
- This can make it very obvious if your CMS is screwing up and spitting out empty elements.by Matt at 6/24/2008 12:43:17 PM
- Find things that aren't supposed to be there: *[style], font, center {outline: 5px solid red;}by Matt at 6/24/2008 12:45:12 PM
- Empty classes and ids: *[class=""], *[id=""] {outline: 5px solid red;}
|by Matt at 6/24/2008 12:46:25 PM - Empty classes and ids: *[class=""], *[id=""] {outline: 5px solid| red;}by Matt at 6/24/2008 12:47:35 PM
- Find empty alt attributes, missing alts, empty title and missing title:
img[alt=""] {border: 3px dotted red;}
img:not([alt]) {border: 5px solid red;}by Matt at 6/24/2008 12:48:47 PM - Outline v. Border: Border affects layout, outline doesn't. Outline goes around the border. Makes it possible to have 2 borders... but not in IE.by Matt at 6/24/2008 12:50:31 PM
- Find tables with no summary or an empty summary.by Matt at 6/24/2008 12:52:25 PM
- You can turn on red borders for everything and then turn it off if it meets criteria so only the ones that don't meet your criteria stand out.by Matt at 6/24/2008 12:53:36 PM
- Look up scope on th tags: Specifies if this cell provides header information for the rest of the row that contains it (row), or for the rest of the column (col), or for the rest of the row group that contains it (rowgroup), or for the rest of the column group that contains itby Matt at 6/24/2008 12:54:53 PM
- Find anchors with no title, empty title, href="#" and empty href.by Matt at 6/24/2008 12:55:45 PM
- What about IE? There's a version that works in IE7 and up.by Matt at 6/24/2008 12:57:30 PM
- Switch outline with borders, outline doesn't work in IE.by Matt at 6/24/2008 12:58:34 PM
- For IE give everything a border and then alter it based on criteria.by Matt at 6/24/2008 12:59:13 PM
- Personal opinion: Don't use IE to develop.by Matt at 6/24/2008 12:59:40 PM
- IE don;t do the "not" selector.by Matt at 6/24/2008 1:00:13 PM
- Another aspect of debugging: Making sure you set a body background colour, finding tables, finding too many levels of divs (div div div div div div div {}), find forms without action or method, finding form elements not properly marked up (form > input {} - use a fieldset in between), blockquotes also need block level elements in them (<blockquote><p>).by Matt at 6/24/2008 1:07:42 PM
- Find the style sheet your browser uses. It's easy on a PC, search html.css.by Matt at 6/24/2008 1:10:26 PM
- Reset style sheets: Can't reset forms because styling forms is all over the place. Unpredictable.by Matt at 6/24/2008 1:12:09 PM
- Reboot: How to develop with a reset style sheet. Things he had to consider when building the reset style sheet.by Matt at 6/24/2008 1:16:40 PM
- Eric's blog post about diagnostic CSS:
by Matt at 6/24/2008 1:17:56 PM - by Matt at 6/24/2008 1:17:57 PM
- Eric's blog post about reset.css:by Matt at 6/24/2008 1:18:25 PM
- by Matt at 6/24/2008 1:18:27 PM
- His reset.css is meant as a starting place. You should alter it for your needs.by Matt at 6/24/2008 1:20:04 PM
- Alter it until it's YOUR reset, YOUR default.by Matt at 6/24/2008 1:20:50 PM
- Question: Can you use regular expressions in your attribute selectors?by Matt at 6/24/2008 1:23:18 PM
- Answer: No. But you can do "starts with" (^=) and "ends with" ($=). Both work in IE7.by Matt at 6/24/2008 1:24:08 PM
- Question: Should you use captions on tables?by Matt at 6/24/2008 1:29:12 PM
- Answer: If it makes sense. Every table should have a summary.by Matt at 6/24/2008 1:29:18 PM
- Endby Matt at 6/24/2008 1:31:39 PM
- Who's Blogging
-
Matt
- Translate
- Options
-
Comments
Turn viewer comments off and on.
Turn comments off
- Share
