A better way to build and test my CSS...
Category Software Development
OK... A number of you are going to say "well DUH!" And I deserve it. But keep in mind I'm still rather new to this stuff...
I've rolled out two major web apps in the last couple of weeks at work. And in reality, those are really my *first* two major web apps. Since our internal browser standard is IE6, I was coding my CSS to work with that browser. In both cases, the apps looked pretty good and I had the CSS working the way I wanted.
But when you're new at something, you don't know if it's working by accident or if it's really good code. In my case, there was far more accident than good code.
One of the applications also allows use outside of our corporate network. I fired up the app in Firefox, and it was horrid! Overlaps, bad positioning, text not behaving, the works. When I started working through the issues in my CSS file, I found that most of what worked in IE was in spite of myself. I had block sections that were too small for the content, but that IE sized properly. Firefox didn't allow that. I had a misspelled anchor pseudo-class that was working fine in IE, but it was broke in Firefox. After some time spent tweaking stuff, I got both browser platforms working fine with no browser-specific coding. In all cases, it was misunderstanding as to what was happening in the CSS. Things look fine in Netscape, and there's only one minor nit in Opera.
So now, when I'm building an app with CSS, I'll be using Firefox as my test bed knowing the CSS I create will be more accurate. And I bet in most cases, it will end up running fine in IE as a result...
OK... A number of you are going to say "well DUH!" And I deserve it. But keep in mind I'm still rather new to this stuff...
I've rolled out two major web apps in the last couple of weeks at work. And in reality, those are really my *first* two major web apps. Since our internal browser standard is IE6, I was coding my CSS to work with that browser. In both cases, the apps looked pretty good and I had the CSS working the way I wanted.
But when you're new at something, you don't know if it's working by accident or if it's really good code. In my case, there was far more accident than good code.
One of the applications also allows use outside of our corporate network. I fired up the app in Firefox, and it was horrid! Overlaps, bad positioning, text not behaving, the works. When I started working through the issues in my CSS file, I found that most of what worked in IE was in spite of myself. I had block sections that were too small for the content, but that IE sized properly. Firefox didn't allow that. I had a misspelled anchor pseudo-class that was working fine in IE, but it was broke in Firefox. After some time spent tweaking stuff, I got both browser platforms working fine with no browser-specific coding. In all cases, it was misunderstanding as to what was happening in the CSS. Things look fine in Netscape, and there's only one minor nit in Opera.
So now, when I'm building an app with CSS, I'll be using Firefox as my test bed knowing the CSS I create will be more accurate. And I bet in most cases, it will end up running fine in IE as a result...
| Permalink |
Comments
Posted by Christopher Byrne At 20:03:03 On 01/10/2004 | - Website - |
Keith
Posted by Keith Strickland At 06:19:04 On 05/10/2004 | - Website - |
Posted by Alan Young At 22:40:36 On 04/10/2004 | - Website - |