CSS 2017 Highlights

CSS 2017 Highlights

by Florian RIVOAL (@frivoal)

Slides at florian.rivoal.net/talks/css2017/

CSS WG: a broad scope

TR documents: https://www.w3.org/Style/CSS/current-work
Editor Drafts: https://drafts.csswg.org/

The CSS Snapshot

[...] includes only specifications that we consider stable and for which we have enough implementation experience that we are sure of that stability.

https://www.w3.org/TR/CSS/

Writing Modes

Writing modes: i18n victory

ᠮᠣᠩᠭᠣᠯ ᠺᠡᠯᠡ (Mongolian)
ᠮᠠᠨᠵᡠ ᡤᡳᠰᡠᠨ (Manchu)
ꆈꌠꁱꂷ (Yi)
日本語（Japanese）
中文、简体（Simplified Chinese）
中文、繁体（Traditional Chinese）
한국어 (Korean)

Writing modes: also for Latin text

logo using mixed writing modes
Credit: Jen Simmons
Table with column headers set vertically to save space

Writing modes: untangling directions

In horizontal text, the inline direction is horizontal, the block direction is vertical and downwards, and the line orientation is vertical and upwards In vertical-rl text, the inline direction is vertical, the block direction is horizontal and leftwards, and the line orientation is horizontal and righwards In vertical-lr text, the inline direction is vertical, the block direction is horizontal and rightwards, and the line orientation is horizontal and righwards

Writing modes: status

Caniuse.com reports that writing modes is supported in all major browsers

Logical Properties

inline-start, inline-end, block-start, block-end
V.S.
left, right, top, bottom

More power
Fewer hacks
Cleaner markup

A History of layout on the Web

Classic designs

The so-called holygrail layout has a header, a footer, and in between a main section flanked on each side by side bars, typicaly for ads or navigation. The main section and the sidebards have the same height, regardless of which has more content.
A very common design nowadays has a giant top image banner with overlay text, and a long column of content below it, separated into panes, many of wich have content split into 3 columns.
Credit: Dave Ellis

“Holy grail” layout with Grid, markup

<body>
  <header>Header</header>
  <main>Lorem Ipsum…</main>
  <nav>Navigation</nav>
  <aside>Commercials</aside>
  <footer>Footer</footer>
</body>

“Holy grail” layout with Grid, CSS

body {
	display: grid;
	grid: "head head head" 3em
	      "nav  main ads"
	      "foot foot foot" 2em
	     / 1fr  auto 1fr;
	min-height: 100vh;
}
header { grid-area: head }
footer { grid-area: foot }
main   { grid-area: main }
nav    { grid-area: nav }
aside   { grid-area: ads }
This is all you need to get the holygrail layou

Grid & Media queries

@media (width<24em) { body {
	grid-template:
		"head head" 3em
		"nav  main" 2fr
		"ads  main" 1fr
		"foot foot" 2em
		/ 1fr auto }}
@media (width<18em) { body {
	display: block }}
A variant of the layout, on two columns, for narrower screens a simple one-column layout for very narrow screens

CSS Grid Zoo

Jen Simmons has made lots of cool demos. Look them up.

CSS Grid: status

Caniuse.com reports that CSS Grid shipped almost simultaneously in Firefox, Chrome, Safari and Opera both on desktop and mobile. IE & Edge have been shipping an earlier version for a while

CSS Grid: Special Thanks

To learn more about Grid

Fewer hacks
Cleaner markup
—
part 2

display: contents

Suppress a box while keeping its descendants 

<main>
	<h1>foo</h1>
	<ul><li>bar<li>baz</ul>
</main>
main { display: flex }
main * { flex: 1 }
Result of laying out the previous code: bar and baz are stacked 

ul { display: contents }
Result of laying out the previous code: bar and baz are stacked

display: content: status

Caniuse.com reports that display: contents is supported in Firefox, coming soon in Safari, and in Chrome behind a flag.

Spec: Preparing for CR

Fewer hacks
—
part 3

Float clearing problem

Too much margin collapsing

  • What’s margin collapsing?

    • flow-root: status

    Caniuse.com reports that flow-root modes is coming soon to Firefox, Chrome, and Opera

    Spec: Preparing for CR

    Side note
    —
    TT-WG

    • TTML: technology for subtitles (mainly)
    • Working with the CSS-WG to reduce the gap with the CSS layout model
    • TT-WG is prioritizing CSS features for Japanese: writing modes, Tate-chu-yoko, ruby, emphasis marks, slanted text
    ルビーを使う字幕の例 傍点を使う字幕の例 斜体を使う字幕の例 縦書きを使う字幕の例

    Thank you for listening

    Slides at florian.rivoal.net/talks/css2017/