Coming soon to CSS

A presentation at Frontend RheinMain in June 2021 in by Rachel Andrew

Slide 1

Slide 1

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

Slide 2

Slide 2

Gaps for everyone Slides & resources https://noti.st/rachelandrew

Slide 3

Slide 3

The gap properties gap, row-gap, column-gap Slides & resources https://noti.st/rachelandrew

Slide 4

Slide 4

.flex { display: flex; margin: 0 -10px; } .flex > * { flex: 1 1 auto; margin: 0 10px; } Slides & resources https://noti.st/rachelandrew

Slide 5

Slide 5

.flex { display: flex; gap: 20px; } .flex > * { flex: 1 1 auto; } Slides & resources https://noti.st/rachelandrew

Slide 6

Slide 6

What happened to grid-gap? Slides & resources https://noti.st/rachelandrew

Slide 7

Slide 7

Box alignment The specification for alignment and space distribution across all layout methods. Slides & resources https://noti.st/rachelandrew

Slide 8

Slide 8

The grid- properties are maintained as aliases. Slides & resources https://noti.st/rachelandrew

Slide 9

Slide 9

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

Slide 10

Slide 10

Can we detect Flexbox gap support with Feature Queries? Slides & resources https://noti.st/rachelandrew

Slide 11

Slide 11

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

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

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

Slide 20

Slide 20

The aspect-ratio property https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio Slides & resources https://noti.st/rachelandrew

Slide 21

Slide 21

.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

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

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

Slide 29

Slide 29

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

Slide 30

Slide 30

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

Slide 31

Slide 31

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

Slide 32

Slide 32

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

Slide 33

Slide 33

https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/ Slides & resources https://noti.st/rachelandrew

Slide 34

Slide 34

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

Slide 35

Slide 35

Subgrid examples https://gridbyexample.com/examples/#css-grid-level-2-examples Slides & resources https://noti.st/rachelandrew

Slide 36

Slide 36

… 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

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

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

Slide 40

Slide 40

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

Slide 41

Slide 41

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

Slide 42

Slide 42

User preference media features Part of Media Queries Level 5 Slides & resources https://noti.st/rachelandrew

Slide 43

Slide 43

leading-trim Losing the extra spacing around text. Slides & resources https://noti.st/rachelandrew

Slide 44

Slide 44

h1 { } text-edge: cap alphabetic; leading-trim: both; Slides & resources https://noti.st/rachelandrew

Slide 45

Slide 45

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

Slide 46

Slide 46

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

Slide 47

Slide 47

@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

Slide 48

Slide 48

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

Slide 49

Slide 49

.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

Slide 50

Slide 50

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

Slide 51

Slide 51

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

Slide 52

Slide 52

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

Slide 53

Slide 53

Read and comment on specification issues https://github.com/w3c/csswg-drafts/issues Slides & resources https://noti.st/rachelandrew

Slide 54

Slide 54

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

Slide 55

Slide 55

Show use cases As with any software development, real use cases are valuable. Slides & resources https://noti.st/rachelandrew

Slide 56

Slide 56

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

Slide 57

Slide 57

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

Slide 58

Slide 58

Raise browser bugs Fix bugs, or request that features are implemented. Slides & resources https://noti.st/rachelandrew

Slide 59

Slide 59

Learn to create a Reduced Test Case Slides & resources https://noti.st/rachelandrew

Slide 60

Slide 60

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

Slide 61

Slide 61

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

Slide 62

Slide 62

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

Slide 63

Slide 63

Web Platform Tests Help us test the web platform Slides & resources https://noti.st/rachelandrew

Slide 64

Slide 64

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

Slide 65

Slide 65

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

Slide 66

Slide 66

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