Issue 200
News
Issue 200!
Here we are at issue 200 of CSS Layout News. Every Tuesday for 200 issues I've managed to find something to share, thanks to all the good folk out there writing articles or doing interesting things with CSS! It seems fitting that we do actually have a lot of news this time, with subgrid landing in Firefox Nightly, and LayoutNG rolling out in Chrome.
Spring conference season rolls on. I am just back from Codegarden, my slides and resources are here. This week I head to CSSConf EU in Berlin, and then onto Toronto for the CSS Working Group meeting.
Rachel Andrew, CSS Layout News
UK and Ireland CSS Workshops
I mentioned my upcoming public workshops last time and a number of people asked whether I would do one in the UK soon. Given that I'm based in the UK, it is odd that I very rarely seem to speak or workshop here! If you would be interested, please fill in this form just so I can get an idea of the locations that most people would be happy getting to.
CSS Grid subgrid lands in Firefox Nightly
The subgrid value of grid-template-columns and grid-template-rows is now in Firefox Nightly. Download a copy of Nightly and you can take a look at the examples listed in this post.
LayoutNG - The Chromium Projects
LayouNG is a new layout engine for Chromium, and it will begin to be rolled out in Chrome 76. The initial stage will be for inline and block layout.
You might find the post CSS Grid on LayoutNG interesting.
W3C and WHATWG to work together to advance the open Web platform | W3C Blog
News that isn't CSS, but given we need some HTML to use CSS this is an interesting development to be aware of. W3C and the WHATWG have just signed an agreement to collaborate on the development of a single version of the HTML and DOM specifications. You can read the details of how this will work in the blog post.
Legacy CSS Scroll Snap syntax support has been dropped | Firefox Site Compatibility
If you had used the legacy scroll snap spec which was implemented in Firefox, this is being dropped with the next version of Firefox (68) which implements the updated specification.
Learn
Create a split, faux-container layout with CSS Grid and Flexbox - Andy Bell
A nice little design pattern from Andy Bell.
Digging Into The Display Property: Grids All The Way Down — Smashing Magazine
I'm continuing my walkthrough of the CSS display property with a look at what happens when we declare display: grid. Also, how does the new subgrid feature fit into this?
The difference between keyboard and screen reader navigation – Tink
A handy guide to explain the difference between keyboard navigating users who can see the content, and screen reader users.
"Whether someone is a keyboard user or a screen reader user, the importance of HTML cannot be emphasised enough. Without well-formed HTML that uses the appropriate element for the purpose, screen reader navigation breaks down completely, and keyboard navigation is at a high risk of doing the same."
Our Sponsor
Can't get to my in-person workshops? No problem - join me online!
I've distilled my knowledge about CSS Layout into this training course. This course has something for you if you are new to CSS, have been using frameworks for a while and want to understand how they work, or have been doing this for a while but want to understand the newer layout methods. The course includes video tutorials, text explanations and all the starting points to follow along.
The full table of contents gives an overview of what you can learn - at your own pace. We also have a Slack community where you can ask questions about the course materials.