I'm developing a very simple web site, with only one web page, but i need the one single page to look as it should in all the browsers. Now, for testing purposes, i have installed a bunch of web browsers on my windows 7 machine (FF, Chrome, Opera, Safari, Netscape etc.) and after doing some markup changes, i've got the same looking webpage on all the browsers.
Now the question is, does "the way" a browser renders a web-page depend on the operating system the browser is running on? Should I install linux (or other os) and test again or it will just be fine?
You should definitely be testing sites cross-platform, others may disagree, but the rendering is definitely different.
In addition to base-rendering, you may also be missing fonts, have alternate fonts with the same name, have anti-aliasing enabled/disabled on different platforms/configurations and much more.
To see exactly what I mean, on a base install of Windows 7 with Firefox 5, OSX with Firefox 5 and Linux with Firefox 5, when using the font 'Arial' or 'Verdana', you will clearly see the differences, even if those fonts do exist on all platforms.
On top of the differences you'd see above, even your positioning could be out if you're using non-absolute values (hell, even if you are using absolute values such as px it could be out!), so it's always best practice to check your sites cross-platform, it's as important as checking cross-browser, in my opinion.
Even if the same fonts exist on different OS they might look different.
So yes if you want to be sure that the page look satisfactional on the OS you should test..
As rudi_visser said, you should be doing cross-platform testing. It's a bit of a bother, but absolutely worth it.
You can start by using a service like browsershots.org to quickly check if your site looks ok. To check older versions of IE, Microsoft provides some virtual machine images you can run in Virtual PC to really test the sites. Alternatively, there's this site which is like browsershots.org, only faster and IE-only. Please note, that screenshot services are no substitute for actually testing the site on a certain platform/browser, but it's a quick way to see if something's working at all.
I would definitely recommend checking your site in the older versions of IE, since IE has a rich history of, well, not working quite right. IE9 (which I assume you're using) is a big improvement, but a lot of people are still on versions 6-8. Since IE6 was around for ~9 years without major changes, IE 7, 8 & 9 have each had a lot of catching-up to do, so they're all very different.
As for other browsers, their rendering is more consistent across versions, but they may not be consistent across platforms. Again as rudi_visser said, elements might shift around, and especially text can look different. For instance, Mac OS X uses a different font-smoothing technique from Windows, so a line of text may appear longer/shorter, bolder/lighter from one to the other. A cross-platform browser like Firefox will use the OS' font-rendering, so even though the browser's the same on the different platforms, it can still look different. (The exception is Safari on Windows, which, I think, insists on using Mac-like font-smoothing instead of Windows' own).
Related
If I'm developing something for the web and I've already done functional testing in Chrome, Firefox, and IE on Windows do I really need to do the same on OS X? Are the browsers (Chrome and Firefox) widely different in how they work between each operating system that separate tests are needed in each browser for each OS?
You should not need to. By and large there will be no difference between the two on the same browsers. You may rarely find quirks that differ slightly, but I've never come across any.
I posed this question on Reddit and Hacker News. Here's a brief roll-up of the highlights of responses:
There appears to be consensus that the main difference you're likely to experience has to do with font types rendering (types render more smoothly on OS X and iOS).
Many suggested that the majority of what you see between Windows and OS X versions of the browsers is the same, with only subtle differences in the user agent based on the OS design (e.g., native radio buttons, scrollbars, etc.). This is not exclusive to browsers but to all apps running on each OS. Also, feature support in browsers doesn't vary between OS, i.e., if it's only a partially-supported feature in Firefox, it's that way on all platforms.
There were suggestions that, given the strong preference for developing on the Mac platform, it makes more sense to test on OS X's versions of Chrome and Firefox (and Safari) and remotely test IE (e.g., modern.ie, BrowerStack, Sauce Labs, etc.) Using a cross-browser testing suite like BrowserStack doesn't preclude the possibility of including mobile browsers (for later discussion).
Sources: Reddit, Hacker News
I have my application running when i Run on I.E8 it is working ok
but on other browsers like chrome,Firefox or I.E10 the functionality seems to be bit different.
For instance I have a log out button link that is missing in the other browsers and only visible in i.e8
my question is for these kind of things what are the exact things that are responsible for these functionality.
Where can I look and what can be the possible fixes?
Web browsers render things differently - this is a very common and frustrating part of web development. Older versions of Internet Explorer seem to be the worst.
To help you be less frustrated for now, I suggest you develop things to work primarily in the latest versions of the more popular browsers (Chrome, Firefox and IE9+), then fix your code to work with the less used browsers afterwards.
You also have discrepancies in default values for browsers. For instance, one browser might include margins in a default value whilst another will not. There are way too many cases for me to list all of the things which are responsible, the only way really is trial and error coupled with reading up online.
I am working on a beautiful book for the iPad together with an artist/designer, and we would like it to look perfect.
I am using HTML to lay out the pages, and i noticed that they look slightly different in a browser, in a simulator and on the actual iPad (the paragraphs are broken into lines a bit differently, most probably because the glyphs in the fonts are rendered a bit differently).
Can i be sure that my book will look the same on all iPads? (That is if I use HTML, and not, say, PDF). Should I supply fonts together with the app, or can I rely on the system fonts? Is it better to specify the font size in pt or cm?
UPD: I am using UIWebViews.
Thanks in advance,
Timofey.
You can never quite be 100% sure that a HTML page will look the same across all browsers on all platforms, although cross browser compatibility is generally improving with each browser version - those of us who have been doing this since the days of IE6 will remember those days with a shudder!
What helps with the iPad however is that its the same device, same screen resolution and running the same software (iOS and Safari), so if you test it on an iPad in that configuration, it will look the same on all others.
However a word of caution - you can get the Firefox browser for iPad, and all software - including iOS and Safari is subject to change and upgrades, and subject to the fact that people can also be running out of date versions if they don't plug in and sync very often.
Of course, any upgrades are not guaranteed to change the HTML rendering engine, i'm just saying its possible.
The best thing to do is ensure you keep most of your styling in CSS, so that if say, iOS 5, or iPad 3 did something unexpected down the line - you can make simple edits across the whole site/book without having to edit every page of it.
There is a CSS 3.0 feature, which allows you to specify a font for your web page elements, that is to make sure it looks the same on all browsers/operating systems, even if they don't have the same fonts installed:
http://www.w3.org/TR/css3-fonts/#font-resources
http://www.css3.info/preview/web-fonts-with-font-face/
Concerning other elements - it is CSS hacks again, you have to see what the differences are, and try deal with each problem individually, depending on the browser. iPad's are using a mobile version of Safari by default, but Opera also have a mobile browser for iOS devices.
What would be the process for ensuring that the code works as expected across multiple browsers. What would be the best answer?
Be XHTML compliant (w3.org validator)
Be CSS compliant (w3.org validator)
Use a JavaScript library that is cross-browser compatible (less direct call to JavaScript as possible)
Test, test, test during development. Not at the end!
Avoid bleeding edge code.
Yeah, I know, many of you will hate that answer. And if you've never worked in a large enterprise environment, you'll think I'm a Luddite. However, I can't tell you how many times the requirements I've been given have specifically listed "No HTML5" or "No CSS3" elements simply because the client was paranoid about IE6 working exactly as the others did.
The obvious overall answer is testing, but I'd go one step further. If you're worried about 100% operation in all browsers, you have to define your standards. For example, if you have to code back to IE6, do you have to worry about mimicking rounded corners, which is always a hack on IE6 and below? Or, will the client accept progressive enhancement such as square corners for those on browers from the dark ages and rounded for the rest of us? Does the client specify fonts that can't be told apart when pulling the page up side-by-side, or do they understand that browsers use different font rendering engines? Is it ok to work just in IE6, or do you have to also support quirks mode? What about rendering with a screen reader (accessibility) or without CSS or Javascript. How about mobile devices? All these were valid and measurable issues with my last major corporate client.
I like Adobe's Browser Labs as my first line of defense for testing. However, it's just one of many steps I take including multiple physical computers on multiple OS's connecting via multiple connections through different network proxies. You just can't test enough....and even then expect to find an error as the site is launched and matures.
Take each browser and test :D
You can use websites like browsershots.org to see how it looks on different browsers and platforms.
The most comprehensive way of doing that is to actually test in different browsers. A simple solution would be to create a virtual machine hosting server, set up multiple VMs, and then install a different browser version to different VMs to fully test your application.
Absent that, there are tools that can emulate (but not fully) browsers and you can test through those.
The best measures to adopt are:
Use a CSS Reset (read about it at the link, implement it however you like)
Use a Javascript Framework like jQuery (This will abstract a lot of cross browser quirks)
Validate your HTML and CSS. Make sure you are specifying a Doctype
You can test most browsers via Chrome, Firefox and IE8. IE8 has an IE7 mode that can be used to test for IE7. Press F12 in IE8 to get the developer window to debug and solve issues. Make sure you are prompting for all JS errors. IE6 is a tough one, but there are a number of resources available that you can probably find to help you with this.
Hope this helps. Good luck.
http://browsershots.org/
thats the site you looking for. You need to put in the url of your website, select the browsers that you want to check and click submit. It will return screenshots of the your website based on the browsers that you have selected.
There is no one way to test the app's compatibility for web browsers. First thing to keep in mind is understand the standards set for the app, define the number of browsers and versions to support. Once we know what we need to support we can keep the following points to ensure compatibility:
Test during development. Not at the end.
Avoid bleeding edge code. New functions that come with ES5 or ES6 standards would only be supported by modern browsers, hence would need polyfills in older browsers. Therefore use the most native form of Javascript wherever possible.
Use jQuery functions if it's included in the project. It helps take care of most javascript cross browser issues. If not included, use just bring its particular function in your project that you might need.
For CSS, try to use the traditional methods of layout and styling instead of the latest CSS3 one's which might not be supported by old browsers(like transform property).
Tools like Browserstack can be used to see the screenshots of how the CSS turned out on different machines.
Actually test on different machines and browsers. Although chrome provides a superb emulator but when code actually runs on that particular OS and ecosystem, then it may misbehave. So the best way to ensure is actually test them in every ecosystem.
Use Tools like VirtualBox to be able to test old browsers and different OS.
There is no way to ensure it aside from testing testing testing :-)
Is anyone writing applications specifically to take advantage of google chrome?
Are there any enterprise users who are considering using it as the standard browser?
Yes, I have started to pay very good attention to Google Chrome for my applications. Recent analytics show that between 6%-15% of my users are accessing my applications (varies between 6 to 15 in different applications) on Chrome. And, this number looks on an upward trend.
Thus, I can't really ignore it for testing right now.
As far as taking it as a standard goes, thats a long way off. I still have to test for IE6! :( Though, we have been planning to start using features like Gears (inbuilt in Chrome - downloadable elsewhere) once Chrome crosses the 25% mark. Thats when I believe that we will be looking at Chrome to be our preferred browser. I hope that we have Chrome 1.0+ by then! ;)
I switched to Chrome and haven't looked back except for the occasional site which doesn't work properly, forcing me to load it in Firefox. All my existing web applications work fine on it, and I'm using it for primary testing on my current development project.
I'm not actually targeting chrome, but I have added chrome to my browsers to test sites on. I've found some odd quirks in this product where some plugins cause the browser to hang, or run really slow in some environments, but they are still in beta in active development. But I definately now make sure sites I work on render well in chrome, as well as firefox, latest versions of IE, safari, Konquerer and opera. I usually check out how it looks on lynx as well, that helps me catch "un-alternated text" in images. Yeah, I know that isn't a word, but some people will understand what I'm saying.
Because chrome uses the webkit to render HTML, you can be assured if it works in safari, it'll work under chrome, however it's rendering engine isn't up to scratch quite yet. I think writing applications that take advantage of it is similar to writing iPhone applications, remember chrome is expected to be adopted by android to make it similar to iPhone. That way it pretty much takes advantage of all those iPhone apps.
Would I install it as the browser of choice? not yet - but i'll certainly work on valid web pages that will render across all browsers.
One of our major customers has outlawed Chrome because it installs on the C drive without asking. They deploy a standard image with a small C drive and large D drive so they can easily re-clone the system part of the image on C without destroying the client's personal files on D. Most software allows you to choose the install directory. Anything that violates this is disallowed, and they're a big enough company to have some weight with most vendors.
We have enough headaches trying to support
Firefox
Two versions of IE which have their own iffy bugs
Safari
I'm not sure why we continue to support Safari. Most of our users (corporate) use IE6 or IE7. We try to make sure that things work in both of those.
Maybe not for programming purposes but Chrome w/ Google Reader makes for the most powerful RSS reader. Can handle up to 1500 feeds w/ performance still ok, managing subscriptions still functioning.
I'm using it on my work machine, but that's about it. It's been stable for me, and I like the barebones UI. I'll still switch to Firefox for the web developer extensions however.
I'm liking some of GoogleChrome- the Start page with your 9 most recent is the winner for me. The interface takes a little getting used to, but the speed is impressive, especially with Gmail.
However, it glitches with Java, which rules it out for serious work at the moment. I use FireFox mostly and have Chrome for the "other" websites at work.
I'm considering using GWT on an intranet project and considering suggesting to the users that use Chrome to take advantage of the enhanced Javascript performance. Any AJAX-heavy app would be a great candidate to target Chrome.
At my company, we're not targeting it, but we're definitely paying attention to it. My boss is using it as his primary browser, and I have implemented browser detection for it in our scripts in case we ever to need to target it for some reason.
Chrome has the .png opacity bug where the transparent parts of the .png are a solid color if you try to transition the opacity from 0 to 1. In IE7 the opaque parts are black, and in Chrome, they are white. Today, I decided to go ahead and account for this bug in my JavaScript. I don't really test sites on Chrome that often, but I am actually using it for almost all of my browsing.
I will target Chrome as soon as a stable Linux and OSX client is available.
Targeting Chrome/Chromium right now, I think is like targeting Konqueror web browser. It will get popular, but you should wait to a more stable beta, and/or some Linux and OS X client.
My website statistics shows 3.xx % visitors using Chrome which arrived just few weeks back. And Opera is only 4.xx % which has been around for several years.
Easily you can see that rate at which Chrome is picking up.
You can see how easily Google takes over all areas of your computing world and personal world too.
Since Chrome uses Webkit, it has the same rendering engine and DOM support as Safari (not necessarily the same revision of Webkit though). By testing in Safari, you can generally get by without worrying about Chrome. Any differences you find are probably just bugs that you should file on instead of work around.
However, because Chrome uses a different JS engine, there may be a few incompatibilities with Safari. So, if you're doing anything with JS, you might as well fire up Chrome and see if there's anything obviously wrong.
Generally though, you don't target browsers, you target rendering engines (with their associated DOM support and JS engines).
I am using Google Chrome, so far all the web apps I have work fine in it with no modifications.
No.
Why help Google further build an evil empire? In this particular case it is so obvious that they do not care about users but only obsessed with gathering usage info.
It's not any major player yet