Issue 199
Firefox 67 release day, accessibility and grid layout, implementing a component with new CSS
News
Issue 199
Hello, and welcome to issue 199 of CSS Layout News.
I am currently on a train in Denmark heading out to Odense for Codegarden, I'll be doing a talk there tomorrow. Last week I did a layout workshop in Utrecht as part of Frontend United. I had a really great day and so I'm looking forward to my workshop next month in Toronto for SmashingConf. There are a few places still available, and I would love to see you there. You can read a bit more about my workshops in this post, and the details for SmashingConf are here. My aim is for people to leave the day really understanding why things behave as they do in CSS Layout, so you can solve the issues that come up in the future in your own work.
Rachel Andrew, CSS Layout News
Dark Mode Support in WebKit | WebKit
Information about the support for dark mode which is in Safari 12.1.
Firefox 67 for developers - Mozilla | MDN
Firefox 67 is out today, it includes the prefers-color-scheme media feature.
Learn
The Dark Side of the Grid (Part 2) - Manuel Matuzović
Another excellent article on potential accessibility issues which could be caused by using CSS Grid. This time content reordering. I really like the animated examples of tab order.
A new (and easy) way to hide content accessibly | Zell Liew
An idea about hiding content accessibility - meaning that the visually hidden content can still be read by screen readers - from Zell. What is more interesting is the discussion from various people about the best approaches, and potential problems.
Implementing a Mockup: CSS Layout Step by Step
Step by step to implementing a mockup using CSS.
How to create a sticky hero section using CSS position sticky | CodyHouse
A post about creating a stick hero section for a site. The tutorial uses position: sticky and Intersection Observer.
Grids All The Way Down - slides from Frontend United
Last week I presented and ran a workshop at Frontend United in Utrecht. Here are my slides, code and resources for that talk.
Our Sponsor
Designing & Building Live. On Stage. That’s SmashingConf 2019!
Up, up, up to the stars! For our second SmashingConf Toronto (June 25–26), we’ll explore the bright and dark sides of front-end and UX — Service Workers, Design Across Cultures, Design Systems, Performance, Vue.js, Animation, Designing for Touch and much more to come! Plus a bunch of hands-on workshops on design, front-end and UX.
How does it work? Most sessions are live and interactive. No Keynote, Reveal or Google Slides. Instead, take a seat, breathe in and show how you design or build on a large screen live — from scratch! — in front of 400 people. Now, what could possibly go wrong? ;-)
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.