homepage Welcome to WebmasterWorld Guest from 23.22.173.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

This 39 message thread spans 2 pages: < < 39 ( 1 [2]     
Cross browser support: Which ones do I need to check?
Readie

WebmasterWorld Senior Member



 
Msg#: 4102907 posted 9:49 am on Mar 23, 2010 (gmt 0)

I'm beginning to get into the cross-browser support practice, and until recently I was only checking

  • Firefox 3.6
  • IE 8
  • Chrome 4.1
  • Opera 10.5 (beta)
  • Safari 4

I've now got IE 6 & 7 (happily all of my sites look fine in them :)) but I'm wondering if people could share with me a list of what they feel I should be checking my sites in, because I am fairly certain I'm not checking enough.

 

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4102907 posted 5:23 pm on Mar 26, 2010 (gmt 0)

We also get the client's primary choice browser and develop the application to work on that browser only

That is a mistake. Browser vendors fix bugs and update but standards never change. If you code to a browser, instead of a standard, you'll always be chasing the whims of the vendor. This is why so many people now complain of sites that only work in IE but, as IE loses market share, those sites now need to rewrite their code.

We also believe this model will help us scale to mobile devices (iPhone, WAP, etc) based on the client's choice.

Client choice also changes and if the mobile device changes at the same time there is a lot of running around. It's far easier to code to the standard and add workarounds than it is to recode an entire site or app should the selected browser fall out of favor.

wsmeyer

5+ Year Member



 
Msg#: 4102907 posted 6:22 pm on Mar 26, 2010 (gmt 0)

Anybody else use the "CSS Reset" by Eric Meyers? It hasn't been updated in 2 years but I'm still using it as my starting point, then use various validator plugins for Firefox. My site doesn't look exactly the same in all browsers but certainly usable.

William.

albo

5+ Year Member



 
Msg#: 4102907 posted 7:52 pm on Mar 26, 2010 (gmt 0)

I use his CSS reset,...adding a few resets of my own and some "display block"s for html5 elements.

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4102907 posted 9:19 pm on Mar 26, 2010 (gmt 0)

No. I set almost everything anyway so never use one. It just adds bulk and slows things down somewhat.

JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4102907 posted 10:40 pm on Mar 26, 2010 (gmt 0)

Mobile web is over-hyped...yes some people use it though in a very casual manner. No one in their right mind is going to do more then check their email or Facebook messages on their mobile device that has an unreasonably small resolution for browsing.

Generally anyone who is still surfing at 800x600 is probably not going to be part of the desired target audience. Pages should not be designed with a static width to begin with in the first place though for the sake of maximizing the viewership of my work I generally test at 800x600 and make sure things look respectable at 1024x768. Using Chris Pederick's Web Developer toolbar in Firefox easily lets me resize the browser without having to go through the hassle of manually changing the screen resolution.

Trident / Internet Explorer

IE is the last browser you should test with if you want to be considered professional since obviously you have to make sure your work is standards compliant.

When testing IE you have to setup a virtual copy of XP with 512MB of RAM, disable virtual memory, and set each copy of XP to have it's own copy of IE 6 and 7. If you're stranded on Windows Vista or Windows 7 you'll need another virtual machine for IE8 once IE9 becomes Os-integrated and no longer sits nicely side by side with IE8. Sure you could try things like IE tester however conditional comments work per OS-level copy of IE; if your XP's IE is IE6 and you're running a standalone of IE7 then IE7 will treat conditional comments no different then IE6. However if you really know what you're doing and want to absolutely make sure your target browsers perfectly you'll not detect a browser by the user agent (horribly bad) or IE at least by conditional comments though by various DOM properties, that's a completely different topic however. Loading a second style sheet to fix IE issues should be done by having JavaScript determine the browser via DOM properties (there are plenty of differences between versions and browsers to make this easy) and then having JavaScript createElement to insert a link element via an function called from the onload anonymous function.

I highly recommend VirtualBox for virtualization at this time. I have found VMware to severely impact my machine's ability to boot and connect to network services by allowing it's services to run automatically. Microsoft's VirtualPC hasn't caught up with VirtualBox, at leas the last time I tried a few months ago.

Presto / Opera

Opera is the easiest browser to test. You can install several copies of it and except for older versions they will usually run simultaneously without a hitch. The rendering differences are fairly easy to understand. Here are the ranges where every browser version in the range will render the same...

Opera 8.0+
Opera 8.5+
Opera 9.0~9.2
Opera 9.5~9.6 (Presto 2.1)
Opera 10.0~10.2 (Presto 2.2)
Opera 10.5+ (Presto 2.5)

Gecko / Firefox

In regards to testing various copies of Firefox it's critical to understand how profiles work. Like IE and Opera you can use a single computer to test all these browsers, you just have to know how to actually set it up correctly. With Firefox it's all about profiles.

Gecko 1.7
"C:\MEDIA\INTERNET\Mozilla Firefox 1.0\firefox.exe" -no-remote -ProfileManager


Gecko 1.8
"C:\MEDIA\INTERNET\Mozilla Firefox 1.5\firefox.exe" -no-remote -ProfileManager


Gecko 1.8.1
"C:\MEDIA\INTERNET\Mozilla Firefox 2.0\firefox.exe" -no-remote -p "Mozilla Firefox 2.0"


Gecko 1.9.0
"C:\MEDIA\INTERNET\Mozilla Firefox 3.0\firefox.exe" -no-remote -p "Mozilla Firefox 3.0"


Gecko 1.9.1
"C:\MEDIA\INTERNET\Mozilla Firefox 3.5\firefox.exe" -no-remote -ProfileManager -p "Mozilla Firefox 3.5"


Gecko 1.9.2
"C:\MEDIA\INTERNET\Mozilla Firefox 3.6\firefox.exe" -p "Mozilla Firefox 3.6"


You can manage the profiles via an ini file here...
C:\Documents and Settings\[WINDOWS USER]\Application Data\Mozilla\Firefox\profiles.ini


With Firefox 1.5 (Gecko 1.8) and older you can not open multiple copies of Firefox at the same time. If you wish to test Gecko 1.8 use Firefox 2.0. The only difference in the DOM that I've seen is the addition of the spell-check property. To test older versions of Gecko (not really necessary though for those who are curious) you would want to run copies of Mozilla Suite which each version directly correlates to the Gecko version it uses.

The only cross-OS issue I've really had to deal with 99.9% of the time is having to manage fonts. This is especially true with KHTML / Konqueror though Firefox on Ubuntu can pull some interesting stunts. Again if you're not doing anything fancy (e.g. your webpage does not have text) then you shouldn't worry about this issue if you have a negligible browser share, that of course being subjective to your site's target audience and what that entails.

WebKit

WebKit on Windows is semi-OS rooted. It's simply not designed to run more then one version reliably on a copy of Windows. This limitation is somewhat negated on a Mac but first Windows...

We already have our massive pain: IE. So generally speaking you'll want to correlate WebKit / Safari versions to virtualized XP / IE.

Virtual XP / IE6 / Safari 3.0

Virtual XP / IE7 / Safari 3.1

Virtual XP / IE8 / Safari 4.0

Remember, Safari 3.2 has no rendering difference from 3.1, you can run 3.2 instead of 3.2 if you want, it won't matter really in a test environment.

Chrome does use it's own version of WebKit however since I run Safari and IE as I mentioned above I just keep my copy of Chrome up to date.

Testing older versions of Safari on OS X is easy as cake! Even though the OS X Os-level copy of Safari is weeded in to the OS WebKit itself can be executed in a self-contained fashion and run simultaneously alongside other copies of different versions of WebKit. The secret? OmniWeb! I can't remember the exact versions of OmniWeb offhand that correlate to various versions of Safari from 2.0 and older though I do have a list of WebKit versions and how they correlate to Safari versions for anyone who has to deal with people who refuse to update the a newer version of OS X.

if (wk < 530.9 && wk > 526) {var b='Safari 4'; var r = 'fair';}
else if (wk < 526 && wk > 525.25) {var b='Safari 3.2'; var r = 'fair';}
else if (wk < 525.25 && wk > 524) {var b='Safari 3.1'; var r = 'fair';}
else if (wk < 524 && wk > 520) {var b='Safari 3.0'; var r = 'fair';}
else if (wk < 420 && wk > 411) {var b='Safari 2.0';}
else if (wk < 313 && wk > 311) {var b='Safari 1.3';}
else if (wk < 126 && wk > 124) {var b='Safari 1.2';}
else if (wk < 101 && wk > 99) {var b='Safari 1.1';}
else if (wk < 86 && wk > 84) {var b='Safari 1.0';}
else if (wk < 74 && wk > 72) {var b='Safari 0.9';}
else if (wk < 49 && wk > 47) {var b='Safari 0.8';}


It's JavaScript code from the old method I used to determine the version of Safari. Again I advocate determining the browser version by the DOM only, any other method is not professional.

KHTML / Konqueror

The fate of Konqueror is in limbo from last I heard. Firefox's dominance on Linux has stalled if not ended the development of KHTML. Besides font differences KHTML is generally very capable at least from what I've seen. Working with various versions though would be the most difficult of all the browsers and the fact that it has the least browser share makes testing it excessive for the lack of the better word on the tip of my tongue.

- John

albo

5+ Year Member



 
Msg#: 4102907 posted 11:25 pm on Mar 26, 2010 (gmt 0)

@JAB Creations, based on the experience of two of my clients, I must slightly disagree with you about "Mobile is overhyped"+"not part of desired audience"

I found that by adding a simple CSS section, a la

@media only screen and (max-device-width:480px){...

I could restyle especially navigation, graphics, and fonts to appeal to iPhone/iPod Touch, much to the happiness of two clients. The changes yielded iYahoo/GOOG-for-iPhone type GUI with large bar navigation, saving site visitors much time, and avoiding hefty bandwidth problems. One of the clients is a restauranteur, so, especially important for nearby touristas.

Insofar as "being considered professional", of course, I'm not sure I would be, but I get paid nonetheless.

JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4102907 posted 12:15 am on Mar 27, 2010 (gmt 0)

@albo If you're intentionally targeting mobile web users then obviously that market share would not be over-hyped as far as the market that you're targeting. If you're doing the work you do correctly then you can consider yourself professional, not sure why you felt the need to bring that up however.

- John

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4102907 posted 3:08 am on Mar 27, 2010 (gmt 0)

By professional, I think he means using "good or best practices".

lavazza

5+ Year Member



 
Msg#: 4102907 posted 8:39 pm on Apr 2, 2010 (gmt 0)

=bateman_ap:
IE6 is still used by a decent amount of users, and as long as they make up 10% of my traffic I will make a site they can buy from. If you all want to not support them thats an extra 10% for me!


Likewise, people with disabilities; a significant market described in some detail by the w3c Web Accessibility Initiative [w3.org]

... another vote for 'coding to standards (for all user-agents and media types), not browsers'

This 39 message thread spans 2 pages: < < 39 ( 1 [2]
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved