Does Firefox and Safari behave similarly regardless of OS? - css

By that I mean if Firefox renders exactly in the same way on win/mac/linux and Safari on...
If not, what have you experienced?

There are differences - a really obvious one is the usage of native controls by default. There can be size and sometimes layout differences between the Windows/Mac controls (i.e. Mac OS file upload looks very different from Windows).
The usage of native control and font rendering mechanisms is where you'll see the most differences in FireFox.
In Safari, while not officially acknowledged, there does seem to be some deliberate changes in the port. One was exposed a while back in a vulnerability report - Safari could be commanded to silently download files (including exes) to the users default download folder (the desktop in the Windows version) on both Mac and Windows Safari. However the vulnerability was much worse on Windows because when Apple ported Safari to Windows, the code that set the untrusted file security attribute was removed or disabled, resulting in no warning when you double clicked that "My Computer(.exe)" or "Apple Safari(.exe)" icon.

Other than different font smoothing methods between OSes which makes the text look a bit different and different font availability (not all *nix platforms have Verdana), they should behave the same.
Under Safari-Win, you can enable Mac-style font smoothing.
There are some differences, but those are attributed to bugs and are being fixed.

They have been known to not render perfectly the same with specific versions, but they were bugs in the rendering engines. They should mostly be rather similar across OS, this also goes with chrome (linux version is in testing) and konqueror (there is a windows version) and any other cross platform browsers.

If you have the suspect, that there is a specific rendering difference between platforms (e.g., because a customer insists on experiencing some), I'd recommend Browsershots to clear the situation.
However, this is nothing for testing and debugging while developing. So I'm also curious to read the answers.
Cheers,

Fonts look a little different, because of different font metrics, font availability, and rendering algorithms. Obviously missing fonts have a major impact.
I've had bugs with differences in Flash on the platforms, which is not the browser, but relevant to the question. Linux has a z-index problem with flash movies.
Never seen a JS difference between the same versions of both platforms

Related

Compatibility Modes for IE11 EMI and Comp

In VERY laymans terms - three questions if I can:
First, my understanding was that Comp Mode provided some rendering assistance (IE9?)- and that EMI provided the rendering further back (IE8) (along with some of the Speed enhancements) - Is this correct?
Second, it has been suggested to me that the natural progression to test compatibility would be:
Native
EMI
COMP
EMI and Comp
I would have thought (based on my understanding) that it would be:
* Native
* Comp Mode
* EMI
Finally, is it feasible and what is the benefit to put the website into EMI AND Comp Mode?
For some users, features like enterprise IE (EMIE), compatibility view, and the other document modes are useful because they make recent versions of IE11 behave like older versions of the browser. For example, EMIE makes IE11 behave like IE8.
Why would you want this? After all IE11 supports many more standards that IE8 did. IE11 is more consistent with other browsers than IE8 was. These make it easier to create public websites that behave consistently when used by other browsers or devices.
The compatibility features, however, are meant to help those trying to maintain older applications, applications that depend on feature that IE11 no longer supports for whatever reason.
I think what you call comp mode is what MS calls compatibility view, which puts recent versions of IE into a mode similar to IE7. There are other modes available, called document modes, that put IE into modes designed to emulate earlier versions of the browser. There's a mode for each version from IE7 to IE10 as well as a mode similar to IE5 and earlier. The IE7 document mode is essentially the same as compatibility view.
The problem is that the document modes (and compatibility view) are all approximations of earlier versions. They're not perfect emulations. In many cases, they're enough to help an application work.
EMIE is a specialized mode designed to better emulate the behavior of IE8. For some companies, EMIE helps an older application run even when it doesn't run in IE8 document mode. Why? Because those apps were written based on the features and behavior supported by that version of the browser.
If you're testing applications, I would say the best approach is to run the app in whatever mode is default with the new version of IE. Use the developer tools (or even the scanner on modern.ie) to help identify problems and then update the app to work accordingly. This requires an investment of time, energy, and money that some are unwilling to make. (I would argue that this is short-sighted in the long run, but the mileage of others may vary.)
Barring that, I would use the developer tools to switch to different document modes to see if the application can be made to run until such time it can be updated. If you find a document mode that works, then you use the appropriate 'x-ua-compatible' header to enable that document mode.
If there isn't an appropriate document mode and the app worked fine in IE8, then EMIE might be a useful too. You enable that using group policies or registry keys.
There is a lot of information available to help fill in the gaps of this explanation. Here are a few to get you started:
Defining document compatibility
Specifying legacy compatibility modes
The IE Compatibility Cookbook
What is Enterprise mode?
Chris Jackson's AppCompat Guy blog.
In the end, you'll need to investigate the apps that are causing problems and determine an appropriate course of action based on the resources and priorities of your organization.
Hope this helps...
-- Lance

Need info regarding Web UI testing tool

i have developed my website in VS2010. is there any tool freely available which can help me to test my website with different version of different browser. i saw some time my site UI display ok in my browser but when it run in other machine with big screen then UI getting distorted. so i need some tool which show me how UI look with different screen size and resolution with different browser with different version all in one......please help me with info. thanks
Selenium provides a bunch of DLLs that you can use to write your own automated tests against several browsers (IE, Firefox, Chrome, etc). This, however, is not a complete solution since there are limitations as to the kinds of things that you can do - some browsers have better support than others.
You'd need to install all the different browsers that you want to test on the same machine where you are running your tests.
If you're developing web sites professionally I'd suggest getting a nice large screen (they're cheap nowadays) and installing all of the major web browsers (IE, FireFox, Chrome, Safari, etc.). Then, in each browser go to their extensions/plugin and look for a resize extension. This will provide you with a drop down menu to easily resize the browser to standard screen sizes or any other size you like.
I typically choose a "master" browser and do my work in that. Then, after I've completed a section/page/area I check it in the other browsers to confirm it works.
Avoiding CSS padding combined with width/height can help as some older browsers use a different box model. Margin can be safer but you should read up on box models if you're doing any CSS development.

Is #Page { size:landscape} obsolete?

The CSS rule
#page {size: landscape;}
is supposed to force browsers to print pages in landscape mode. This rule is mentioned in many questions on stackoverflow, on many other programming sites, and in reference works such as O'Reilly's HTML/XTHML The Definitive Guide, Fifth Edition.
I've tried to using this CSS rule with many different format tweaks with both inline styles and linked style sheets, specifying media and not specifying media, with IE8, Chrome 7.0, and Firefox 3.6. I've tried printing to a Xerox Phaser 8560 and to the Adobe PDF print driver. All of my testing has been done on Windows Vista Ultimate 64 bit.
I have never see this CSS rule actually work, i.e. I've never seen a page print landscape on any attempt. Admittedly I haven't done really thorough QA on this, since I've only tried 2 printer drivers and one OS.
Have you actually seen this rule work for a browser, OS, and printer configuration? There is some mention in other questions on this topic that the rule is not broadly supported. Since I can't get it to work on my development machine at all I am wondering when, if ever, does it work? It would help to get specifics on browser, OS, and printer combinations that are known to work, or to confirm that this is a waste of time.
CSS 2.1 no longer specifies the size attribute. The current working draft for CSS3 Paged Media module does specify it (but this is not standard or accepted). I have not been able to find a report of specific browser/version support, but I get the sense that it is poorly supported (perhaps only by Opera?).

Useful program to render CSS in different browsers instead of installing each one separately?

In order to test CSS in different browsers, do I have to result to installing each browser on my development system? Isn't there a useful program where you can just load an html+css file and view how it's rendered in different modern browsers?
If you're after a professional solution, take a look at Litmus.
Nope, you have to have those browsers installed in some form, although there is software such as IE Tester which will allow you to open tabs as IE5.0 - IE8. There are also online services such as:
https://browserlab.adobe.com/index.htm
Free Service
Limited # of browsers Available
http://crossbrowsertesting.com
Paid Service
http://browsershots.org/
Free Service
Supports INSANE # of browsers
It can take a long time - I've had it take an hour to return screen shots during peak usage. Can be as fast as 2 minutes for a dozen browsers.
Which will let you view your site in multiple browsers.
If you want 3 engines in one browser check Lunascape.
Additionally for all Internet Explorer versions you have IEtester.

upgrading ASP.NET website for IE8/Firefox

I need to upgrade a ASP.NET website for IE8. it works fine in IE6, but not in IE8. I don't want to run it in any backward compatibility mode. I would like to make any code changes that are required to make it fully compliant with IE8/Firefox. what is the best and/or easiest way to do that? is it just a case of going through each of the things that are broken and fixing them one by one or is there a more efficient way to fix these issues (some kind of utility??). thanks in advance.
Well there is no tool or utility to fix cross browser compatibility issues. You can make use of firebug(firefox) and IE developer toolbar to identify the points where the website is breaking.
But the good part is that you are upgrading from IE6. I dont think there will be major hiccups or problems making the website compatible with IE8 since its much better in rendering HTML as compared to IE6.
If you have expression web, you could use SuperPreview: http://expression.microsoft.com/en-us/dd565874.aspx
THis is a great tool that allows you to compare you site in different browsers.
Yes, you do have to go through each browser incompatibility bug and fix it for that browser. A bug can be fixed in 3 ways (listed in my order of preference):
Start with a very compliant browser, then look at the page in other browsers (I focus on Chrome/Safari/Firefox/IE6-7-8-9)
Use different CSS technique, that ends up rendering the same in all browsers
Use IE Conditional Comments to bring in another CSS for that browser leveraging the CSS "Cascade"
Use CSS Hacks as a last resort (usually only for Firefox or something)
But "go through each browser" can be the tricky part! There are some tools to help.
#Brian mentioned SuperPreview for Expression Web (+1), but there's also a free version of SuperPreview for Internet Explorer for those who don't have Expression Web.
You can compare different versions of IE on the same machine (hard before this product). Microsoft claims this sub-set of the Expression Web product will always be free (since they feel bad about IE6!).
IE6-7-8-9 tool is good enough for me, because I tend to focus on all versions of IE, but only the latest versions of Chrome/Safari/Firefox.
But if you must test against multiple versions of other browsers:
Expression Web SuperPreview
How to Use Multiple Browsers on a Single Machine
10 Helpful Resources for Cross Browser Testing
(Although Litmus seems to have dropped general web page support, and instead focuses on email client compatibility and campaign analytics.)

Resources