Issue 129
Firefox DevTools, display: contents, grid + multicol, and how big is that box?
News
Issue 129
At the end of 2017, I told myself I wouldn't travel so much in 2018. Yesterday I started to wonder whether a good plan for the year would be to stay in an airplane circling the globe, being dropped off every day or so to do a talk! I'm really looking forward to all the talks and workshops I've got lined up this year though. Keep an eye on my speaking page if you want to know where I'll be popping up next. I've also started writing weeknotes, mostly to remember what I've been up to, but you might find something useful there.
I'm not the only person who is already full steam ahead into 2018, so I have a nice bunch of links to share this week.
Rachel Andrew, CSS Layout News
Igalia implemented CSS Grid into Blink (for Chrome) and WebKit (for Safari), and they do a huge amount of work on the Web Platform that we all benefit from. This post explains what they have been working on in the past few months.
A video from Jen Simmons asking for feedback on some of the new Firefox DevTools for CSS Shapes, Clip Path, Flexbox and Grid.
"Yes, display: contents is enabled by default in Blink and WebKit and it will be probably shipped in Chrome 65 and Safari 11.1. These browsers will join Firefox that is shipping it since version 37, which makes Edge the only one missing the feature "
The Intent to Implement post for the CSS Layout API, part of Houdini.
Learn
Something that quickly became obvious in a workshop setting was how confused people were about the size of things in flexbox and grid. It turns out that percentages, while they look ugly, are pretty easy to understand - flex-grow factors and fr units less so. In this article I break down the different ways we can size tracks in grid layout.
An article exploring the relationship between two CSS layout features: CSS Grid and CSS Multi-Columns.
I recorded a new video for my series over at Grid by Example, showing how to use the content sizing keywords to size grid tracks.
The new dialog HTML element, including details of how to style it.
Our Sponsor
With our third SmashingConf San Francisco taking place on April 17 & 18, we want to explore strategies for making outstanding, fast experiences, and what we all need to know today, to be more productive and make smarter decisions tomorrow.
One track, two conference days, 14 brilliant speakers, and just 500 available seats. Make your experience even more memorable by attending one of our workshops. Get an early-bird ticket → before Jan 31st and save $100.