Why Different Browsers Render Different CSS Styles

If you are interested in Web Designing you must be aware of the fact that different browsers render styles differently.Here is the detailed explanation.

Common Rendering Engines Used by Different Browsers
Common Rendering Engines Used by Different Browsers

In my initial days of web designing I was not very much aware of the fact that there are differences in rendering styles by different browsers. Once i used ‘blink’ property in CSS and tried testing on Chrome but was unable to get the desired output. On the other hand Firefox without much frustration met my expectations.

So why differences? Well to display pages, web browsers use something called rendering engines. Every browser has its own rendering engine, which parse your codes and then decide how to display it. Since each browsers are developed independently of each other, there are minor differences in each rendering machines which a browser uses. Therefore web browsers differ when laying out the content and design after parsing your code.

The four most common rendering engines are Trident, Presto, Gecko and WebKit. Microsoft developed Trident, as its propitiatory and is currently being used by Internet Explorer and AOL browsers. Presto is another rendering machine developed by opera.

Gecko and WebKit are the open source rendering engines. Gecko was developed by NetScape. WebKit open source rendering engine was developed combined by Apple, Google, Nokia and others.

However i read on Wikipedia that there are not much differences between all these rendering engines as it used to be earlier.

Test the Browsers Compatibility

While there are plenty of sites available to test the compatibility of various properties here are some of the best ones.

+ CanIUse.com

+ QuirksMode.com

+ Also there is an entire list of all the properties (including CSS3) at Wikipedia showing browsers compatibility.


One thought on “Why Different Browsers Render Different CSS Styles

Leave a Reply