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
CSS WG Blog – CSS Grid Level 2 Updated: Subgrid Specification Completed
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.
Chromium Blog: Chrome 69 Beta: CSS tricks, and more
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.
Flexbox Inspector - input wanted - Developer Tools - Mozilla Discourse
If you have thoughts on how a Flexbox developer tool should work, then comment on this thread.
Learn
What Happens When You Create A Flexbox Flex Container? — Smashing Magazine
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.
Designing Tools for CSS Grid and Variable fonts - Designer vs. Developer #13 - YouTube
A discussion between Mustafa Kurtuldu and Soledad Penadés on designing developer tools. More information can be found in Mustafa's blog post.
The trick to viewport units on mobile | CSS-Tricks
A useful post covering viewport units on mobile, and using custom properties to get the correct sizing.
Well-Controlled Scrolling with CSS Scroll Snap | Web | Google Developers
CSS Scroll Snap will be shipped in Chrome 69. This blog post explains what it is and how to use it.
Our Sponsor
More than just slides! Create your permanent public speaking portfolio with Notist
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.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.