Pinterest Stumbleupon Whatsapp
Ads by Google

As you browse the web, it’s not uncommon to come across sites that look different from one device to another. Perhaps some features don’t work at all.

Often, this isn’t a problem with the website. It’s your browser. The five main desktop browsers use four different “rendering engines” to display a web page — the new Microsoft Edge browser Microsoft Gets the Edge, 1 Billion Devices Running Windows 10, & More... [Tech News Digest] Microsoft Gets the Edge, 1 Billion Devices Running Windows 10, & More... [Tech News Digest] Microsoft has the Edge, Windows 10 is huge, Secret gets shut, embed MS-DOS games in tweets, make money from Silent Hills, and watch Michael Bay get shown up by an amateur filmmaker. Read More for Windows 10 will introduce a fifth — and each one works differently.

ms edge

It means your experience of the web can change depending on which browser you’re using, and even which version of that browser.

What is a Rendering Engine?

A web page isn’t a single entity that is downloaded and displayed on screen one pixel at a time. Instead it is essentially a series of instructions written in various types of code — HTML, CSS, JavaScript What is JavaScript, And Can the Internet Exist Without It? What is JavaScript, And Can the Internet Exist Without It? JavaScript is one of those things many take for granted. Everybody uses it. Read More , PHP and others — that tell the browser what to do and where and how to do it.

Each browser uses a rendering engine, sometimes also referred to as a layout engine, to take the content and styling information contained within the code, and display it on screen in its fully formatted form.

Ads by Google

Reading

The trouble is, there isn’t a single rendering engine that is used in every browser. And while each language is defined by a detailed specification, the engine can only offer an interpretation of that specification.

With CSS (the code that provides the styling information CSSmatic: Quickly & Conveniently Create CSS3 Stylesheets Through Multiple Online Tools CSSmatic: Quickly & Conveniently Create CSS3 Stylesheets Through Multiple Online Tools Read More ) in particular, no engine will produce exactly the same results. Sometimes the differences may only amount to the odd misaligned pixel here or there, but at times they may be more radically different.

Which Browsers Use Which Engines

There are four main rendering engines that the most popular browsers use.

  • WebKit: an open source engine used by Safari on OS X The Ultimate Guide to Customizing Safari on Mac The Ultimate Guide to Customizing Safari on Mac Customize Safari. From adding favicons to your tabs to changing how Reader Mode looks, Apple's web browser is way more flexible than you think. Read More and iOS, as well as many other browsers on mobile devices, including the native Android browser;
  • Blink: an open source engine based on WebKit, it powers Chrome, Opera, Amazon Silk and Android’s WebView (the browser that opens within apps);
  • Gecko: an open source engine developed by the Mozilla Foundation, it is used by Firefox;
  • Trident: a proprietary engine developed by Microsoft and used in Internet Explorer. The Microsoft Edge browser will use a newer version called EdgeHTML.

Web Standards

The gap between the different rendering engines is far smaller than it was when Internet Explorer was the dominant browser Is Internet Explorer Making A Big Return In 2015? Is Internet Explorer Making A Big Return In 2015? Microsoft no longer has to offer EU Windows users a choice of browsers. Moreover, Microsoft is working on a new browser. Nevertheless, we'll show you how to install your favorite browser without touching IE. Read More .

Tests such as acid3 show how accurately a browser renders a page, and most modern browsers score highly. However conforming to standards is an immensely complex task.

safari acid3

The specifications for HTML, CSS and others are huge. New elements are added; older, unused or outdated ones are removed. It can take a long time for the rendering engines to reflect these changes.

Some elements in the HTML5 and CSS specs are still not supported by any mainstream browser, some only partially supported, while others still are supported by some browsers but not all.

The website html5test.com enables you to test your browser, and the specific version you’re running, to see how well it supports both official and experimental features of HTML5. At the time of writing, Chrome ranks as the best of the major browsers Which Web Browser Is The Most Secure? Which Web Browser Is The Most Secure? Which browser is the most secure? Which should you install to make sure your browsing experience is safe? What can you do to make sure your existing browser is as secure as possible? Read More , with Internet Explorer (v11) ranking lowest.

chrome html5test

If a web developer uses a feature that is supported in one browser but not another, the unsupported browser must either settle on a close equivalent or ignore the feature altogether (a transparent box could be rendered as non-transparent, for example).

This makes the job of rendering web pages far more complex than it appears. A browser that is updated more frequently is likely to be more standards-compliant than one that isn’t, as is highlighted by the regular automatic Chrome updates compared to the far more sparse IE updates.

unsupported browser

And there are other factors at play, too.

  • Bugs in the engine: A rendering engine is software, and all software contains bugs. Although critical bugs will be found and quashed quickly, it’s impossible to guarantee that a specific combination of code on a web page won’t produce unexpected results when rendered
  • Bugs in the web page: Browsers have a certain level of error tolerance built in, but this will differ from one engine to the next. A web page with errors in the code may still render perfectly in one browser, but be horribly broken in another
  • Fonts: The way typefaces are displayed is not handled by the browser but by the operating system. Windows and OS X render fonts differently How To Make Windows Fonts Look Like Mac Fonts How To Make Windows Fonts Look Like Mac Fonts Eye candy is not a Windows forte. Modern UI (aka Metro) brought improvements, but still lacks in one important area: fonts. We show you how you can get beautiful font smoothing on Windows. Read More , so even the same font in the same browser can look different when viewed on different platforms
  • Legacy: Browsers will often adopt new features, especially for CSS, before they become part of the official spec. If the implementation of the feature changes when it is adopted, the browser developer needs to decide whether to adopt the change and risk breaking compatibility with thousands of websites designed for the old version, or ignore the new version entirely
  • Proprietary features: Some browsers may use proprietary technologies that aren’t available elsewhere. This was most famously seen with Microsoft’s ActiveX framework in Internet Explorer, although the company won’t be using it in the new Microsoft Edge browser

Wrap-up

With so many issues involved, it’s no surprise that differences in the way browsers handle web pages persist.

StatCounter-browser_version-ww-monthly-201404-201504-bar

The situation is improving, but is unlikely to be solved entirely. It would help if everyone ran the latest version of their chosen browser, but with the six-year old Internet Explorer 8 still maintaining a 4.5 percent market share, that’s a long way off.

Which browser do you use, and do you keep it up to date? Have you found any websites that don’t work in your chosen browser? Let us know in the comments.

Image credits: Devices via Jeremy Keith, Unsupported browser via Duncan Hill

  1. Patricia Galloway
    March 23, 2016 at 2:22 pm

    I have an old laptop that runs IE6, and almost nothing now renders on it--not even Google searches.

  2. Michael Weldon
    October 11, 2015 at 9:01 pm

    I use 'Puppy' Linux, and one of our forum 'regulars' has produced an entire range of Chromium versions in the sfs (squash file system) format.....going all the way back to version 22, and culminating in the current release, version 45. The neat thing about this sfs format is that they can be loaded & unloaded 'on-the-fly', which means that it's simple to unload an older version & replace it with the newer one.....restarting the 'X' server in between doing so. And since Puppy maintains separate config & cache directories in the /root folder, you don't lose any of your bookmarks or settings.

    It's very easy to update the Pepperflash Player, too.

    In most of my 'Pups', I'm using version 41 of Google's Chrome, but in one, 'Slacko 5.7.0' (based on Slackware), Chrome won't run without a hell of a lot of messing about.....so here, I run one of the Chromium sfs packages; currently, version 36.0.1985.143. Runs perfectly.....no problems at all with any of the websites I visit on a regular basis (several dozen, at least!), and it handles HTML5 on YouTube and Vimeo quite happily.

  3. Paul Burgess
    June 11, 2015 at 9:41 pm

    I use Firefox on Windows 8.1 and on Ubuntu. I did use Chrome but it became very slow and unreliable.

  4. Amir Alavi
    June 11, 2015 at 9:03 am

    I use Chrome on Android and Windows and IE and UC Browser on WinPhone

  5. Read and Share
    June 9, 2015 at 3:55 pm

    I use Chrome - with two "profiles":

    1. Google - use for Gmail and all other Google services. Only Google cookies allowed here.
    2. Internet - use for all other sites -- All Google cookies blocked here.

    I am thinking the above arrangement will prevent Google from knowing my surfing habits.

    • Dave
      April 18, 2016 at 10:47 am

      Yes, and by doing that you will eliminate all the useful search results Google would craft for you from your search habits. I'd prefer a more useful search than wearing a tinfoil hat.

Leave a Reply

Your email address will not be published. Required fields are marked *