Bert Bos | Why standards? + CSS topics

Why standards? & current CSS topics

Open Web Platform

Some notes on standards,
W3C process and
Web document design + current issues for CSS

Bert Bos (W3C) <bert@‌w3.org>

Canberra, Australia
4 February 2016

About me (1/2)

I work at W3C:

About me (2/2)

I am a member of the W3C team:

Part 1: Why use standards?

Why use standards?


Why use standards?

Why use W3C standards?

Open Web Platform

Why build on the OWP?

Maybe not the most elegant application environment, but investment in it is not likely to become obsolete, when, e.g., a certain device or platform disappears.

The same HTML, CSS, PNG, SVG, APIs, etc. are used for Web pages/applications viewed in browsers and applications in cameras, TVs, e-book readers or smart watches.

Good Web design

My personal(!) priorities:

Details below…

Readable without CSS, JS & cookies

(Test with lynx, w3m, or with CSS turned off)

Design for small screens,
but don't waste space

If it's readable on a small screen, e.g.,

it will be readable on a big one.

But you can add Media Queries to use more space if available

Don't waste space!

@media all and (min-width: 50em) {...}

It may be hard to predict what a user expects when he makes his window full-screen, but he probably wants to see more of the page at the same time, i.e., avoid scrolling. If the page is essentially a single flow of text, you can put it in columns (usually not a good idea on a scrolled display) or make the lines longer. Longer lines are harder to read, but maybe you should still let the user that freedom.

E.g., here is a page from the DTO Web site.

Keep the CSS small

Many “CSS Frameworks” are very big, do you need hundreds of KB of CSS?

My experience: 10 KB enough for a complex style; simple pages need just a handful of style rules

Don't “minify”! Let other people read, override and steal your styles!

Use shorthand properties (also makes it future-proof: if new, related features are added, the shorthand is likely to set them correctly automatically)

Apply WCAG

This slide cannot replace reading WCAG!

W3C process

Instrument Goal Participation Effort Staff support
Community Group Forum, white papers, or prep. for WG Everybody Low (e-mail) No support
Business Group Forum, white papers, or prep. for WG Everybody, annual fee Low (e-mail) Staff support
IG Forum, W3C Notes, support WGs W3C Member Medium (e-mail, telcons) Staff support
WG Standards (W3C Recommendations) W3C Member High (e-mail, telcons, ftf) Staff support

Participating in a WG may take up to 8 hours a week (averaged over the year, i.e., including ftf meetings), especially if you are editor of one or more specifications or chairing the group.

Standards development

[image: the path from member-only
    draft to public Recommendation represented as a snakes-and-ladders

A typical Working Group

Part 2: Current topics in CSS

Current topics in CSS

A look at CSS

A selection of current topics in the CSS WG:

Round displays

Everything in CSS based on rectangular boxes… sofar

New non-rectangular displays, in particular round ones (watches)

Round display examples

Two images of a round display with the `scrollbar' along the edge in two different positions

Round display examples

Photo of a wrist with a watch displaying some icons and text

Round display examples

Round display with fisheye effect: middle text is bigger

Round display examples

A watch with a round OLED display (LG G Watch R)

Visual order and navigation

Problem existed already with floats

Reordering is now even easier with Flexbox

Navigating without the visual style applied: logical order

Navigating after the visual style is applied: visual order? or not?

Paginated displays

Paged display of documents

Several devices and applications:

Digital publishing

CSS WG getting help from Digital Publishing IG

(Of course, Digital Publishing involves more than just layout: metadata, process, offline reading (EPUB), etc.)

Features for paginated displays

Low-level APIs: Houdini

JS access to internals of browser engines:

Houdini was famous for escaping out of boxes. Developers using the CSS Houdini APIs will likewise be able to escape out of the traditional CSS box model.

Also, Houdini was part of a group of people trying to show that magic doesn't exist. Whatever people believed was magic, he could show to have a rational explication, just like his “magic” tricks. The Houdini APIs are meant to show that CSS isn't magic either. It involves a number of algorithms doing specific things, and the APIs will expose them.

Houdini goals

Should eventually allow to replace/enhance:

Two main goals:

  1. Allow (advanced) programmers to manipulate the rendering without requiring the browser to go through a complete cycle of parsing, cascading, inheritance, layout and rendering after the script changed something
  2. Allow extensions to what is possible with CSS.

The end



To Lead the Web to its full potential

To Anticipate the Trends

To Increase your company value

Join W3C


or contact: Armin Haller or Priscilla Kan John

Bert Bos <bert@w3.org>
GPG fingerprint: 7744 0204 52A5 14D9 147D
2A13 2D7A E420 184B 5BA4