Issue 143
CSS Grid, display: contents, viewport units and page transitions
News
Issue 143
I'm back from Smashing Conference in San Francisco where there were several talks of interest to readers of this email - videos are being produced and I'll link to them as soon as they are out. This week we have a bumper set of links with CSS Grid, display: contents, viewport units and much more. I'm in the UK for the next two weeks, then I head back to the USA for Google I/O.
Thanks to Disclaimer Template for sponsoring this week.
Rachel Andrew, CSS Layout News
Responsive Design Mode: New designs in the works - input wanted - Developer Tools - Mozilla Discourse
The Firefox DevTools team would love some feedback on Responsive Design Mode. Take a look at this post and comment.
What's New In DevTools (Chrome 67) | Web | Google Developers
Details of what is in DevTools for Chrome 67, including CSS Variable Value Previews in the Styles Pane.
Introducing the Accessibility Inspector in the Firefox Developer Tools – Marco's Accessibility Blog
Firefox Nightly now has the new accessibility inspector to help you check how accessible your pages are. This article introduces it.
Learn
Art Directing the Web and CSS Grid with Rachel Andrew | Unfinished Business
I had a conversation with Andy Clarke about CSS Grid and where new creativity in web design might come from.
Designing for A Viewport - YouTube
The web is a medium that has a viewport. Jen Simmons explains what it is to truly be designing for the web — a medium that reveals the page slowly, from inside a viewport frame.
A Look at CSS Viewport Units ← Alligator.io
A tutorial explaining CSS Viewport Units.
More accessible markup with display: contents
Hidde de Vries writes about display: contents sharing my hope that it will encourage people to write better markup, removing semantic elements from the display only. Hidde also notes that currently browsers are failing to recognise display: contents as a visual thing only and links to the browser bugs for this problem.
Native-Like Animations for Page Transitions on the Web | CSS-Tricks
An article showing how to create the kind of page transitions you might see in a mobile app, using Vue and Nuxt.
How to use CSS grid today in the real world - YouTube
A talk recorded at CSSConf Australia, Brenda Storer demonstrates how she is using CSS Grid, and supporting older browsers too.
Interesting
gridtoflex.com
Some examples of using Flexbox as a fallback for CSS Grid from Una Kravets.
Our Sponsor
Are You Compliant With The GDPR's New Privacy Laws?
On May 28th, the GDPR takes effect, and there is a 95% chance your website's privacy notice will be in violation of the GDPR's new privacy laws if it has not been updated properly. These laws also apply to SaaS and mobile app privacy notices.
The GDPR will affect almost every digital marketer, website owner, and mobile app owner who gets visitors from any of the 28 countries in the European Union. The fines and penalties are significant for people who don't comply.
We can help you to comply with the new GDPR privacy laws.
Free Review and GDPR Consultation
Visit our website at https://www.disclaimertemplate.com/free-consultation/ to schedule a free review of your website or mobile app privacy notice and free GDPR consultation.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.