Issue 138
Variable Fonts, changing display and a11y, Firefox 59 and Easing Gradients.
News
Issue 138
I'm still waiting for it to be spring here in the UK, as we had another lot of snow last weekend. I'm also enviously watching the tweets coming out of CSSConfAU (not just because of their weather!) and looking forward to the video being published. Sounds like another great event from the team there.
This week the email is again sponsored by Layout Land, do check out the amazing videos that Jen Simmons has been posting over there each week.
Rachel Andrew, CSS Layout News
Survey - CSS Grid in Production
I'm working on an article about using Grid in production, including best practices, common patterns, and what people have found challenging.
If you would like to add your thoughts to the mix I would love you to complete this form.
Firefox 59 for developers - Mozilla | MDN
New things of particular interest in Firefox 59 are enhancements to Rulers and Responsive Design Mode in DevTools, position: sticky now works on table parts such as th and the behaviour of "unusual elements" such as replaced elements when using display: contents has been updated as per the spec.
Bringing expressive, performant typography to Microsoft Edge with Variable Fonts
I'm pretty excited about Variable Fonts, and the demo site linked from this post really is beautiful work.
Learn
Short note on what CSS display properties do to table semantics | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)
This is important, and something I wasn't aware of until recently (due to the linked post from Adrian Roselli). Changing the value of display in CSS on an HTML table, removes the correct representation in the accessibility tree. There are suggestions in this post as to what you can do to maintain accessibility if you need to do this.
CSS Grid Application Layout in Production – commercetools tech
Walkthrough of a CSS Grid application layout, including fallbacks.
Interesting
Geometric cover replication with CSS Grid, clip-path, & writing-mode
A really nice demo using Grid, clip-path and Writing Modes.
Easing Gradients
A proposal has been raised to the CSSWG for easing gradients, this blog post explains and has examples plus an editor to play with.
Vox Product Accessibility Guidelines
A really nice checklist of things that you should consider in terms of accessibility before launching your site or application.
Our Sponsor
“Jen Simmons is doing an absolutely fantastic job teaching us about CSS Grids. It’s really exciting to think about old school layouts being fused with new school concepts.” — Justin French, Product Manager at Envato
You can look up the syntax of a new CSS property in a zillion places. But where can you learn how all the little pieces fit together into one big coherent whole? You don’t have time to figure out what it all means. You’d just like someone to pull a chair up next to yours and explain how it works and how this changes everything.
Well, Jen Simmons will do exactly that. In a free series of videos from Mozilla Developer Outreach, called Layout Land. From CSS Grid Basics to new ideas in graphic design on the web, Jen has you covered.
Subscribe to get new videos every week.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.