A presentation at Øredev Developer Conference in in Malmö, Sweden by Rachel Andrew
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
A new version of my talk about what is new and interesting in CSS. Covering some of the things we can already use as well as things just recently discussed at the CSS Working Group. In addition I talk about how things become part of CSS, and how everyone can get involved.
The following code examples from the presentation can be tried out live.
The following resources were mentioned during the presentation or are useful additional information.
