How Do Browsers Display Web Pages, and Why Don’t They Ever Look the Same?
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 for Windows 10 will introduce a fifth — and each one works differently.
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, 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.
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) 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 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.
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.
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, with Internet Explorer (v11) ranking lowest.
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.
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, 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.
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 Source: www.makeuseof.com
No comments:
Post a Comment