Cross Browser Compatibility(Pdf)

Hello friends today we going to know about What is Cross Browser Compatibility
In this post we go through the terms that How we do cross browser compatibility testing? What are advantage / disadvantage ? How to fix cross browser compatibility etc.
Lets start Cross Browser Compatibility means that a web site, web application or HTML looks like same on every web browser as it as we design it. By this a web site or web application is capable to work on every browser. Mainly browser compatibility verified on bases of page layout, navigation, colour and graphics, multimedia, content presentation, functionally or accessibility etc

Cross Browser Compatibility

Browser Compatibility Testing
Under this process of browser compatibility testing we check that our web site visuals are same on every browser or not.

Advantages of Cross Browser Compatibility Testing
Not every user using the same browser whether they are using a PC, mobile or a different operating system and if appearance f web site is not same on every web browser then user interest is vanished from the web site and in future user will not come back to our web site. So what do we need to do to see that our web site is running in the right way in all type of the browser? That is done by the cross browser compatibility testing.

How to do Cross Browser Compatibility Testing
If we want to check that how our web site is showing on every web browser then you have to install every web browser and go through it . But this is not a good way. There are some tools are available by the help of these tools you can easily do your testing.

* Adobe Browser Lab
* Browsershots
* EndTest
* Selenium
*Browserling

Cross Browser Compatibility Issues
There are some main issues listed below for these reasons we have to do cross browseer compatibility testing.

Multiple Browsers - Internet Explorer, Opera, Safari, Firefox, Tor etc.
Different version of browsers
Different platforms - Windows, Mac, Linux, Android etc.
Different screen size - 800X600 pixel to 1024X768 pixel
Different font size.
HTML errors - Those mistakes which are break our page.
Browser bugs - These are that errors which are less popular but can create big problems.

Cross Browser Compatibility is a important topic among web developers .

Fixing of Cross Browser Compatibility Issues
Fixing of cross browser compatibility issues is may be hard. But here is some solution by which you can do successfully .

DOC Type - In the first line of html doctype always should be present . This is shows as following.

<!DOCTYPE html>

Doctype basically helps your browser to recognize in which language your website's code written . If we don't specify that then some browser will not be able to figure out what happend and they will render your website in a way that we would not like to see .

CSS Reset - Every browser having internally basic CSS styles . If website does not override (web site does not having CSS style) these then they are applied on your web site. If your web site does not having own CSS styling then every browser show your web site in its own way . For removing every type of side effect you have to use your own CSS Reset Style. This is conformed that every browser show your web site as it as you want to see . These following are the main CSS Reset Style which are used mainly .

Normalize.css
HTML.5Reset
Eric Meyer CSS Reset

Vender Specific CSS Style - If a browser vender implements a new CSS functionality they will often hide it behind a so called vender specific CSS Style . After the style has been established the vender will often remove the vender specific version or add modified version without the vender prefix. Let see on the opacity style for without vender prefix and Mozilla Firefox .

opacity :0.6; (Unprefixed version)

-moz-opacity :0.6; (Prefixed Version)

So for making sure that your code will works in all browsers you'll need to add unprefixed and all prefixed version gets picked up by all browsers. Some available prefix are :-

-ms (Microsoft Internet Explorer)
-moz (Mozilla Firefox)
-o (Opera)
webkit (Chrome)

For full declaration of opacity.

.test{

-moz-opacity:0.6;

-ms-opacity:0.6;

-webkit-opacity:0.6;

-opacity:0.6;

}

Lack of Valid HTML/CSS - Some browser interpret HTML & CSS different types and some browsers leave more compare than others . For example if you forgot to close <td> then chrome and Firefox automatically add </td> and show website in right manner but others browser don't do this and website shows in other way .

We can validate our code automatically by using W3C for HTML & CSS.

Outdated Browser Version - Always use update version of web browser for your testing . If you are using older version then your website does not run on update versions of web browsers .

If you want to download this content in pdf then click on this 👉Cross Browser Testing(Pdf)

Now I hope all your confusions are clear related Cross Browser Compatibility/ Testing. If you like this post then share it with friends. So they can also increase there knowledge. If you like my post then you can also subscribe for free for getting new update direct to your email.
Check some other post of my blog.

👉 Java servlet

👉 How to send large file through email
👉 What is VPN(Virtual Private Network).How it is work.