What’s New In CSS? Rachel Andrew, Fronteers 2019
A presentation at Fronteers W3C Meet-up in February 2019 in Amsterdam, Netherlands by Rachel Andrew
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
