I'm writing this introduction in a noisy coffee shop in London, I've just arrived for Smashing Conf. I'll be doing a new talk for Smashing Conf London plus running a full day workshop on Friday. Here starts conferencing for 2018!
Lots of good stuff this week, a little bit of a testing theme with ideas for automated layout testing and simulating screen reader experience. Also CSS Grid tutorials, browser and spec updates. Thanks to an anonymous sponsor for this week being ad-free.
Rachel Andrew, CSS Layout News
Chrome and WebKit join Edge with unprefixed
row-gap properties. These were
grid-row-gap. The prefixed properties will be aliased so existing code doesn't break. As a bonus feature these have been made animatable as described in the spec.
I am very excited to be going to Hong Kong later this year for Webconf.asia. I'll be running a full day workshop in addition to speaking at the conference. This will be my first time visiting Hong Kong, so I am very much looking forward to meeting the web community there.
In this article for Smashing Magazine I take a refreshed look at Media Queries. How should we use them alongside Flexbox and Grid, and what is coming in Level 4 of the specification?
A Tale of Two Rooms: Understanding screen reader navigation | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)
I would never call myself an accessibility expert, however the folk at The Paciello Group certainly are. This article explains how screen reader users navigate, and gives you ways to simulate that experience. From a layout point of view this is important as flexbox and Grid give us this ability to reorder content in such a way as to make navigation hard for some of our users.
A video from Jen Simmons combining CSS Grid, Writing Modes and Transforms.
One way to test for regressions in your layout is to do a visual diff between the expected layout and the actual layout. Here is a way to do that using Chrome and Puppeteer.
A walkthrough of a layout built using CSS Grid.
Another automated testing article. This time explaining how to use the WebDriver API.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.