What’s New In CSS? Rachel Andrew, Fronteers 2019

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

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. https://rachelandrew.co.uk/archives/2016/09/ 13/why-there-is-no-css4-explaining-css-levels/

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 https://www.w3.org/TR/css-multicol-1/

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

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/

Media Queries https://www.w3.org/TR/mediaqueries-4/

@media (pointer:coarse) { } Media Features @media (pointer:fine) { } @media (hover) { } What features does this device have? @media (hover:none) { }

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/

How to influence the process

Tell us what you want Talk to the CSS Working Group! Talk to me and I’ll 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/9R7PMY @rachelandrew