What's New In CSS?

A presentation at Øredev Developer Conference in November 2018 in Malmö, Sweden by Rachel Andrew

Slide 1

What’s New In CSS? Rachel Andrew @ Øredev

Slide 2

Rachel Andrew • • • • Co-founder Perch CMS and Notist. Smashing Magazine Editor in Chief CSS Working Group Invited Expert, co-editor Multicol and Page Floats @rachelandrew | https://rachelandrew.co.uk

Slide 3

Slides, code & resources https://noti.st/rachelandrew/zeHBM2

Slide 4

How do we get new CSS?

Slide 5

The CSS Working Group https://www.w3.org/Style/CSS/members

Slide 6

Discussion logged on GitHub https://github.com/w3c/csswg-drafts/issues

Slide 7

CSS Spec Levels Where is CSS4?

Slide 8

CSS Selectors Level 3 W3C Recommendation

Slide 9

CSS Selectors Level 4 Working Draft

Slide 10

There is no CSS4.

Slide 11

Phases to become a W3C Recommendation Working Draft (WD) Candidate Recommendation (CR) Proposed Recommendation (PR) W3C Recommendation (REC) https://www.w3.org/2018/Process-20180201/#maturity-levels

Slide 12

Multiplecolumn Layout

Slide 13

The Editor’s Draft The version that spec editors are making changes on. Commits show up right away – things may change!

Slide 14

Candidate Recommendation Gathering Implementation Experience.

Slide 15

To exit CR Status The specification needs two independent implementations of each feature.

Slide 16

Grid Layout https://www.w3.org/TR/css-grid-1/

Slide 17

Grid Layout Level 1 specification shipped by all major browsers in 2017. Level 1 specification is a Candidate Recommendation.

Slide 18

Grid Level 2 https://www.w3.org/TR/css-grid-2/

Slide 19

Subgrid Part of CSS Grid Level 2. CSS Grid Level 2 is a Working Draft.

Slide 20

Subgrid explained https://www.smashingmagazine.c om/2018/07/css-grid-2/

Slide 21

CSS Box Alignment https://www.w3.org/TR/css-align-3/

Slide 22

align-items justify-content Main and cross axis alignment when in flex layout. .flex { display: flex; align-items: center; justify-content: center; }

Slide 23

align-items justify-content Block and Inline axis alignment when in grid layout. .grid { display: grid; align-items: start; justify-content: space-between; }

Slide 24

gap, row-gap, column-gap Gutters or alleys between items in a layout.

Slide 25

Gaps in Grid Layout .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 20px; }

Slide 26

Slide 27

Gaps in Grid Layout .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 20px; row-gap: 20px; }

Slide 28

Gaps in Flex Layout .flex { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; }

Slide 29

Slide 30

Slide 31

Intrinsic Sizing Keywords

Slide 32

min-content .grid { display: grid; grid-template-columns: repeat(3, min-content); row-gap: 20px; column-gap: 20px; }

Slide 33

Slide 34

max-content .grid { display: grid; grid-template-columns: repeat(3, max-content); row-gap: 20px; column-gap: 20px; }

Slide 35

Slide 36

fit-content .grid { display: grid; grid-template-columns: repeat(3, fit-content(10em)); row-gap: 20px; column-gap: 20px; }

Slide 37

Slide 38

Sizing strings .min { width: min-content; } .max { width: max-content; }

Slide 39

Slide 40

Scroll Snap https://www.w3.org/TR/css-scroll-snap-1/

Slide 41

Scroll Snap Snapping on the x axis body { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; } img { width: 31vw; height: 300px; margin: 0 3.5vw 0 0; object-fit: cover; scroll-snap-align: start; }

Slide 42

Slide 43

Scroll Snap Snapping on the y axis .list { height: 400px; width: 250px; overflow-y: scroll; scroll-snap-type: y mandatory; } .list li { scroll-snap-align: start; }

Slide 44

Slide 45

Scrollbars https://www.w3.org/TR/css-scrollbars-1/

Slide 46

scrollbar-color .list { height: 400px; width: 250px; overflow-y: scroll; scrollbar-color: rebeccapurple hotpink; }

Slide 47

Slide 48

scrollbar-width .list { height: 400px; width: 250px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: rebeccapurple hotpink; }

Slide 49

Slide 50

Shapes https://www.w3.org/TR/css-shapes-1/

Slide 51

Shapes Using a gradient as a shape .wrapper::before { content: ""; float: left; width: 40vw; height: 100vh; background: linear-gradient(110deg, rgba(119,0,255,1) 29%, rgba(0,212,255,0) 60%); shape-outside: linear-gradient(110deg, rgba(119,0,255,1) 29%, rgba(0,212,255,0) 60%); shape-image-threshold: .6; }

Slide 52

Slide 53

Shapes The gradient does not need to be visible! .wrapper::before { content: ""; float: left; width: 40vw; height: 100vh; shape-outside: linear-gradient(110deg, rgba(119,0,255,1) 29%, rgba(0,212,255,0) 60%); shape-image-threshold: .6; }

Slide 54

Slide 55

Conic Gradients https://www.w3.org/TR/css-images-4/

Slide 56

Conic Gradients A cone .cone { width: 200px; height: 200px; background: conic-gradient(orange, green, orange); border-radius: 50%; margin: 20px; }

Slide 57

Slide 58

Conic Gradients A chart .chart { width: 200px; height: 200px; background: conic-gradient(red 35%, green 35%, green 65%, orange 65%, orange 90%, yellow 90%); border-radius: 50%; margin: 20px; }

Slide 59

Slide 60

Conic Gradients Pacman! .pacman { width: 200px; height: 200px; background: conic-gradient(yellow 0%, yellow 15%, white 15%, white 35%, yellow 35%); border-radius: 50%; margin: 20px; }

Slide 61

Slide 62

http://leaverou.github.io/conic-gradient/

Slide 63

Firefox DevTools Tools for designing with CSS.

Slide 64

Firefox Nightly https://www.mozilla.org/en-US/firefox/channel/desktop/

Slide 65

Slide 66

Check out these tools Grid, Flexbox, CSS Shapes, Variable Fonts https://developer.mozilla.org/en-US/docs/Tools

Slide 67

What’s next?

Slide 68

Aspect Ratio Units

Slide 69

Aspect Ratio Units https://drafts.csswg.org/css-sizing-4/#ratios

Slide 70

Exclusions

Slide 71

Exclusions Flow text round all sides of an element .exclusion { wrap-flow: both; }

Slide 72

Exclusions Flow text round all sides of an element .exclusion { -ms-wrap-flow: both; }

Slide 73

Slide 74

Editorial layouts, exclusions & CSS Grid https://rachelandrew.co.uk/archives/2018/11/09/editorial-layouts-exclusions-and-css-grid/

Slide 75

CSS Houdini Extend CSS with JavaScript!

Slide 76

https://css-houdini.rocks/conic-gradient

Slide 77

https://css-houdini.rocks/corners-gradient

Slide 78

https://googlechromelabs.github.io/houdini-samples/layout-worklet/masonry/

Slide 79

http://houdini.glitch.me/

Slide 80

https://ishoudinireadyyet.com/

Slide 81

But … old browsers! Won’t it be years before we can use any of this?

Slide 82

Meet Feature Queries CSS progressively enhancing CSS.

Slide 83

.test { background: linear-gradient(to bottom, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); } @supports Test for property AND value @supports (background: conicgradient(orange, green, orange)) { .test { background: conic-gradient(orange, green, orange); } }

Slide 84

No conic-gradient conic-gradient

Slide 85

Using Feature Queries Useful when overriding older layout methods to stop styles used for ‘old’ methods leaking into new layout. Remove widths and margins used to create floated layouts when in Grid.

Slide 86

How to influence the process

Slide 87

Tell us what you want Talk to the CSS Working Group!

Slide 88

Tell browsers what you want • • • • Raise issues Add new use cases to issues Write and talk about new CSS Use the features!

Slide 89

Thank you! https://noti.st/rachelandrew/zeHBM2 @rachelandrew