Before an application goes live extensive testing is performed to avoid any glitches from appearing when it is used by the end users. An end user can access a website in any browser of his choice like Firefox, opera or chrome.
Many times, we come across a situation where we open a website and experience a “broken” site, where one or the other feature isn’t working. But when we open the same site in another browser all works fine! This means the website has not been tested across different browsers.
To avoid a broken website, it must be tested for “cross browser compatibility”, as the name suggests it is a process of testing a web application’s compatibility with different browsers.
Our website must run smoothly in most of the commonly used modern browsers if not all. Let’s take a look at some Tips and Tools that aid in Cross Browser Compatibility:
Tips to take care of while development:
DOCTYPE
DOCTYPE is a declaration which tells the Web browser about which version of HTML is the [age written in. Browsers use this declaration to decide how to render a page. When we do not include a DOCTYPE in our HTML code a browser enters its “Quirks mode”. Quirks mode is a mode of operation where a modern browser emulates actions of its older versions. Quirks mode were built to use websites that were built before adoption of the web standards. But this leads to many bugs, compatibility issues and broken features because the older version browser does not recognize new semantics and code. So it’s important to include the DOCTYPE declaration for your browser to know run in the standards mode and load all features as expected.
Syntax:
<!DOCTYPE html>
This needs to be added at the top of the HTML code before the html tag
CSS Resets
CSS Reset is a set of CSS rules that resets the styling of HTML elements to create a consistent base between browsers. Every browser has its own “user agent style sheet” which styles un-styled HTML elements when a website is loaded. Because of this the same un-styled website loaded in Firefox may appear different from the one loaded in chrome. So by using a CSS RESET we force a browser to reset its default Styles and follow our styles thus avoiding multiple cross browser inconsistencies.
Conditional Comments
If you know that a particular browser causes issues conditional CSS can help. With conditional comments you can load different CSS files for different browsers. Checkout the example below:
Here we load a default style sheet “style.css”. But if we load a website in IE the “IE.css” loads else the “NonIE.css” file loads. This voids glitches and errors of UI in IE.
Syntax:
<link type="text/css" href="style.css" />
<!--[If IE]>
<link type="text/css" href="IE.css" />
<![endif]-->
<!--[if !IE]>
<link type="text/css" href="NonIE.css" />
<![endif]-->
Validation
Each and every browser has its own way of interpreting HTML and CSS. So, what can be done do to make this standardized? The answer to this lies in validating your HTML and CSS to make them error free and fix any issues if they exist. To solve this purpose of validation you can take help of W3C validators which are available for HTML and CSS.
CSS Frameworks
Using pre built CSS frameworks like bootstrap, foundation etc. can take off a lot of load as they are cross browser compatible and ensure functioning in a similar way in most of the modern browsers.
Explore HTML and CSS in more detail: Latest Not to Skip blogs on HTML & CSS
Tips to take care of while development:
Test Plan
Testing can take up a lot of time if done in a random and unplanned manner. In cross browser testing a developer must create a test plan of how is he going to manage the testing process. A simple way is by asking questions like
- Which are the target browsers?
- Which browsers are mostly used as per traffic statistics?
- Which version of a particular browser is to be used?
- Does this project need manual testing or automated testing?
- What are the tools that are there for cross browser testing?
- What is the time estimation for completing tests?
Once he is aware of the list of browsers to test for, he then thinks of what is to be tested; which is discussed in the next point.
Cross Browser Testing Checklist
To begin with it is a good practice to maintain a checklist which can be easily reused every time you develop a project. There are mostly common things in every project that need to be verified for compatibility. Here the developer should segregate the website into following sections:
| UI & Content | Page layout in different resolutions |
| CSS validation | |
| HTML validation | |
| Content alignment | |
| Animations | |
| Audio/ video/ image content | |
| Content color, foreground, background | |
| Header footer layout | |
| Font size & styles | |
| Functionality | Navigation links |
| Checkbox/ drop-downs | |
| Submit buttons | |
| Input forms and validations | |
| Modal popup’s | |
| Internal & external links | |
| Audio/ video playback controls | |
| Usability | Scroll bar appearance when needed |
| Date formats | |
| Access from mobile devices | |
| Plug-in compatibility | |
| Page zoom-in zoom-out | |
| Performance | Page load time |
This table is not an exhaustive list of tests that are performed; it is a generalized list; a developer can maintain a list of more specific tests pertaining to the project they are developing.
Choosing a time to Start Testing
Unlike other applications, in web app development cross browser testing can be initiated from the very beginning. The developer can choose to test page by page or wait for the entire application to be completed. Testing alongside development can be a tiresome process but can get you a hold of issues while development which can then be easily dealt with. Tests should be done and bugs must be fixed way before the websites launch./
Manual Testing
In this a website is tested on various browsers which are installed locally and a list of bugs for each browser is maintained. Once the test plan and checklist are ready the developer can decide if manual testing will suffice the project. This is decided based on many factors like size of the project, no of functionalities and pages etc., no of available resources etc.
The drawbacks of this method are that practically is it not possible to test on each and every browser and also for every version of the browser. It ends up being time consuming and costly. It is mostly suitable for websites that have very few pages and functionalities and are going to be used in very few browsers.
Automated Testing
Automation is the process of cutting out on manual repetitive tasks by letting a piece of software run on a machine handle them for you. This phenomenon applies to automate testing too. For this we have many test tools available which minimize the effort of testing to quite an extent. Most of these are used for complex web apps. Some of them are:
BrowserShots
This is a free browser testing tool that lets you take screenshots of your website in more than 50 browsers on different platforms. This is used for simpler HTML CSS websites.
CrossBrowserTesting.com
This lets you test your website in live remote devices on various browsers by using automated frameworks like selenium.
LambdaTest
This is a cloud-based testing platform that lets you run automated test scripts
In this article, we saw how we can avoid cross browser conflicts and what needs to be done to fix such issues. There are many tools available like selenium which are extensively used by bigger web applications and can be discussed in a dedicated blog. As we know the quality of website affects the traffic it attracts and one of the most important features that improve a websites quality is its consistent behavior across multiple browsers. To learn HTML & CSS3 at from the beginning till advanced level, you must go for professional HTML5 & CSS3 training.
