I'm writing this from Toronto. On Sunday I gave a full day CSS Layout workshop and today I'll be speaking about layout at FITC Web Unleashed. I have already chatted to some readers of this newsletter who are at the conference - great to hear that people find my weekly collection interesting.
This has turned out to be a fairly technical collection of links. I'd love to see examples of what you are creating with new layout methods - I'm on Twitter as @rachelandrew, let me know what you have made.
Rachel Andrew, CSS Layout News
The release notes for Safari TP40 include some CSS Grid changes and fixes, the most notable being the change that the
grid shorthand no longer resets gutter properties. This was one of the changes (along with renaming the gap properties) resolved upon at the Paris CSS WG meeting.
"This chapter sets you up with some core animation patterns and shows you how animation applies to a greater system. Then you’ll learn how to spot cognitive bottlenecks and low-hanging fruit, maximizing the impact of the animations you do invest in."
This sample chapter from Rachel Nabors' book is an excellent introduction to core animation patterns on the web.
An excellent run down of the things you might want to think about when designing websites to work well with the iPhone X, and the distinctive notch out of the viewport.
sticky-change event. A custom event that fires when a
position: sticky element becomes fixed.
In this video from the CSS Day Browser API Special, Philip Walton explains the Houdini project,
"Have you ever wanted to use a particular CSS feature but didn’t because it wasn’t fully supported in all browsers? Or, worse, it was supported in all browsers, but the support was buggy, inconsistent or even completely incompatible? If this has happened to you then you should care about Houdini."
An explanation of how Firefox and other browser engines render content on the web.
Via the CodePen newsletter I spotted this interesting slider. I'd definitely want a way to pause it, but it showcases some neat ideas.
Let me teach you layout, and save yourself time with every site you build.
I've distilled my knowledge about CSS Layout into this training course. This course has something for you if you are new to CSS, have been using frameworks for a while and want to understand how they work, or have been doing this for a while but want to understand the newer layout methods. The course includes video tutorials, text explanations and all the starting points to follow along.
The full table of contents gives an overview of what you can learn - at your own pace. We also have a Slack community where you can ask questions about the course materials.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.