vla22: photo of Atli's throne, Torcello, Venice (Default)
Verity Allan ([personal profile] vla22) wrote2013-11-14 05:00 pm
Entry tags:

Learning to debug CSS

 Wherever my tech skills lie, it's not really with CSS. I understand the basic principles, but I can mostly produce utilitarian things in CSS, rather than beautiful ones. And mostly, I'm not that interested in trying. Nevertheless, I've had to do a fair bit of debugging over the last couple of weeks, and thought I'd share what I've picked up, in case people find it interesting. 

Note that this isn't about creating your Beautiful Style in CSS - it's about discovering that in fact the webpage with CSS carefully crafted by someone else looks great in Chrome but looks like someone has vomited on the page in IE8. Or all the boxes are overlapping, so you can't input anything into any form fields. And you're the only person available to fix it.

This is naturally trivial in Firefox or Chrome (and even reasonably plausible in IE10) - you can use the developer tools to dynamically edit the CSS and see what happens when you move it from pixels into ems,* or increase or decrease the padding.  You can also search for problems with particular elements in particular browsers, and try out the answers. 

In older browsers, you basically have to edit the CSS file and reload and retry. I think the important virtue here was persistence - I kept trying different things, and kept searching for different suggestions about what to fix. Some things responded quickly to this - 10-15 minutes to fix the problem. Others have stretched out over a few days. 

I still don't know how to craft a beautiful CSS thing from scratch, but I'm reasonably confident I can fix some common layout problems. Not necessarily to the standard the designer would like, but so that the web page is at least functional, even if it's not pretty.

*This turns out to be quite a neat trick that will solve a lot of your CSS troubles.

Post a comment in response:

Anonymous( )Anonymous This account has disabled anonymous posting.
OpenID( )OpenID You can comment on this post while signed in with an account from many other sites, once you have confirmed your email address. Sign in using OpenID.
Account name:
If you don't have an account you can create one now.
HTML doesn't work in the subject.


Notice: This account is set to log the IP addresses of everyone who comments.
Links will be displayed as unclickable URLs to help prevent spam.