Andromeda
Note

Browser Rendering Engines

Definition

The browser component that parses HTML and CSS and paints pixels on screen. Different engines (Blink, Gecko, WebKit, Trident/EdgeHTML) implement the same standards with subtle differences that affect cross-browser testing.

Why It Matters

Different engines interpret web standards in unique ways; understanding these ‘interpreters’ is the difference between a site that looks perfect on a developer’s machine and one that actually works for the global user base.

Core Concepts

  • Client / User Agent: Software (browser or screen reader) that requests and renders documents.
/* Example of Vendor Prefixes for different engines */
.box {
  -webkit-transform: rotate(45deg); /* Blink/WebKit */
  -moz-transform: rotate(45deg);    /* Gecko (legacy) */
  -ms-transform: rotate(45deg);     /* Trident/EdgeHTML */
  transform: rotate(45deg);         /* Standard */
}
  • Blink: Powers Chrome, Opera, and Android browsers.
  • Gecko: Powers Firefox.
  • WebKit: Powers Safari and Safari on iOS.
  • Trident / EdgeHTML: Legacy Microsoft engines (IE / old Edge).
  • Assistive Clients: Screen readers and other AT consume the same DOM but present it non-visually.

Connected Concepts

Connected notes