What's New Tutorial Index References Contact

Web Browsers

You're reading this site in an application called a web browser. Web browsers enable the user to look at currently-available websites, but importantly for your own work, they also let you load local files, those stored on your machine (thus, local). There's many browsers out there, but they break down into one of a few different categories. You should think about installing one from each category to better test the sites you make.

Rendering engines

Each browser is powered by a core known as a rendering engine (alternatively, a layout engine or browser engine). This is the portion of the browser that takes your markup and transforms it into a browsable page. Though there's many browsers out there, there are only a few rendering engines; if your site looks different on one browser compared to another, chances are, they use different rendering engines.

Let's quickly go over a few and which browsers use each one.

Google Chrome, one of the principle Blink browsers

By far, the most popular rendering engine today is Google's Blink engine. Google Chrome uses it, as does its open-source companion Chromium. Vivaldi, Opera, Brave, and Edge are all other browsers that, at their core, use Blink. In addition, apps that use Electron, such as Discord, Skype, and Visual Studio Code, all act as a standalone instance of Chromium and thus use Blink.

WebKit

WebKit logo

WebKit is a very notable ancestor to Blink. In fact, Chrome originally used WebKit before Google forked, or copied it, to develop it into Blink instead (and WebKit was originally forked from KHTML, if you really wanna get retro). Nowadays, WebKit is most commonly used in Safari, both MacOS and iOS Safari, as well as, thanks to Apple policy, any browsers that run on iOS (including, confusingly, Chrome for iOS).

Gecko

Gecko logo

The major competitor to WebKit-based engines, Gecko was originally the brainchild of none other than the giant of the late 90s, Netscape. After the death of Netscape, the Gecko technology went on to be used (and is still used) in Firefox and its derivatives, including SeaMonkey, Waterfox, and Classilla. (Pale Moon and its derivatives technically use a fork of Gecko called Goanna, but it's close enough in lineage that I'll include them here.)

Trident (and EdgeHTML)

Internet Explorer logo, the main Trident browser

And finally, the bane of many a 2000s web developer, Trident was the engine used in Internet Explorer 4.0 and later. Trident was infamous for Microsoft's laziness and lack of standards-compliance during Internet Explorer's tenure, but has been improving steadily since version 9. Trident was later forked into EdgeHTML, which was used in Microsoft's Edge browser...until it switched to Blink in 2018.

Either way, while Trident-based browsers are nowhere near as common as they used to be, it might still be worth checking your site in Internet Explorer 11 or older versions of Edge to see how it looks.

This isn't an exhaustive list of engines; Opera formerly used an engine called Presto before it too switched to Blink. Mozilla and Samsung are currently experimenting with an engine prototype known as Servo, meant to be more efficient and more parallel than other engines. Listing any more would belabor my point though.

Why do rendering engines matter?

It might seem overly technical, but there's a good reason I mention rendering engines: to get you to test your site everywhere you can.

Think of the multitude of ways you can visit a website. Think of just how many different screen sizes are out there. Think of how many different devices you can look at the Web on, everything from a computer to a phone to a browser embedded in a video game console. All of them can radically change how your site looks and even break it, potentially. Browser matters too, maybe even more than those.

Each rendering engine implements different standards and different features; sometimes, even core standards get left out. With raw HTML, this isn't as big an issue, but CSS support is still very fragmented, and any new multimedia features and formats tend to be sporadically supported, at least at first. If you're not careful and test your site only in a single browser, you could end up with a site that looks broken or doesn't quite work in the rest. This problem used to be much worse in the past, but you still need to be vigilant in making sure your site works on as many devices as you can stand to support.

Thankfully, testing is fairly simple: install a variety of browsers and make sure you look at your site in all of them. If you normally use Chrome or a Blink-based browser, make sure you have Firefox on hand, and vice versa. (I normally use Vivaldi and test in Firefox Developer Edition whenever I make a major change to a site.) Check in Safari, which is notorious for lagging standards and security features. Test on your phones. Friends' phones, if you can. You never know what might go wrong.

Finally, caniuse.com is an invaluable resource for checking what browsers will support any new feature you might be looking to play with. The site will give you a percentage of roughly how many users will be able to use your stuff, browser versions, and usage notes if relevant. Even if you don't need it now, bookmark it. It might just explain why your Opus files won't work on your iPhone but work fine in Chrome.

Summary:

  1. Web browsers are programs used to browse websites and to test out any you make yourself.
  2. Each browser is powered by a rendering engine, which is the important bit to a web developer. Not every browser has a unique engine, so sites will look identical in ones that use the same engine.
    • Blink is Google's offering, powering Chrome and Chromium, Vivaldi, Brave, Opera, and Electron-based apps such as Discord, Slack, and Visual Studio Code.
    • WebKit is an ancestor of Blink, maintained mostly by Apple for Safari and iOS browsers.
    • Gecko was originally developed by Netscape and later developed by Mozilla for Firefox. Browsers like Seamonkey, Waterfox, and Classilla use Gecko proper, while Pale Moon uses a derivative called Goanna.
    • Trident powered Internet Explorer and caused many a headache until Microsoft retired it for EdgeHTML. (Edge itself now uses Blink, and EdgeHTML only powers Windows universal apps.)
    • Many other small-time and experimental engines exist, but these are the major ones to look out for.
  3. It's important to test your site under as many engines and on as many devices as possible. Not all engines have the same featureset and bugs can and do occur between them.

Further reading