A presentation at Fronteers Online Meetup by Rachel Andrew
CSS News June 2020 Rachel Andrew, Fronteers Slides & resources https://noti.st/rachelandrew
Gaps for everyone Slides & resources https://noti.st/rachelandrew
The gap properties gap, row-gap, column-gap Slides & resources https://noti.st/rachelandrew
.flex { display: flex; margin: 0 -10px; } .flex > * { flex: 1 1 auto; margin: 0 10px; } Slides & resources https://noti.st/rachelandrew
.flex { display: flex; gap: 20px; } .flex > * { flex: 1 1 auto; } Slides & resources https://noti.st/rachelandrew
What happened to grid-gap? Slides & resources https://noti.st/rachelandrew
Box alignment The specification for alignment and space distribution across all layout methods. Slides & resources https://noti.st/rachelandrew
The grid- properties are maintained as aliases. Slides & resources https://noti.st/rachelandrew
Can we detect Flexbox gap support with Feature Queries? Slides & resources https://noti.st/rachelandrew
@supports (display: grid) { .grid { /* grid things here */ } } Slides & resources https://noti.st/rachelandrew
@supports (gap: 20px) { .flex { /* matches due to support for gap in grid. */ } } Slides & resources https://noti.st/rachelandrew
Aspect Ratios Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
The aspect-ratio property https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio Slides & resources https://noti.st/rachelandrew
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .grid > * { aspect-ratio: 1 / 1; transform: rotate(0.1turn); } Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Internal mapping Modern browsers use the width & height attributes to internally map image aspect ratios to prevent loading shifts. Slides & resources https://noti.st/rachelandrew
Masonry in CSS Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
.masonry { display: grid; gap: 20px; grid: masonry / repeat(auto-fill, minmax(250px, 1fr)); } Slides & resources https://noti.st/rachelandrew
Does masonry belong in the CSS Grid Spec? https://rachelandrew.co.uk/archives/2020/05/05/does-masonry-belong-in-the-css-grid-specification/ Slides & resources https://noti.st/rachelandrew
Subgrid Slides & resources https://noti.st/rachelandrew
Subgrid examples https://gridbyexample.com/examples/#css-grid-level-2-examples Slides & resources https://noti.st/rachelandrew
… a team at Microsoft Edge are working on rearchitecting Chromium’s Grid support to use the new LayoutNG engine - and as part of this are intending to add subgrid support! Slides & resources https://noti.st/rachelandrew
prefers_reduced_data Slides & resources https://noti.st/rachelandrew
@media (prefers-reduced-data: no-preference) { .hero { /* download large image */ } } Slides & resources https://noti.st/rachelandrew
User preference media features Part of Media Queries Level 5 Slides & resources https://noti.st/rachelandrew
::marker Slides & resources https://noti.st/rachelandrew
li:first-child { background-color: rgb(74, 112, 122); color: #fff; } li:first-child::marker { color: black; } Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
h1 { display: list-item; } h1::marker { content: “🥦🥦”; } Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Anyone can contribute to specifications You don’t need to be an Invited Expert or representative. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Everyone is allowed to contribute You don’t need permission, or to be qualified in some way. Slides & resources https://noti.st/rachelandrew
Read and comment on specification issues https://github.com/w3c/csswg-drafts/issues Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Show use cases As with any software development, real use cases are valuable. Slides & resources https://noti.st/rachelandrew
Contribute examples and diagrams to specifications Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
WICG Discourse https://discourse.wicg.io/ Slides & resources https://noti.st/rachelandrew
It will probably take longer than you think for changes to be made! Patience is required for web platform contributions. Slides & resources https://noti.st/rachelandrew
Raise browser bugs Fix bugs, or request that features are implemented. Slides & resources https://noti.st/rachelandrew
Learn to create a Reduced Test Case Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Test and offer feedback on features behind flags. This is the best time to make changes to a spec. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Web Platform Tests Help us test the web platform Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Many people who work on CSS started by writing tests. Slides & resources https://noti.st/rachelandrew
Comment on spec issues, raise new issues, contribute examples, raise browser bugs, write tests. Slides & resources https://noti.st/rachelandrew
Thank you! Slides & resources https://noti.st/rachelandrew
New features are arriving in our browsers faster these days, and in this talk I share some of the new CSS which is landing in browsers right now.
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.
