HTML and CSS Reference
In-Depth Information
Chapter
6
Debugging Your CSS
The RecipeFinder project is complete and you now have a good, rounded understanding of
what CSS is capable of, but there are some areas we haven't yet covered that are well worth
exploring.
In comparison to other programming languages, CSS is fairly simple, but it's not without its
quirks and inconsistencies. Firstly, as we've already touched on, not all CSS features are sup-
ported in all browsers. Also, even where CSS code
is
supported by all browsers, it's often im-
plemented differently in one or several of them. This is especially true when dealing with dif-
ferences between older versions of Internet Explorer and the other browsers (Chrome, Firefox,
Safari, and Opera), or when using very new CSS properties.
This chapter is not going to cover the specific browser compatibility problems that are bound
to arise at one time or another. Instead, we're going to look at how to avoid and debug virtually
all CSS problems, regardless of whether they are browser issues, coding errors, or something
else. These methods are universal, and should help with many of the puzzling situations that
you'll come across while writing CSS.
Understand How CSS “Errors” Work
Write code that isn't valid, in many programming languages, and the result will be a syntax er-
ror warning, plus the program running the code will stumble at the error and won't run beyond
that point. And so, until the error in the code is corrected, the program is effectively ruined.
CSS is different. For example, if we were to go to the top of the RecipeFinder stylesheet and
add a bunch of random characters, then refresh the page in the browser, we'd notice only one
change on the page: The
box-sizing
property that we added to the top of our stylesheet
would no longer have any effect, causing, among other things, the sidebar to drop out of place.
