Website Differences in Popular Browsers

Modified on Wed, 20 May, 2015 at 5:18 PM

You may have noticed small differences when you open your Empowerkit site using certain browsers. There shouldn’t be any major inconsistencies, but to some extent, this is normal. Some of the differences that you may find could be present in fonts, rounded corners, widths, padding and margins, among others. In this post, we’ll cover the basics of these.

Rendering Engines

First, some background. A rendering engine is the most important component of a browser. Its function consists in reading the code (mainly HTML and CSS) and display/present it in the window as it (the rendering engine) understands it.

Each rendering engine works differently according to how it was programmed. Here’s a list of the most popular and mainstream rendering engines used by modern browsers:

WebKit (Safari, Chrome)
Gecko (Firefox)
Trident (Internet Explorer)

Fonts

A font is a set of characters. The process of presenting these characters in a web site is different in each browser. It has to do with the font itself and the rendering engine. So things like sharpness, line height, or font size may differ in quality and consistency among browsers and operative systems.

This image shows how browsers differ in how they present text

A quote from a post on the matter on the Adobe Typekit blog may bring some light:

Each operating system contains a text rendering engine — sometimes multiple engines from which to choose. And each browser controls which of those rendering engines is used. So on the same OS, two browsers can produce text with very different appearances because they use different rendering engines. On top of that, often the rendering engines differ between different versions of the OS and different versions of the browser. Additionally, default font-smoothing settings vary by OS and OS version, and can be overridden by users’ browser preferences.

Rounded Corners

Rounded corners are a property of CSS 3, the language used to format HTML. This version of CSS is comprised of several modules. Some of them have been made already official recommendations, but not all of them. Nevertheless, though some modules are still drafts and under revision, browsers can (and actually do) already implement and use them.

Like rounded corners. Some browsers understand natively this property, and they display it correctly.

Some, like old versions of Internet Explorer, don’t.

Here’s an image that puts side to side how some browsers render the corner radius.

Most modern browsers show correctly the rounded corners on boxes

Text Shadow

There is another feature that may be missing in Internet Explorer (versions 9 and below). That is text shadow, which is not natively supported.

So in a sample case, this is how it would look in these browsers:

IE doesn’t support shadow in text

Browser Support

Learn more about browser support for:

The editor (authoring/admin mode).
This means which browsers are supported for Empowerkit when you are editing your site. Hint: modern browsers are supported, but we suggest using Chrome.
Your users/visitors.
This means supported browsers for the people who visit your website. Hint: the vast majority of browsers are supported, even outdated ones.

Sum up

To sum it all up, this means that, though there may be some of the smaller differences mentioned above, the sites you create with Empowerkit will render fine with the latest browsers and technologies and they will degrade in order to work properly with older or outdated browsers or devices.

For further information on this, please see:

Do not hesitate to contact us in case that you have any comments or questions.