Issue 158
New CSS features for Chrome 69, new WD of Grid Level 2, Flexbox, designing browser DevTools
News
Issue 158
It might be summer but there is plenty of news this week, with Chrome detailing what will ship in Chrome 69, and the CSS Working Group updating the Grid Level 2 Working Draft. You can read all about those things below.
Prompted by thinking about how quickly features are shipping into browsers right now I wrote a blog post - Coming to a browser near you - faster than ever before! It still amazes me how quickly we get new features now, it really is a great time to do web development.
Rachel Andrew, CSS Layout News
A new Working Draft of CSS Grid Level 2 has been published, this closes all tickets on the subgrid feature. This is a really good time to take a look at the draft as it is nearing Candidate Recommendation status.
Chrome 69 contains a whole batch of relevant things. Read the blog post for more information however we can look forward to:
Conic Gradients
Logical margin, padding and border properties (details of logical properties can be found in my article on Logical Properties and Values)
CSS Scroll Snap
Display Cutouts, enabling developers to take advantage of the whole screen when using a device with a cutout
A console warning if you are using percentage row tracks or gutters in CSS Grid, as this behaviour will change in Chrome 70.
If you have thoughts on how a Flexbox developer tool should work, then comment on this thread.
Learn
I've written some very detailed articles in the past on various aspects of CSS Grid Layout, however I get a lot of questions about Flexbox. This article is the beginning of a short series, really digging into flexbox. If you want to move beyond a cheatsheet and really understand how flexbox works, this is the series for you.
A discussion between Mustafa Kurtuldu and Soledad Penadés on designing developer tools. More information can be found in Mustafa's blog post.
A useful post covering viewport units on mobile, and using custom properties to get the correct sizing.
CSS Scroll Snap will be shipped in Chrome 69. This blog post explains what it is and how to use it.
Our Sponsor
Whether you speak occasionally at local meet up groups, or frequently take the stage at big design conferences, Notist is the place to build your public speaking portfolio.
You can share your slides, but also add video, pull in tweets, and build up lists of links and resources for attendees to reference to. Over time you can build up a solid resource of all your speaking engagements.
If you ever hook up to a projector, you should get hooked up with Notist.