optional · CSS study notes
I.25 Web Browsers
⬆️ Back to: P-I.I. Introduction to Computing
🧭
Page Outline — click a heading to jump.
🎯
Exam pattern (2016–2026): No direct question. The HTML option of 2021 Q3(a) is answered on I.27 Internet.
CSS Computer Science (Optional) — Paper-I, Section-A, Topic I, p.64-65. Covers: Web Browsers.
Definition
A web browser is application software used to access, retrieve, and display content on the World Wide Web (e.g., Google Chrome, Mozilla Firefox, Safari).
Classification of Web Browsers
By Rendering Engine
| Engine | Browsers Using It |
|---|---|
| Blink | Chrome, Edge (2020 onward), Opera (2013 onward) |
| Gecko | Firefox |
| WebKit | Safari (also Chrome/Edge's original engine, before the Blink fork) |
Other Classification Axes
- By platform: Cross-platform (Chrome, Firefox, Edge — available on Windows, macOS, Linux, mobile) vs. Platform-exclusive (Safari — Apple devices only).
- By openness: Open-source (Firefox; the Chromium project underlying Chrome/Edge/Opera) vs. Proprietary (Safari's own app, though its WebKit engine is open-source; historically Internet Explorer was fully closed).
- By privacy stance: Privacy-focused (Firefox — blocks third-party trackers by default) vs. Standard/data-collecting (Chrome — tied into Google's ad/data business).
- Exam angle: examiners may test whether you know two different browsers actually share the same rendering engine (e.g., Chrome and Edge both run on Blink) — "different browser" does not necessarily mean "different engine."
Key Concepts
- Browsers communicate with web servers using HTTP/HTTPS (HyperText Transfer Protocol / Secure)
- They render HTML, CSS, and JavaScript into the visual page a user sees
- HTTPS adds encryption (via TLS/SSL) to protect data exchanged between browser and server — an important distinction from plain HTTP for security-related exam questions
- Browsers typically include a rendering engine (converts HTML/CSS into visual layout — e.g., Blink, WebKit, Gecko) and a JavaScript engine (executes interactive scripts on the page — e.g., V8, SpiderMonkey)
History of Web Browsers
- 1990 — WorldWideWeb (later renamed Nexus): created by Tim Berners-Lee at CERN; the first web browser, built alongside the first web server, and it doubled as a page editor.
- 1993 — Mosaic: developed by Marc Andreessen's team at NCSA (University of Illinois); the first browser to display images inline with text, widely credited with sparking the 1990s internet boom.
- 1994 — Netscape Navigator: released in October 1994 by Andreessen's new company, Netscape Communications; rapidly became dominant and triggered the "first browser war" against Internet Explorer.
- 1995 — Internet Explorer: released by Microsoft (based on technology licensed from Spyglass Inc.); bundled free with Windows, reaching roughly 75% market share within about 4 years.
- 1996 — Opera: released by Opera Software (Norway); known for compact, resource-efficient builds and early popularity on mobile/handheld devices.
- 2002–2004 — Firefox: began life as Phoenix (2002), renamed Firebird (2003) after a trademark dispute, then Firefox (February 2004); public 1.0 release in November 2004 by the Mozilla project (a community non-profit that emerged after Netscape's decline).
- 2003 — Safari: released by Apple; became the default browser on Mac OS X.
- 2008 — Google Chrome: released by Google; introduced the V8 JavaScript engine; initially built on WebKit before Google forked it into its own Blink engine in 2013.
- 2015 — Microsoft Edge: released by Microsoft as Internet Explorer's successor on Windows 10, originally using Microsoft's own EdgeHTML engine; rebuilt on Chromium/Blink and re-released in January 2020.
Exam angle
"Which two browsers fought the first browser war?" → Netscape Navigator vs. Internet Explorer (mid-to-late 1990s). Firefox's chain of name changes — Phoenix → Firebird → Firefox — is a frequently tested trivia trap.
Major Web Browsers
- Google Chrome — the world's most widely used browser.
- Released: 2008, by Google, built on the open-source Chromium project.
- Engines: Blink (rendering, forked from WebKit in 2013) and V8 (JavaScript).
- Key features: a vast extension ecosystem (Chrome Web Store); deep sync with a Google account (bookmarks/passwords/history across devices); frequent silent auto-updates.
- Advantage: fast performance and a huge extension library.
- Disadvantage: relatively heavy on RAM/battery usage; its dominance raises data-privacy concerns since Google collects usage data.
- Mozilla Firefox — a free, open-source browser.
- Released: 2004 (public 1.0), developed by the non-profit Mozilla Foundation.
- Engines: Gecko (rendering) and SpiderMonkey (JavaScript).
- Key features: strong privacy/tracking-protection stance (blocks third-party trackers by default); independent of any single large tech company's ad business.
- Advantage: strong built-in privacy features and open-source transparency.
- Disadvantage: smaller extension ecosystem and market share than Chrome.
- Apple Safari — the default browser on macOS and iOS devices.
- Released: 2003, by Apple.
- Engine: WebKit (the ancestor Chrome's Blink was originally forked from).
- Key features: optimized for battery efficiency; tight integration with the Apple ecosystem (e.g., Handoff between iPhone and Mac, iCloud Keychain password sync).
- Advantage: excellent power efficiency on Apple hardware.
- Disadvantage: only available on Apple devices — not a cross-platform option for Windows/Android users.
- Microsoft Edge — Microsoft's default Windows browser.
- Released: 2015 (original EdgeHTML version); rebuilt on Chromium and re-released January 2020.
- Engine: Blink/Chromium (replacing Microsoft's older proprietary EdgeHTML engine).
- Key features: built-in Microsoft account integration; a collections/note-taking tool; typically better default battery performance on Windows laptops than Chrome.
- Advantage: pre-installed on all Windows PCs; Chromium-compatible with most Chrome extensions.
- Disadvantage: still trails Chrome and Safari in global market share.
MCQ Traps
- HTTPS, not HTTP, provides encryption via TLS/SSL for secure data transfer — a very frequently tested distinction.
- A browser renders web content; it does not itself host or store the website's data — that's the role of the web server.
- Chrome and Edge share the same Blink rendering engine (Edge migrated from its own EdgeHTML engine to Chromium) — a fact sometimes tested to check whether "different browser" is confused with "different engine."
- Safari uses WebKit, historically the ancestor of Chrome's Blink engine — don't assume all major browsers use unrelated, unique engines.
- The first web browser was WorldWideWeb (1990), not Mosaic or Netscape — Mosaic (1993) is often mistakenly cited as "the first browser" because it was the first to popularize the web; Tim Berners-Lee's WorldWideWeb/Nexus predates it by three years.
- Firefox was not always called Firefox — it was Phoenix (2002), then Firebird (2003), before becoming Firefox (2004); a question about "Mozilla's original browser project name" is not asking about Firefox itself.
Frequently Asked MCQs (Past Papers)
- Q: Who created the first web browser, and what was it called? — A: Tim Berners-Lee; it was called WorldWideWeb, later renamed Nexus.
- Q: Which browser was the first to display images inline with text, and in what year? — A: Mosaic, in 1993.
- Q: Which two browsers fought the "first browser war" in the mid-to-late 1990s? — A: Netscape Navigator and Internet Explorer.
- Q: What were Firefox's two earlier project names before it was called Firefox? — A: Phoenix, then Firebird.
- Q: In what year was Google Chrome first released, and what JavaScript engine did it introduce? — A: 2008; it introduced the V8 JavaScript engine.
- Q: Which rendering engine did Chrome originally use before creating its own Blink engine in 2013? — A: WebKit.
- Q: What was Microsoft Edge's original rendering engine before it switched to Chromium/Blink? — A: EdgeHTML.
- Q: Which protocol version encrypts data exchanged between a browser and a web server? — A: HTTPS (HTTP with TLS/SSL encryption).
- Q: What are the two main engines every modern browser includes? — A: A rendering engine (e.g., Blink, Gecko, WebKit) and a JavaScript engine (e.g., V8, SpiderMonkey).
- Q: Which browser is default on macOS and iOS, and which engine does it use? — A: Safari; it uses the WebKit engine.
✅ Self-Test Questions (with Answers)
Q1. What protocol do browsers use to communicate with web servers, and which version adds encryption?
Ans: Browsers communicate with web servers using HTTP — HyperText Transfer Protocol — an application-layer, request–response protocol devised by Tim Berners-Lee at CERN around 1990. The browser (client) sends a request such as GET for a resource, and the server returns the resource with a status code (200 OK, 404 Not Found, 500 Internal Server Error). HTTP runs on port 80 and is stateless: each request is independent, which is why cookies and sessions exist to carry context.
The encrypted version is HTTPS — HyperText Transfer Protocol Secure — which runs on port 443. HTTPS is not a different protocol but HTTP layered over TLS (Transport Layer Security), the successor to the older SSL. Before any HTTP data flows, a TLS handshake authenticates the server via a digital certificate issued by a trusted Certificate Authority and negotiates session keys. HTTPS thereby provides three guarantees:
- Confidentiality — traffic is encrypted, so an eavesdropper on the network sees only ciphertext.
- Integrity — any tampering with data in transit is detected.
- Authentication — the certificate proves the site is genuinely who it claims to be, defeating impersonation and man-in-the-middle attacks.
Browsers display a padlock icon for HTTPS and mark plain HTTP sites as "Not secure." HTTPS is mandatory for any page handling passwords, payments or personal data, and is now the default across the web. Note the frequently tested distinction: HTTP does not encrypt anything; HTTPS does, via TLS/SSL.
CSS angle: Government and banking portals in Pakistan — NADRA, FBR's IRIS, SBP-regulated banking sites — must use HTTPS, and PECA 2016 criminalises unauthorised interception of data in transmission, which is precisely the attack HTTPS defends against.
Q2. What does a browser's rendering engine do?
Ans: The rendering engine (also called the layout engine or browser engine) is the component that converts the raw code downloaded from a web server into the visual page the user sees. Its job is to take HTML, CSS and images and compute exactly what pixels appear where. The process runs in stages:
- Parsing HTML into the DOM (Document Object Model) — a tree of the page's elements.
- Parsing CSS into the CSSOM, the corresponding tree of style rules.
- Combining the two into a render tree of everything that will actually be displayed.
- Layout (reflow) — computing the exact size and position of every box on the page for the current window dimensions.
- Painting and compositing — filling in text, colours, borders and images, layer by layer, onto the screen.
The major engines are Blink (Chrome, Edge since 2020, Opera since 2013), Gecko (Firefox), and WebKit (Safari, and Chrome's original engine before Google forked Blink from it in 2013). The rendering engine is distinct from the JavaScript engine, which executes the page's scripts — V8 in Chrome and Edge, SpiderMonkey in Firefox, JavaScriptCore/Nitro in Safari. Scripts can modify the DOM, which forces the rendering engine to re-run layout and paint.
Why this matters for the exam: the rendering engine determines how a page actually looks and behaves, so two browsers sharing an engine render a page identically, while different engines may differ subtly — which is the origin of cross-browser compatibility testing. Note also the trap: a browser renders content; it does not host or store the website — that is the web server's role.
Q3. Name two well-known web browsers.
Ans: Two of the best-known are Google Chrome and Mozilla Firefox.
- Google Chrome — released in 2008 by Google and built on the open-source Chromium project. It uses the Blink rendering engine (forked from WebKit in 2013) and the V8 JavaScript engine. It is the world's most widely used browser, valued for speed, a vast extension ecosystem via the Chrome Web Store, and cross-device sync through a Google account. Its drawbacks are heavy RAM and battery consumption and privacy concerns arising from Google's advertising business.
- Mozilla Firefox — public 1.0 release in November 2004, developed by the non-profit Mozilla Foundation that emerged after Netscape's decline. It uses the Gecko rendering engine and SpiderMonkey JavaScript engine. It is free, fully open source, and blocks third-party trackers by default. Its drawbacks are a smaller extension library and much smaller market share.
Other major browsers: Apple Safari (2003, WebKit, default on macOS and iOS, exceptionally power-efficient on Apple hardware), Microsoft Edge (2015 on EdgeHTML, rebuilt on Chromium/Blink and re-released in January 2020, pre-installed on Windows), and Opera (1996, Norway, on Blink since 2013). Historically significant are WorldWideWeb/Nexus (1990, Tim Berners-Lee, the first browser), Mosaic (1993, first to show images inline with text), Netscape Navigator (1994) and Internet Explorer (1995).
Q4. Which two browsers mentioned here share the same underlying rendering engine, and why?
Ans: Google Chrome and Microsoft Edge share the same rendering engine — Blink — because in January 2020 Microsoft abandoned its own proprietary EdgeHTML engine and rebuilt Edge on the open-source Chromium project, which uses Blink for rendering and V8 for JavaScript. Opera (since 2013) is a third browser on the same engine.
Microsoft's reasons for the switch were practical:
- Web compatibility. With Chrome dominant, developers tested against Chromium and often did not against EdgeHTML, so sites frequently broke in Edge. Adopting Blink eliminated that class of problem at a stroke.
- Engineering cost. Maintaining an independent rendering engine, which must implement thousands of pages of evolving web standards, is enormously expensive; Chromium is developed collaboratively.
- Extension ecosystem. Chromium compatibility lets Edge run most Chrome extensions directly.
The engine lineage is worth knowing: Apple's WebKit (itself derived from KDE's KHTML) powered the original Safari and the original Chrome; Google forked WebKit into Blink in 2013; Edge and Opera later adopted Blink. Only Firefox (Gecko) and Safari (WebKit) now remain outside the Blink family among major browsers.
Exam point: "different browser" does not mean "different engine." Chrome and Edge look and behave differently in their interface, sync, privacy settings and bundled features, while rendering pages through identical engine code. A related consequence often raised in policy discussion is the concentration risk: with most browsers on one engine, a single project effectively steers how the web is rendered.
Q5. Compare Chrome and Firefox in terms of their approach to user privacy.
Ans: The divergence follows directly from who makes each browser and how each is funded. Google Chrome is built by an advertising company — Google derives the large majority of its revenue from ads — so Chrome's defaults favour data collection: signing in syncs browsing history, bookmarks and passwords to a Google account, usage and crash telemetry is collected, and third-party tracking cookies were historically permitted by default, which is the mechanism behind cross-site behavioural advertising. Mozilla Firefox is made by a non-profit foundation with no advertising business to feed, and it ships Enhanced Tracking Protection enabled by default, blocking known third-party trackers, cross-site cookies, cryptominers and fingerprinting scripts out of the box. Firefox also implements Total Cookie Protection, confining each site's cookies to its own isolated jar so they cannot be used to follow a user across sites.
| Aspect | Google Chrome | Mozilla Firefox |
|---|---|---|
| Developer and funding | Google; advertising-funded | Mozilla Foundation; non-profit |
| Tracker blocking by default | Not by default; requires extensions or settings | Enhanced Tracking Protection on by default |
| Cookie isolation | Limited by default | Total Cookie Protection isolates per site |
| Account sync and telemetry | Tied to Google account; extensive telemetry | Optional Firefox account; minimal telemetry |
| Source transparency | Chromium open source; Chrome adds closed components | Fully open source |
| Private mode | Incognito hides local history only | Private Browsing hides local history and blocks trackers |
Two honest qualifications belong in a good answer. First, incognito/private mode in either browser only prevents local storage of history and cookies — it does not hide activity from the ISP, the employer, the network operator or the websites visited; this is one of the most widespread public misconceptions. Second, Chrome is not devoid of privacy features and continues to phase in restrictions on third-party cookies, while Firefox's stricter defaults occasionally break sites that depend on third-party scripts. The structural point for an exam is that privacy posture follows the business model: a browser whose maker sells advertising has a structural incentive Firefox's non-profit maker does not.