CSS Diagnosis
Scott Parsons
Introduction
this presentation is not so much about a process as a path of increasing desparation
Introduction
- Structure
- The tools
- Find the rule
- Test & Specificity
- Work the problem
- Write it down
Structure
- The importance of valid HTML and CSS
- Control of included elements
- The flash dilemma
- Typos and selectors
The Tools
Extensions:
- The mozilla firefox browser allows a developer to install many useful extensions
The Tools
Your trusty text editor:
You choose what you want to use from notepad to bbedit to dreamweaver.
- Multiple undos
- Undo after save
- Built in validators (as you go)
- Syntax colouring
The Tools
The importance of css edit:
CSSedit (as available on the web developer toolbar and other places) allows live changes to be made to a style sheet which affect the page AS YOU VIEW IT. This means no saving, switching to the browser and then reloading. While not essential, it saves more time than any other tool I currently use in web development.
Find the rule
First stop the ancestors favelet:
- One view of the document structure
- Compare and contrast (check out class and ID mis-spellings and capitalisation
errors)
- Quickest way to fix typo bugs
Find the rule
Borderise:
- The next view of the document structure
- Various versions of this, some also show IDs or classes
Find the rule
Dom inspector:
Find the rule
Dom inspector:
- The ultimate view of the document structure
- Using this has both a steeper learning curve and is slower (Also only for
Gecko browsers)
- Give unparalleled depth of information
Test & Specificity
Make sure we have the offending rule by
- Test to see if changes occur when the rule is edited
- Try to discover the area affected by the element we are investigating.
- Test the rule by placing it out of context
Test & Specificity
Big 'n' small
Test & Specificity
Big 'n' small
Test & Specificity
Big 'n' small
Test & Specificity
Colour those backgrounds
- Helps show the area covered by the element under investigation (note: minus
margins)
Test & Specificity
Slice and dice
Work the problem
Chunking & deleting
Work the problem
Chunking & deleting
Work the problem
Chunking & deleting
Work the problem
Get it clear
- Place a clearing block level element before and after the problem section
Work the problem
Step up
- If all else fails look at the parent elements of your troubled elements
- Test those parent elements in the same way
Simplify and beyond
If you are here you have gone too far
- The purpose of this path has been to illustrate a fast way of diagnosing most css errors
- Sometimes errors are complex, sometimes they are bugs
- Simplify the code and do step by step
- Keep up with the bug websites ( eg. position
is everything )
- Swear alot
Write it down
Sounds silly but
If the idea of this presentation is to speed up CSS development then what could be better than keeping a log of where you went wrong this time. This way you might avoid the problem next time. Well that is the plan anyway.
Thank you and goodnight
This Presentation was built using Eric Meyers wonderful new standards based presentation system. Although I probably shouldn't have spent so much time playing with it before finishing the presentation.
S5: A Simple Standards-Based Slide Show System
