Issue 132
Testing, testing ... a bit of a testing theme for CSS Layout News this week
News
Issue 132
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
Grid Layout gap properties in Chrome and WebKit
Chrome and WebKit join Edge with unprefixed gap, column-gap and row-gap properties. These were grid-gap, grid-column-gap and 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.
Webconf.asia - Workshop Advanced CSS Layout
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.
Learn
Using Media Queries For Responsive Design In 2018 — Smashing Magazine
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.
CSS Grid like you are Jan Tschichold - YouTube
A video from Jen Simmons combining CSS Grid, Writing Modes and Transforms.
Automatic visual diffing with Puppeteer – Monica Dinculescu
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.
CSS Grid layout — crossed sections – Deemaze Writing Wall – Medium
A walkthrough of a layout built using CSS Grid.
Automated Browser Testing With The WebDriver API — Smashing Magazine
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.