CSS and Standards at the W3C

Who am I?

Florian Rivoal

• “Invited Expert” in the CSS Working group
• Elected Member of the W3C’s Advisory Board
• Consultant/Contractor working w/ Bloomberg

  my focus is on specifications and tests

• Collaboration w/ Igalia

  their focus is on implementation

Web Standards at W3C

W3C

• Membership based organisation
• Place to meet and discuss
• Provides support / tools / expertise
• Sets the rules for standards development
• Mechanisms for arbitration
• Does NOT dictate the outcome: content of standards is member-driven

Web Standards

• Describe (in detail) how the web works
• Interoperability between multiple implementations (typically browsers)
• Enable new implementations
• Big new ideas…
• …Fiddly details…
• …and everything in between

Notable characteristics (1/2)

• open

  Anybody can contribute

• voluntary

  Nobody can be forced to implement anything

• consensus

  Decision by discussion and compromise, not by voting

• “wide review”:
  • public
  • internationalization (i18n)
  • accessibility (a11y)
  • privacy & security
  • Technical Architecture Group (TAG)

Notable characteristics (2/2)

• royalty free

  Specification text: liberal copyright license

  Royalty free patent regime

• implementation required

  no “specifiction”

• independent implementations required

  proves the design and its description

• testing

  actual interoperability

Life cycle of a specification

The CSS Working Group

• Largest Working Group in W3C
• 158 participants (including 14 Invited Experts) representing 33 organizations
• Handles ≈130 specifications,
  such as:
  • css-color
  • css-ui
  • css-grid
  • css-multicol
  • css-scroll-snap
  • css-contain
  • css-pseudo
  • css-text
  • css-overflow
  • and many more

How to work with the CSS-WG

• file issues in GitHub
• discuss them in GitHub / in teleconfs / F2F…
• come to group consensus (may involve extra research, negotiations…)
• make some edits to the spec
• write some tests
• repeat

Examples of past projects

New pseudo-class

<div class=container>
	<button>Click me!</button>
	<input>
</div>
	

.container:focus-within {
	background: yellow;
}
	

New pseudo-element

ol li::marker {
	color: red;
}
ol li:nth-of-type(2n)::marker {
	font-size: 200%;
}
	

1. Lorem
2. ipsum
3. dolor
4. si
5. amet

New behavior

.scroller > * {
	scroll-snap-align: center;
}
.scroller {
	overflow: scroll;
	scroll-snap-type: x mandatory;
}
	

UI Details

input {
	caret-color: orange;
}
	

New layout mode

#container {
  display: grid;
  grid-template-columns: max-content auto max-content;
}
label { grid-column: 1; } input { grid-column: 2; }
#dpt {
  grid-column: 3;
  grid-row: 1 / span 3;
}
#btns { grid-column: 2 / span 2; }

Performance boost

• contain: strict
• replaces bb-set-data-no-relayout("text");
• Avoids unnecessary relayouts

Fine-tuned line breaking

• Fully define interaction between white-space, line-break, word-break, overflow-wrap
• Control whether to wrap end-of-line spaces or not
• Enable "command-line" style line breaking
• Handles nuances of CJK spaces, BiDi

New and up-coming CSS features

• More than 130 specifications
• Around 600 properties and descriptors
• Cannot cover everything
• Subjective flyby

Grouping topics by area

• Syntax and language features
• UI and Interaction
• Layout
• Animations & Transitions
• Typography

Syntax and language features

:has()

• a:has(> img) { … }
• h1:has(+ h2) { … }
• section:not(:has(h1, h2, h3, h4, h5, h6)) { … }

Container Queries

Like media-queries, but for part of the document

main { display: grid; }
#component {
	grid: 2 / 3;
	container: my-layout / inline-size;
}
@container my-layout (inline-size > 45em) {
	#component .foobar { font-size: 150%; }
}

Cascade Origins

Cascade Layers

Why Cascade Layers

UI & Interaction

Accent Color

• input { accent-color: orange; }

Scrollbar control

.container {
	scrollbar-color: orange blue;
	scrollbar-width: thin;
}

Caret Control

#old-screen {
	caret: block manual;
	animation: old-caret 2s infinite;
}
@keyframes old-caret {
	from, 50% { caret-color: green; }
	75%, to { caret-color: transparent; }
}

Layout

Sub-grid

Grid layout through nested structures

Masonry Layout

Evolution of line-clamp (1)

line-clamp allows authors to suppress
the text after a certain number of lines o…

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

Evolution of line-clamp (2)

line-clamp allows authors to suppress
the text after a certain number of lines…

p {
  line-clamp: 2;
}

p {
  line-clamp: 2;
  block-ellipsis: "…";
}

Evolution of line-clamp (3)

line-clamp allows authors to suppress
the text after a certain (continued)

p {
  line-clamp: 2;
  block-ellipsis: "(continued)";
}

p {
  continue: discard;
  max-lines: 2;
  block-ellipsis: "(continued)
}

Beyond line-clamp

article { continue: fragments; }
article:nth-fragment(1) {
	max-lines: 3;
	font-size: 1.5em;
}
article:nth-fragment(2) {
	columns: 3;
}

Anchor positioning

.anchor {
  anchor-name: --tooltip;
}
.tooltip {
  position: fixed;
  bottom: anchor(--tooltip, outside);
  /* sizing */
}

Animations & Transitions

View Transitions

Typography

Balanced Wrapping

text-wrap: balance

CJK typography

• text-autospace: ideograph-alpha;
• text-spacing-trim: auto-trim;
• word-break: auto-phrase;

Line Trimming

text-box-edge: cap alphabetic;
textbox-trim: both;