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

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

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

How do we get new CSS?

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

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

CSS Spec Levels Where is CSS4?

CSS Selectors Level 3 W3C Recommendation

CSS Selectors Level 4 Working Draft

There is no CSS4.

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

Multiplecolumn Layout

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

Candidate Recommendation Gathering Implementation Experience.

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

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

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

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

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

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

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

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

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

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

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

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

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

Intrinsic Sizing Keywords

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

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

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

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

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

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; }

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; }

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

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

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

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

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; }

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; }

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

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

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; }

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; }

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

Firefox DevTools Tools for designing with CSS.

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

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

What’s next?

Aspect Ratio Units

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

Exclusions

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

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

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

CSS Houdini Extend CSS with JavaScript!

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

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

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

http://houdini.glitch.me/

https://ishoudinireadyyet.com/

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

Meet Feature Queries CSS progressively enhancing CSS.

.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); } }

No conic-gradient conic-gradient

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.

How to influence the process

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

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

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