Coming soon to CSS

A presentation at SmashingConf Freiburg (Online) in September 2020 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

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

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

.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 17

Slide 17

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

Slide 18

Slide 18

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 19

Slide 19

Masonry in CSS Slides & resources https://noti.st/rachelandrew

Slide 20

Slide 20

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

Slide 21

Slide 21

.masonry { display: grid; gap: 20px; grid: masonry / repeat(auto-fill, minmax(250px, 1fr)); } Slides & resources https://noti.st/rachelandrew

Slide 22

Slide 22

Does masonry belong in the 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

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

… 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 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

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

Slide 29

Slide 29

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

Slide 30

Slide 30

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

Slide 31

Slide 31

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

Slide 32

Slide 32

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

Slide 33

Slide 33

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

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

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

Slide 40

Slide 40

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

Slide 41

Slide 41

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

Slide 42

Slide 42

Contribute examples and diagrams to specifications Slides & resources https://noti.st/rachelandrew

Slide 43

Slide 43

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

Slide 44

Slide 44

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

Slide 45

Slide 45

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

Slide 46

Slide 46

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 47

Slide 47

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

Slide 48

Slide 48

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

Slide 49

Slide 49

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

Slide 50

Slide 50

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 51

Slide 51

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

Slide 52

Slide 52

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

Slide 53

Slide 53

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

Slide 54

Slide 54

Many people who work on CSS started by writing tests. Slides & resources https://noti.st/rachelandrew

Slide 55

Slide 55

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

Slide 56

Slide 56

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