“If you don’t know where you’ve come from, how will you appreciate where you’re going?”
–Shashi Tharoor

Basic building blocks of the web

HTML (Hypertext Markup Language)

Information Management: A Proposal by Sir Tim Berners-Lee

CSS (Cascading Style Sheets)ss

Cascading HTML style sheets -- a proposal by Håkon Wium Lie

The story of CSS started in 1994. You see, the web started to become more popular as a publication medium, but there was no good way to style documents at the time. Håkon Wium Lie saw a need to have a stylesheet language for the web, and presented his proposal for CSS at the 2nd International World Wide Web conference in Chicago.

Stylesheets in browsers were not a new idea, as separation of document structure from presentation had been a goal of HTML since the beginning. Sir Tim Berners-Lee wrote his NeXT browser/editor to support use of a simple style sheet to determine document styles.

But he decided to let browsers decide for themselves how to best display pages to their users. A very laissez-faire approach. So users of the web did what users do best. Complain. Largely about how they couldn't control how their pages looked.

Javascript

The Origin of Javascript with Brendan Eich on the Javascript Jabber podcast

Mozilla brings Microsoft, Google, the W3C, Samsung together to create cross-browser documentation on MDN

Browser vendors and W3C working together

Blue Beanie Day

November 30

“Web standards play an important role when it comes to web accessibility. It is important that websites can be displayed with any browser.”

...said WaSP to Microsoft and Netscape

“The problem lies with designers and developers chained to the browser–quirk–oriented markup of the 1990s—often because they don’t realise it is possible to support current standards while accommodating old browsers.”
—WaSP (Web Standards Project)

👐 ➡ ✨

Physical media

👐 ➡ 💻 ➡ ✨

Digital media

A new normal for the web

and many more...

Embrace feature queries

.selector {
  /* Styles that are supported in old browsers */
}

@supports (property:value) {
  .selector {
    /* Styles for browsers that support the specified property */
  }
}

As builders for the web, we need to adapt to the evergreen browser model where features and bug fixes get shipped rapidly, so we layer on different styles and looks that are not browser-specific, but rather, feature-specific.

Feature queries are a fantastic addition to our toolbox, because they allow us to perform this layering natively, without resorting to extraneous code libraries. If you had to write extra code to make the website look exactly the same on every browser, you could write less code and have designs that work well on browsers with different levels of feature support.

I've come to the realisation that designing layouts on the web requires interpolative thinking, on multiple levels. We don't just think in one fixed dimension, we get to think about how our design will morph on a narrow screen, or on an older browser, in addition to how it will appear on a browser with the latest features.

There is no other medium that let's us do this. How great is that? To me, our medium is really something special.

I reuse this example all the time, so maybe you've already seen this before, but the point I'm trying to make here is that, we need to move away from the idea that a site or page needs to look the same on every browser.

CSS shapes is one of my favourite properties. You know I'm a CSS nerd because I actually can rank CSS properties based on personal preference. But anyway, CSS shapes is one of those properties with rather uneven support. And hence a great candidate for feature queries.

IE11, and any older browser that does not support feature queries, will still get styled, so the content can be comfortably consumed. A newer browser like Firefox, which does not support CSS shapes yet, gets the visual treatment in the middle, but once CSS shapes ships, it will automatically look like the design on the right. Current Chrome users see that now, because CSS shapes has been in Chrome for a while already.

We do not have to go back and change our code every time the browser updates itself. In a way, it is now much safer than before to use cutting edge CSS in your projects, without having to worry that things will be broken on older browsers.

“CSS isn't a programming language. It's a stylesheet language. We shouldn't expect it to behave like a programming language. It has its own unique landscape and structures, ones that people with programming language mental maps might not expect.”
—Danielle Huntrods

“The hardest part is changing our thinking, not our CSS.”
—Jen Simmons

We can always recreate the same old boring layouts that we've always built with these new powerful tools at our disposal. Or we can draw inspiration from graphic design and print magazines, from film, even architecture. These sources that inspire designs which, only a year before, I was saying could not be built. They couldn’t be built before, but they can be now.

Some of you be thinking, why am I asking you to reinvent the wheel? Aren't we supposed to be building things faster, with less effort, ship ship ship! I don’t support that view. Here's my counter-question, is the wheel still relevant when you’re no longer on land? The web is a unique medium altogether. Maybe we ought to be thinking about wings instead.

It’s not that I want things to take forever to build, but I still maintain a moderately romantic view of craftsmanship. Like the potter who works and shapes his clay by hand, like the sculptor who chisels his marble with the precision of a surgeon, I would like to direct my browser like a conductor does his orchestra.

Shape the web we use and build for

CSS specifications are all on GitHub
Raising browser bugs can and does make a difference
Write and talk about CSS features
Browser developers are people too, provide feedback and be nice about it.

To me, the magic of the web is the process by which the web evolves. The web was meant to be an open platform. One where new features can be proposed and discussed by the community before being implemented into browsers.

And so, I want to encourage all of you to participate in shaping the web platform. You may think your voice is just a drop in the ocean, but it is not, it is significant. All the CSS working drafts are hosted on GitHub and we are free to raise issues for clarification or even submit pull requests if we spot any errors.

Raising browser bugs sends a signal to browser vendors that certain features are in use, prompting them to fix those bugs sooner rather than later. Conversely, if we don't use a feature simply because it is buggy, browser vendors would think that feature is not in demand and prioritise something else instead.

Writing and talking about certain CSS features provides visibility and feedback to browser vendors and specification writers as well. But regardless of platform, remember that browser engineers and specification writers are human too, and we all have feelings. So be kind, the world needs more kindness. And it is only through our collective effort, that we can make the web a better place for everyone.

Relevant resources

Raggett, D., Lam, J., Alexander, I., & Kmiec, M. (1998). Raggett on HTML 4. Harlow: Addison-Wesley.
Lie, H. W., & Bos, B. (2007). Cascading style sheets designing for the Web. Harlow: Addison-Wesley.
Zeldman, J., & Marcotte, E. (2010). Designing with Web standards. Berkeley, CA: New Riders.
A Brief History of JavaScript
Three challenges for the web, according to its inventor
Blue Beanie Day
Mozilla brings Microsoft, Google, the W3C, Samsung together to create cross-browser documentation on MDN
Cascading Web Design with Feature Queries
Modern Layouts: Getting Out of Our Ruts by Jen Simmons—An Event Apart video
There are maps for these territories

Thank you!

https://www.chenhuijing.com

@hj_chen

@huijing

❤️ the web for what it is