Coming soon to CSS

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 to grid-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 are maintained 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

::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

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 to internally map image aspect ratios to prevent loading shifts. Slides & resources https://noti.st/rachelandrew

New color functions color-mix() and color-contrast() Slides & resources https://noti.st/rachelandrew

li { background-color: color-mix(in srgb, #34c9eb 10%, white); } Slides & resources https://noti.st/rachelandrew

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

li { background-color: color-contrast(#008080 vs olive, var(—mycolor, #d2691e)); } Slides & resources https://noti.st/rachelandrew

Masonry in CSS CSS Grid Level 3! Slides & resources https://noti.st/rachelandrew

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

.container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: masonry; } Slides & resources https://noti.st/rachelandrew

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

Use Firefox Nightly Enable: layout.css.grid-template-masonry-value.enabled Slides & resources https://noti.st/rachelandrew

https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/ 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 this are intending to add subgrid support! Slides & resources https://noti.st/rachelandrew

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

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 media features Part of Media Queries Level 5 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

Solving font layout shifts size-adjust, ascent-override, descent-override, line-gap-override Slides & resources https://noti.st/rachelandrew

@font-face { font-family: “fallback”; src: local(Arial); size-adjust: 90%; ascent-override: 110%; descent-override: 110%; line-gap-override: 99%; } @font-face { font-family: “Webfont”; src: url(/path/to/webfont.woff2) format(‘woff2’); } html { font-family: “Webfont”, “fallback”; } Slides & resources https://noti.st/rachelandrew

Container Queries? On their way! Slides & resources https://noti.st/rachelandrew

.wide-column, .narrow-column{ contain: layout inline-size; } @container (min-width: 700px) { .card { grid-template-columns: 1fr 2fr; grid-template-rows: auto 1fr; } } Slides & resources https://noti.st/rachelandrew

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

Anyone can contribute to specifications You don’t need to be an Invited Expert or representative. Slides & resources https://noti.st/rachelandrew

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

Read and comment on specification 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

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 a Reduced 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

Comment on spec issues, raise new issues, contribute examples, raise browser bugs, write tests. Slides & resources https://noti.st/rachelandrew

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

Coming soon to CSS Rachel Andrew Slides & resources https://noti.st/rachelandrew