![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
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.
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.