Skip to content

Issue 158

New CSS features for Chrome 69, new WD of Grid Level 2, Flexbox, designing browser DevTools

Rachel Andrew
2 min read

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.

w3.org


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.

chromium.org


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.

mozilla.org

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.

smashingmagazine.com


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.

youtube.com


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.

css-tricks.com


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.

google.com

Our Sponsor

More than just slides! Create your permanent public speaking portfolio with Notist

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.

noti.st

Newsletter