Lecture 23 Web Standards

What today’s lecture is about

How did today’s Web ecosystem come to be?
How are web technologies made?
How could you contribute?

Why do standards matter?
A brief history of the Web

1989 Tim Berners-Lee, a consultant at CERN, adapts IBM Starter Set, a markup language written in SGML, adds <a> and calls it HTML 1.

1989 He submits a proposal to his boss, Mike Sendall, for what became the World Wide Web.

1990 He writes the first browser, WorldWideWeb. It ran on NeXT, a high-end computer with an early GUI.

1991 WorldWideWeb was ahead of its time, with editing and stylesheets but never caught on. Tim released its core as a C library, libwww, which led to a proliferation of browsers.

The first website

1991 Nicola Pellow, an intern at CERN, develops the Line Mode Browser, based on libwww. It became far more popular due to its portability.

The web’s first browser featured full color, read/write capabilities, and multiple windows. The second browser was a text-only command line tool. Guess which one people actually used?
Its simplicity actually gave it an edge. The Line Mode Browser was easy to use (once you got it setup) and more importantly, easy to modify (hack) so that it could be bent to any purpose.
Read more:

1993 CERN releases the Web in the public domain. Possibly the single most impactful decision that allowed the Web to flourish.

1993 Tim founds World Wide Web Consortium (W3C), a global organization to standardize Web technologies fast, and ensure the Web stays open and free for all.

1993 NCSA releases the Mosaic browser, by Marc Andreessen and Eric Bina. Invents <img>, which makes it rise to dominance and popularize the Web beyond academia.

1994 Andreessen graduates, rewrites Mosaic, and starts a company. Netscape Navigator is born. Codenamed “Mozilla” during development.

1994-1996 Its innovations made it rise to dominance. More and more people get on the Web because of Netscape.

Netscape innovations

Javascript
Progressive rendering
Frames
Cookies

1995 Internet browsing began to be seen as a profitable market. Microsoft licenses Mosaic, releases it as Internet Explorer 1.

Internet Explorer innovations

DOM
<iframe>
Ajax (HTTP requests via JS, w/o page reload)
Web fonts
First functional CSS implementation in IE3

DOM Querying in the 90s


			if (document.getElementById) { // W3C
				return document.getElementById(id);
			}
			else if (document.all) { // IE
				return document.all[id];
			}
			else { // Netscape
				return document.layers[id];
			}

The Battle of Styling: CSS vs JSSS

W3C, Microsoft: CSS


				<style type="text/css">
					h1 { color: red; }
					p { font-size: 20pt; }

					h3 {
						color: green;
					}

					h2 {
						color: red;
						font-size: 16pt;
						margin-top: 4cm;
					}
				</style>

Netscape: JSSS

<style type="text/javascript">
		tags.H1.color = "red";
		tags.p.fontSize = "20pt";

		with (tags.H3) {
			color = "green";
		}

		with (tags.H2) {
		    color = "red";
		    fontSize = "16pt";
		    marginTop = "4cm";
		}
	</style>

The Battle of Styling: Outcome

CSS became a W3C standard, implemented by IE
JSSS was only ever implemented in Netscape 4 and removed in 4.8
Netscape 4 rushed to implement CSS via a CSS-to-JSSS converter, so its implementation was notoriously buggy and slow, which contributed to Netscape's demise

1998 The Web Standards Project (WaSP) is funded by prominent web developers to urge browsers to support web standards and be interoperable.

2001 Without competition, IE stagnated. No new version until 2007. IE6, cutting edge in 2001 (!), becomes universally despised by web developers.

Mozilla Firefox and later Google Chrome, take over. They are open source and have far better standards support, both things making web developers willing to campaign for them.

2018 IE plummets, and no amount of new releases, evangelism, and rebranding (as Microsoft Edge) can save it. Eventually Microsoft concedes and announces Edge moving to Chromium.

So what is a web standard, actually?

A standard or specification (“spec”) is a document that describes how a technology should work in precise language

Good specs contain enough detail that multiple parties can use them to implement a technology and end up with interoperable results

Who creates these specs?

Standards Bodies of Internet technologies

TCP/IP: ?

HTTP: ?

HTML: ?

CSS: ?

PNG: ?

SVG: ?

JavaScript Core (ECMAScript): ?

DOM APIs: ?

Often a technology changes hands

HTML 1:: No spec
HTML 2:
HTML 3.2, 4:
HTML 5, 5.1, 5.2:: and
HTML Living Standard:

As we discussed in the HTML lecture, IETF rejected HTML 3 as too ambitious and closed its HTML WG, so HTML moved to W3C.
W3C's insistence on the theoretical purity and rigidity of XHTML 2 gave rise to WHATWG, a coalition of browser makers, with the goal of developing HTML pragmatically and “paving the cowpaths”
HTML 5 was developed by both W3C and WHATWG, with two somewhat incompatible specs, one copying the other, and hostility.
W3C and WHATWG continue to work on HTML 5 independently, often diverging. Browsers follow the WHATWG spec.
On 28 May 2019, the W3C announces that WHATWG would be the sole publisher of the HTML and DOM standards.

Standards Bodies of Internet technologies

Internet Infrastructure, e.g. TCP/IP, gzip, IPv6, HTTP

Founded in 1994 by Tim Berners-Lee
CSS, SVG, HTML (in the past), DOM (in the past), many JS APIs, WCAG

WHATWG

Founded in 2004 as a reaction to W3C focusing on theoretical purity.
HTML, DOM, URL, Fetch

Javascript core (ECMAScript)
Netscape took JS there after W3C rejected it

Ok, but who actually writes these documents?

Working Groups (WGs)

Specs are typically the collaborative work of Working Groups, groups of stakeholders
These stakeholders can be:
- Big internet company representatives
- Independent invited experts
- Standards body staff to coordinate the process
A few WG members are spec editors, responsible for serializing the group's consensus into specification prose.

A W3C Working Group

Member companies
- Browser vendors Microsoft, Google, Mozilla, Opera, Apple…
- Big websites Facebook, Twitter…
- Others Adobe, Intel, IBM, HP, Nokia, CERN…
Invited Experts
W3C staff

CSS Working Group

Source:

TC39

Source: (570 delegates total; IEs and Ecma secretariat counted from recent meeting attendee tables, remainder inferred as member-company representatives)

WG collaboration

Day-to-day: Github Issues or mailing list Public
Weekly or biweekly: Telcons Public minutes
≤ Quarterly: F2F meetings Public minutes

How does a spec come into existence?

Standards are like sausages, it’s better not to see them being made.

💡

It all begins with an idea, the proposal

There’s a healthy debate

Possible outcomes

Accepted
Rejected
Forgotten

Once the WG accepts work to begin, the editor(s) begin iterating on a draft

Proposal vs Spec Draft

A proposal is an idea, it can be vague or defined based on the experience of its author
A spec draft precisely describes the syntax and semantics using formal spec language.

Spec maturity levels (W3C)

Editor’s Draft (ED): Rough ideas
Working Draft (WD): The WG as a whole has agreed to work on the spec, roughly as scoped out in the ED. Multiple iterations take it from First Public Working Draft (FPWD) to Last Call Working Draft (LCWD)
Candidate Recommendation (CR): The spec is ready to be tested. At least 2 interoperable implementations required to advance.
Proposed Recommendation (PR): Waiting for Advisory Committee approval
Recommendation (REC): Completed state, maintainance phase. Only errata after this point.

Strawperson (Stage 0): A new proposal, not yet considered.
Proposal (Stage 1): The committee is willing to explore the problem space. Requires a champion and public repo.
Draft (Stage 2): Preferred solution chosen. Initial spec text exists but may change significantly.
Candidate (Stage 2.7): Approved in principle. Spec text complete and signed off. Awaiting tests and implementations.
Stage 3: Recommended for implementation. Changes only from web compat or implementation feedback.
Finished (Stage 4): Two implementations passing Test262, plus shipping experience. Merged into the standard.

Source:

Testing is an essential part of the spec process. It ensures implementability.

A simple reftest


		body {
			background: red;
			background: conic-gradient(green, green)
		}

Doesn’t support conic-gradient()

Supports conic-gradient()

Implementations are to specifications what practice is to theory

Ideal process: Specification is drafted with input from the entire WG, then implementations start when it's mature
In practice, it often doesn't work this way!

Sometimes, implementations come first…

…and a specification is drafted later to make the tech interoperable
Discouraged as it tends to result in less usable or otherwise problematic APIs (why?)
Examples: XMLHttpRequest, Drag & Drop API, contentEditable

Case study: CSS gradients

Browser-first syntax

Internet Explorer


			filter: progid:DXImageTransform.Microsoft.gradient(
				startColorstr='white', endColorstr='black',
				GradientType=0);

Apple Safari


			background: -webkit-gradient(
				linear, left top, left bottom,
				color-stop(0%, white), color-stop(100%, black));

Case study: CSS gradients

Standards-first syntax


		background: linear-gradient(to bottom, white, black);

Browser developers are not designers. Most don’t use the web technologies they implement. They write C++, not CSS.

Backwards Compatibility
How the Web platform gets stuck with crap features

Sometimes, implementations come too early…

Often we see implementations of early drafts which need to change later, creating backwards compatibility issues or lock-in
Examples: CSS Grid, Web Audio, CSS gradients

Sometimes, implementations just never happen

“Lack of implementor interest” is where many great specs go to die
Browsers are tough, resource-constrained software projects.
If you peruse specs you will find many exciting ideas, then get disappointed they are not supported anywhere (yet?)
Sometimes compormises are needed to create implementor interest
Examples: XHTML 2

A spec with no implementations is a meaningless document

How do I find which specs define a web technology?

Are WGs open for contributions from the public?

Most web standardization is transparent

Open process
Standards are free to read
Outside contributions are welcome (in fact, that’s how one becomes an Invited Expert!)

Writing a proposal

Focus on the problem, not your solution.
Find as many use cases as you can. Features are only added if there are enough use cases, never for philosophical completeness.
Research existing proposals
Not necessary, but improves odds:
- Illustrate how it should work, especially if visual
- Implement the feature in Javascript (polyfill)

Priority of Constituencies

Theory:

User needs come before the needs of web page authors, which come before the needs of user agent implementors, which come before the needs of specification writers, which come before theoretical purity.
— Web Platform Design Principles

(Basically consumers > producers)

More aspirational in practice

Case study: Conic gradients

Implementability

Gradients are typically sent to the underlying graphics library after color stops are processed
Each browser uses a different one, often different per OS
At the time some supported conic gradients, or mesh gradients (which can be used to draw conic gradients), some did not.
This blocked conic gradients for a few years 😞

Then one day in 2017, I got an email…

🎉🥳🎊

Parity

Once Chrome implemented, other browsers were more motivated to.
Safari followed suit soon after.
Firefox was last, implemented in 2020.

Takeaways

Standards take a long time to get implemented; often several years
Implementor interest is not enough; specs also need to be implementable
Evangelism really helps; browsers prioritize what developers ask for
It's rarely enough to propose a feature and move on. It needs someone to push it forwards for a while.

What today’s lecture is about

1989 Tim Berners-Lee, a consultant at CERN, adapts IBM Starter Set, a markup language written in SGML, adds <a> and calls it HTML 1.

1989 He submits a proposal to his boss, Mike Sendall, for what became the World Wide Web.

1990 He writes the first browser, WorldWideWeb. It ran on NeXT, a high-end computer with an early GUI.

1991 WorldWideWeb was ahead of its time, with editing and stylesheets but never caught on. Tim released its core as a C library, libwww, which led to a proliferation of browsers.

The first website

1991 Nicola Pellow, an intern at CERN, develops the Line Mode Browser, based on libwww. It became far more popular due to its portability.

1993 CERN releases the Web in the public domain. Possibly the single most impactful decision that allowed the Web to flourish.

1993 Tim founds World Wide Web Consortium (W3C), a global organization to standardize Web technologies fast, and ensure the Web stays open and free for all.

1993 NCSA releases the Mosaic browser, by Marc Andreessen and Eric Bina. Invents <img>, which makes it rise to dominance and popularize the Web beyond academia.

1994 Andreessen graduates, rewrites Mosaic, and starts a company. Netscape Navigator is born. Codenamed “Mozilla” during development.

1994-1996 Its innovations made it rise to dominance. More and more people get on the Web because of Netscape.

Netscape innovations

1995 Internet browsing began to be seen as a profitable market. Microsoft licenses Mosaic, releases it as Internet Explorer 1.

Internet Explorer innovations

1995 The Browser Wars begin. Browsers “innovate” overnight, release incompatible features with little thought, without bringing them to W3C for standardization. Web developers suffer.

DOM Querying in the 90s

The Battle of Styling: CSS vs JSSS

W3C, Microsoft: CSS

Netscape: JSSS

The Battle of Styling: Outcome

1998 The Web Standards Project (WaSP) is funded by prominent web developers to urge browsers to support web standards and be interoperable.

1998 Netscape declines, unable to keep up with IE being bundled with Windows. Open sources its code in 1998 right before being bought by AOL. It will rise again, as Mozilla Firefox.

2001 Without competition, IE stagnated. No new version until 2007. IE6, cutting edge in 2001 (!), becomes universally despised by web developers.

Mozilla Firefox and later Google Chrome, take over. They are open source and have far better standards support, both things making web developers willing to campaign for them.

2018 IE plummets, and no amount of new releases, evangelism, and rebranding (as Microsoft Edge) can save it. Eventually Microsoft concedes and announces Edge moving to Chromium.

So what is a web standard, actually?

A standard or specification (“spec”) is a document that describes how a technology should work in precise language

Good specs contain enough detail that multiple parties can use them to implement a technology and end up with interoperable results

Who creates these specs?

Standards Bodies of Internet technologies

Often a technology changes hands

Standards Bodies of Internet technologies

Ok, but who actually writes these documents?

Working Groups (WGs)

A W3C Working Group

CSS Working Group

TC39

WG collaboration

How does a spec come into existence?

It all begins with an idea, the proposal

There’s a healthy debate

Possible outcomes

Once the WG accepts work to begin, the editor(s) begin iterating on a draft

Proposal vs Spec Draft

Spec maturity levels (W3C)

Spec maturity levels (TC39)

Testing is an essential part of the spec process. It ensures implementability.

A simple reftest

Implementations are to specifications what practice is to theory

Ideal process: Specification is drafted with input from the entire WG, then implementations start when it's mature In practice, it often doesn't work this way!

Sometimes, implementations come first…

Internet Explorer

Apple Safari

Browser developers are not designers. Most don’t use the web technologies they implement. They write C++, not CSS.

Sometimes, implementations come too early…

Sometimes, implementations just never happen

A spec with no implementations is a meaningless document

How do I find which specs define a web technology?

Are WGs open for contributions from the public?

Most web standardization is transparent

Writing a proposal

Priority of Constituencies

Implementability

Then one day in 2017, I got an email…

Parity

Takeaways

Ideal process: Specification is drafted with input from the entire WG, then implementations start when it's mature
In practice, it often doesn't work this way!