Coming soon to CSS
Rachel Andrew

Slides & resources https://noti.st/rachelandrew

Gaps for everyone

Slides & resources https://noti.st/rachelandrew

The gap properties
gap, row-gap, column-gap

Slides & resources https://noti.st/rachelandrew

.flex {display: flex;
margin: 0 -10px;}.flex > * {flex: 1 1 auto;
margin: 0 10px;}

Slides & resources https://noti.st/rachelandrew

.flex {display: flex;
gap: 20px;}.flex > * {flex: 1 1 auto;}

Slides & resources https://noti.st/rachelandrew

What happened togrid-gap?

Slides & resources https://noti.st/rachelandrew

Box alignment
The specification for alignment and space distribution
across all layout methods.

Slides & resources https://noti.st/rachelandrew

The grid- properties aremaintained as aliases.

Slides & resources https://noti.st/rachelandrew

Slides & resources https://noti.st/rachelandrew

Can we detect Flexbox gap
support with Feature Queries?

Slides & resources https://noti.st/rachelandrew

@supports (display: grid) {.grid {/* grid things here */}}Slides & resources https://noti.st/rachelandrew

@supports (gap: 20px) {.flex {/* matches due to support
for gap in grid. */}}Slides & resources https://noti.st/rachelandrewAspect Ratios

Slides & resources https://noti.st/rachelandrew

Slides & resources https://noti.st/rachelandrew

The aspect-ratio property
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

Slides & resources https://noti.st/rachelandrew

.grid {display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));}.grid > * {aspect-ratio: 1 / 1;
transform: rotate(0.1turn);}

Slides & resources https://noti.st/rachelandrew

Slides & resources https://noti.st/rachelandrew

Internal mapping
Modern browsers use the width & height attributes tointernally map image aspect ratios to prevent loading shifts.

Slides & resources https://noti.st/rachelandrew

Masonry in CSS

Slides & resources https://noti.st/rachelandrew

Slides & resources https://noti.st/rachelandrew

.masonry {display: grid;
gap: 20px;
grid: masonry / repeat(auto-fill, minmax(250px, 1fr));}

Slides & resources https://noti.st/rachelandrew

Does masonry belong inthe CSS Grid Spec?
https://rachelandrew.co.uk/archives/2020/05/05/does-masonry-belong-in-the-css-grid-specification/

Slides & resources https://noti.st/rachelandrew

Subgrid

Slides & resources https://noti.st/rachelandrew

Subgrid examples
https://gridbyexample.com/examples/#css-grid-level-2-examples

Slides & resources https://noti.st/rachelandrew

… a team at Microsoft Edge are working on
rearchitecting Chromium's Grid support to use
the new LayoutNG engine - and as part of thisare intending to add subgrid support!

Slides & resources https://noti.st/rachelandrew

prefers_reduced_data

Slides & resources https://noti.st/rachelandrew

@media (prefers-reduced-data: no-preference) {.hero {/* download large image */}}Slides & resources https://noti.st/rachelandrew

Slides & resources https://noti.st/rachelandrew

User preference mediafeatures
Part of Media Queries Level 5

Slides & resources https://noti.st/rachelandrew

::marker

Slides & resources https://noti.st/rachelandrewli:first-child {background-color: rgb(74, 112, 122);
color: #fff;}
li:first-child::marker {color: black;}

Slides & resources https://noti.st/rachelandrew

Slides & resources https://noti.st/rachelandrew

h1 {display: list-item;}
h1::marker {content: "🥦🥦";}Slides & resources https://noti.st/rachelandrew

Slides & resources https://noti.st/rachelandrew

leading-trim
Losing the extra spacing around text.

Slides & resources https://noti.st/rachelandrewh1 {}

text-edge: cap alphabetic;
leading-trim: both;

Slides & resources https://noti.st/rachelandrew

https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202
Slides & resources https://noti.st/rachelandrew

Anyone can contribute tospecifications
You don’t need to be an Invited Expert or representative.

Slides & resources https://noti.st/rachelandrew

Read and comment onspecification issues
https://github.com/w3c/csswg-drafts/issues

Slides & resources https://noti.st/rachelandrew

Slides & resources https://noti.st/rachelandrew

Show use cases
As with any software development, real use cases are valuable.

Slides & resources https://noti.st/rachelandrew

Contribute examples anddiagrams to specifications

Slides & resources https://noti.st/rachelandrew

Slides & resources https://noti.st/rachelandrew

Slides & resources https://noti.st/rachelandrew

WICG Discourse
https://discourse.wicg.io/Slides & resources https://noti.st/rachelandrew

It will probably take longer
than you think for changes
to be made!
Patience is required for web platform contributions.

Slides & resources https://noti.st/rachelandrew

Raise browser bugs
Fix bugs, or request that features are implemented.

Slides & resources https://noti.st/rachelandrew

Learn to create aReduced Test Case

Slides & resources https://noti.st/rachelandrew

Slides & resources https://noti.st/rachelandrew

Test and offer feedback
on features behind flags.
This is the best time to make changes to a spec.

Slides & resources https://noti.st/rachelandrew

Slides & resources https://noti.st/rachelandrew

Web Platform Tests
Help us test the web platform

Slides & resources https://noti.st/rachelandrew

Slides & resources https://noti.st/rachelandrew

Many people who work on
CSS started by writing tests.

Slides & resources https://noti.st/rachelandrew

Comment on spec issues, raise newissues, contribute examples, raisebrowser bugs, write tests.

Slides & resources https://noti.st/rachelandrewThank you!

Slides & resources https://noti.st/rachelandrew