Flexbox gaps, DevTools, accessibility resources, and media queries
Lots of interesting things today, perhaps everyone is back from whatever shape of summer vacation they managed to take!
Tomorrow I am speaking at FITC Web Unleashed, online of course this year. I very much miss getting to meet up with folk at in-person events. Online is great, and I am pretty sure I'll carry on doing online workshops even once travel is possible again. For many people traveling to an in-person event wasn't possible before the pandemic, and it's great to be able to reach those people. However, there are some things that are made easier when you can all sit in a room together. I'll be glad when we can combine the two.
Rachel Andrew, CSS Layout News
Closing the gap (in flexbox 😇) – Virtual Reality
A post with some good news that the
gap properties will be coming to Safari. The post also covers a lot of other flexbox bugs that have been fixed and demonstrates the importance of Web Platform Tests in improving browser interoperability.
What's New In DevTools (Chrome 87) | Web | Google Developers
Some good things coming to Chrome DevTools. New Grid tools, and a way to group properties by category in the Computed pane.
a11yresources - A growing list of accessibility tools and resources
A massive list of accessibility resources.
AddyOsmani.com - Emulate vision deficiencies in DevTools
An explanation of the useful feature of Chrome DevTools that allows you to emulate different color deficiencies.
Build a responsive media browser with CSS - Piccalilli
A lovely tutorial which covers plenty of ground in terms of aspect ratios, responsive design, and accessibility.
A Complete Guide to CSS Media Queries | CSS-Tricks
A thorough guide to media queries, including the newer user preference media features.
How To Use Face Motion To Interact With Typography — Smashing Magazine
Interesting ideas around text legibility and face proximity!
When fonts fall
A thorough and interesting look at the world of font fallback.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.