Debugging CSS – The Plan of Attack
Tags: BeginnerThe day and age where we layout site’s in tables are now a thing of the past. As modern web designers, we have all adapted to W3C standards writing proper XHTML, CSS, and tableless layouts. But what we still face everyday are CSS bugs and quirks, and we must avoid falling back on the “easy way out” of using CSS hacks.
Before we get started, let’s make sure you have some essential Firefox & IE add-ons and tools in your arsenal.
- Firebug – Firefox Add-on
- Web Developer – Firefox Add-on
- Html Validator– Firefox Add-on
- DebugBar – IE Add-on
- Web Inspector- Safari Add-on
- Xray
The Plan of Attack
Here are a few different ways I approach narrowing down the culprit when it comes to CSS bugs and cross-browser issues.Add Color
When ever I face a CSS bug whether it’s an alignment problem or something just not looking properly, I start out by adding a colored border or background color to the suspected class or ID property. By adding a colored border, you are able to see a clear outline of how your element is behaving..classname {
float: left;
width: 170px;
clear: both;
margin: 0;
padding: 0;
border: 1px solid red; /*--Add border to see the outline--*/
background: blue; /*--Add background to check how the content is behaving--*/
}Process of Elimination
Another approach I take is commenting out different sections of the HTML to be able to evaluate if another class or ID is affecting the problem element. Sometimes people face CSS issues because of conflicting elements getting in the way. By this process of elimination, you are clearly able to pinpoint which element is the culprit.<body> <div class="container"> <!--<div class="header"></div> <div class="leftnav"></div>--> <div class="content"> <p>Possible Problem?</p> </div> <!--<div class="footer"></div>--> </div> </body>
CSS Specificity
If you are not familiar with what CSS specificity is, check out Smashing Magazine’s Article regarding this topic. They break it down very well.Using Style Sheet
Sometimes all of the classes and ID have the right properties, but there may be a conflict with two or more classes pointing to the same element. To test if this is the case for you, I usually start by making my suspected class or ID more specific.
.classname {
border: 1px solid red;
}
#container .classname /*--This class is being more specific, so it will take precedence--*/ {
border: 1px solid red;
}Inline StylesIf you are having some nasty nested classes, and you feel this may be the cause of your bug, it may be easier to write some inline styles to pinpoint your issue. Of course, when you’re done testing, always take the inline styles out, and add them back to your style sheet.
<div class="classname" style="border: 1px solid red;">Problem might be here. Adding inline styles will reassure you that no other classes will be conflicting with it.</div>
Không có nhận xét nào:
Đăng nhận xét