HTML and CSS Reference
In-Depth Information
Use Online Coding Tools
We've already talked about debugging problems by systematically reducing the issue to a
bare minimum of code. In order to create real, live, editable, reduced test cases, there are a
number of online tools well worth taking advantage of. A few of the most useful are
JS Bin,
All of these sites make it possible to write code in one panel and view the result in another, on
the same screen. This is great for creating reduced test cases, and then messing around with
the code until the solution reveals itself. Conveniently, most of these tools update the code
automatically as you type, too, so there's no need to keep hitting “refresh.”
Ideal for experimenting with new or unfamiliar coding features, these tools are invaluable.
Test Your Layout Early in Multiple Browsers
Most developers do almost all their coding on a single project in one browser. Many choose
Firefox or Chrome, both of which are good choices because of the extra tools they offer for
development (see
the next section
)
. Be sure to check your layout in multiple browsers, soon
after the basic framework is in place, and prior to adding lots of extra shadows, gradients,
backgrounds, and so forth. It's much easier to fix problems early on, when you haven't yet
committed to a lot of code. It might even be worth checking your CSS in multiple browsers at
regular intervals. For example, check after finishing the header, then check again after com-
pleting one column in the main content area, and again after the next column, and so on.
If you know that many of your website visitors will be viewing the site in a particularly old
browser (like Internet Explorer 7 or 8, or Firefox 3.5), then it's even more vital to check for
layoutdifferencesearly.Layoutproblemsaremuchmoredifficulttocorrectinolderbrowsers
after having committed to a lot of HTML and CSS, so checking the results in those browsers
very early in development, and often thereafter, will ensure you minimize problems.
Fortunately, layout issues are not as much of a problem with newer browsers like IE9 and
IE10, and later versions of Firefox, Chrome, Safari, and Opera. But do check early to reduce
the risk of having to rewrite a lot of CSS in later stages. Or, worse yet, having to rely on
browser hacks to get the results you want.
For more info on principles and work flow that can help your CSS be as bug-free as possible,
see the following two articles:
