hi what browsers should i be testing my css in?
thanks
red
| SitePoint Sponsor |

hi what browsers should i be testing my css in?
thanks
red

I usually test in IE 6, Opera, Firefox and Safari(with help from friends), depending on the site, I might include older versions of IE as well. Though here lately I have not been as concerned with them.


As many as you canhi what browsers should i be testing my css in?
It does depend on your audience but if you don't know your audience then the very least you should test for on the PC is :
IE5.5 ,6,7
Firefox 1.5+
Opera 9
Mozilla 1.6+
Netscape 8+
If you have access to the mac then you should check on safari as well 1.2, 1.3, 2.0. Usually firefox on the mac is similar to the pc and there are very rarely any differences.
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge

thanks loads


Ever hear of the four corners of the earth? Try translating that to the Internet.
In fact, let's give it a catchy name, shall we? How about "The Four Corners of the Web" - if it works for you, it'll work for me.
So, what are the four corners? The four major rendering engines, of course. They are (in no particular order) Trident, Gecko, Presto, and KHTML/WebKit.
Trident is the exclusive domain of Microsoft. So that means you'll be dealing with Internet Explorer (Windows only). Right now, you'll want to test your design in Internet Explorer 5.5, 6 and 7.
Gecko is the brainchild of Netscape. Yet it really hit the mainstream (and is widely associated) with the Mozilla Corporation. There's a LOT of of browsers that use the Gecko rendering engine, but the ones you should concern yourself with are Netscape 7+, FireFox 1.5+, K-Meleon and (if you have access to a Linux box) Galeon. Now, you're probably wondering why I suggested testing in Netscape and K-Meleon, right? Well, Netscape's browser has just enough of IE's "rendering mode" mixed with the browser to be dangerous if you're not careful. As for K-Meleon, I've noticed a few things in that browser concerning the way CSS is rendered. If you're noticing something in FireFox or Netscape, but no other browser, it's usually a good idea to check the design in K-Meleon. If it comes up normal, then it's probably a browser quirk. If K-Meleon throws a fit, then you know you screwed up somewhere and will have to fix the design.
Presto was developed by Opera Software. So naturally, you'll want to test Opera. Opera users are religious about updating their browser, so just grab a copy of the browser from www.opera.com and be done with it.
KHTML/WebKit is the rendering engine that handles the Konqueror KDE "browser" and Apple's Safari. WebKit (Apple Computers' name for the engine) was derived from Konqueror; it should be noted that Konqueror 3 and Safari 2 are roughly compatible, so testing on one should yield identical results on the other. Note that Safari does have a few quirks that we really can't do anything about; most of these deal with how the browser styles form elements (in other words, the browser won't let us do it).
So, what's my ideal testing list?
Internet Explorer 5.5, 6, and 7
Netscape Browser 7 and 8
FireFox 1.5 and 2 (note: I currently have access only to 1.0.3 - I can't get 2.0 to even install on my PC)
Opera 9
Konqueror 3
Safari 2
Keep the following caveat in mind when testing your site design. Never code for a single browser. I don't care if it's IE, FireFox, Opera, Safari or whatever browser your boss tells you to code for. Test in all the major browsers you can at once. You'll usually be able to spot any coding errors early on and will be able to correct them without breaking something else in another browser later on.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns

ok thanks for a great answer - is the best way to download all the browsers or is there any software which will mimic how these sites will look?



The best is to download the browsers.


Download the browsers. It's the only way to be sure.
For browsers you cannot test directly on, go to www.browsershots.org, www.totalvalidator.com/validator/ValidatorForm or (for Mac testing) www.browsercamp.com.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
Why won't FF2 install?


I have (despite properly uninstalling) part of FireFox 0.8 lingering on my hard drive that just won't go away. I even tried re-installing 0.8 to get rid of it, and it just won't go away.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns



Removing the folder and the profile of firefox 0.8 should allow you to fix the problem.


Been there, tried that, didn't work.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
I would also extend Dan's list by suggesting testing both 'Large fonts/120dpi' and 'Small fonts/96 dpi' - or 100dpi/75dpi for X11 -These usually require a reboot or restart of X/windows to 'change' the setting.
Which is where VM's (Virtual Machines) come into play. If you don't know VM's are a means to run other operating systems 'under' your existing one. The difference between a VM and an Emulator is that on a VM, SOME code is allowed to run natively - but certain bits, like video, sound, disk access - are all still emulated (for example your $400 Ge7950 video card under any of these is basically a plain jane SVGA board as far as the the guest OS is concerned). While generally a hair slower than actually running the OS native, and usually not giving you the full 'experience' of your hardware in the emulated OS it does give you a layer of separation for testing things you normally might not risk running (like IE 5.x). Generally they create a file on your host computer that the VM 'pretends' is a hard drive.
The big players in the field are:
VMWare:
http://www.vmware.com
Parallels:
http://www.parallels.com
and M$ Virtual PC
http://www.microsoft.com/windows/vir...loads/sp1.mspx
VMWare 'claims' to be the first though that is contested by the history of Connectix. It tends to be the fastest at running linux (both in and under), people have gotten OSX running inside it on normal PC's, and is available for windows and linux. VMWare 'player' is available for free, but only works with 'precreated' hard disk images. They offer a variety of 'other versions' that run all over the place on prices. Personally I don't like VMWare because it's a bit too 'complex' for it's own good - it damn near hijacks the host OS and chews up resources even when it isn't in use... Still, it's the only VM that runs OSX so there is some appeal.
Parallels Workstation is the 'new kid' - but has caught up to the competition REAL quick. If you are planning on running newer operating systems like XP or Ubuntu, support is bang on - but do not expect things like Sound, Video or disk access to be as 'smooth' in older operating systems like Windows 98. Has one BIG advantage in that it is the only one that works UNDER OSX, meaning you can run Windows XP 'in a window' on your intel Mac. It also has some of the best virtual access to real hardware of any of the VM's - specifically the USB stack. Free trial, $49.99 to own.
Microsoft Virtual PC is the real 'old dog' as it is descended from Connectix Virtual PC - one of the first emulators of a PC for the Mac, and arguably the most successful of them. Great for both retrogaming and testing as it emulates REAL WORLD hardware like S3 Trio64 video and DEC/Intel 21140 networking. Virtual PC for Windows, letting you run windows or linux under windows PREDATES VMWare by a couple YEARS, meaning stability wise it's the best of the lot (especially since it didn't start out life as a M$ product. Microsoft said 'who makes the best' - then bought them.)
Virtual PC 2004 is now FREE, and you can join the 2007 beta for free too, though to be honest 2007 really doesn't bring much 'new' to the table and being a beta has stability issues.
So, why use a VM? Take my current setup.
A64 4000+, 2 gigs RAM, twin 160 gig SATA, 80 gig ATA-133, 19 gig 15K RPM U320 SCSI,
Host OS: Windows XP 'large fonts' - used for testing IE6, IE7, FF 2, Opera 9,
Guests through M$ VPC
Guest OS 1: Windows 98 'small fonts'- used for testing IE 5.0, Netscape 4.x, Opera 8.5
Guest OS 2: Windows 2000 'small fonts' - used for testing IE 5.5, Netscape 8
Guest OS 3: Ubuntu Dapper, used for testing Firefox 1.5, Konqueror and Galeon.
And I have a Dell Dimension 8500 I've got running OSX 'native' setup via a KVM switch.
So when it comes to testing, I'm set for all contingencies... running REAL versions of each IE build, not the 'standalones' which are known to have some rendering quirks all their own.



Did you try the zipped version with a clean profile ?Been there, tried that, didn't work.


With just enough modifications under the hood to make your life miserable. With enough time, hard core CSS coders (like deathshadow, Paul O'B, and myself) will find them (in fact, deathshadow has already found a couple, based on what he told me over IM one day).
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
New versions usually means more changes to the rendering engine - Imagine if overnight a new FF version suddenly passed Acid2... a whole BUNCH of websites 'designed in FF and hacked for others' would suddenly be 'broken'.Originally Posted by Stormrider
It's actually a problem the mozilla developers are facing - if they start finishing off implementing the specification as written, they are going to lose backwards compatability.
As it is, it's quite easy to write a page that works in 1.5 that has layout issues in 1.0.x


Yes, you are right it could be a problem. When they brought out Firefox 1.5 they completely changed how float clearing was handled (in line with the specs) and it broke a lot of sites that worked fine on firefox1.+.Originally Posted by deathshadow
I'm beginning to wonder with these browsers that bring out new versions quite often whether we should only support the 2 latest incarnations. Most users who have migrated to firefox and opera are savvy web users and know that they need to keep up to date.
As Dan said above we often find something different in each version that its becoming hard to keep track.
I know I always say test in as many browsers as you can but I'm beginning to wonder if the effort is really worth it with browsers like firefox and opera being updated regularly.
I'm sure the figures will show in a few months that many have switched to version 2.0. I read that 2 million people downloaded firefox 2.0 in the first 24 hours and only 3 million downloaded ie7 in 4 days! In percentage terms thats quite a big difference.
No conclusions - just thinking out loud really![]()
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Hard to draw conclusions from that - I'm actually surprised the IE7 numbers were as high as they were... Alternative browser users TEND to be a bit more technical saavy and a bit more paranoid about updating their browsers - and lets face facts, if IE6 users were more tech saavy, they wouldn't be USING IE6 in the first place.Originally Posted by Paul O'B
Most of the numbers I've seen has been for the standalone distro - I'd be interested in seeing the numbers now that it's in the automatic updates.


Trueif IE6 users were more tech saavy, they wouldn't be USING IE6 in the first place.![]()
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge



It won't happen.
version 1.5 may be updated.
version 2 will be automatically updated with bug and security fixes once installed (version 2 doesn't support win 98)



<edit>While firefox announced it will stop supporting windows 98, version 2 still does. </edit>
The versions of Firefox 3 released by the Mozilla Project in 2007 "will not support" the Windows 9x/ME family of operating systems.
That's because they're working on a major update of the rendering engine and decided the amount of code needed to support Windows 9x/ME was not justified by the dwindling number of users using older Windows versions.
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
Bookmarks