Issue 113
The iPhone X notch, Houdini explained, and how do browsers render webpages, a fairly geeky edition of CSS Layout News.
News
Issue 113
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
Release Notes for Safari Technology Preview 40 | WebKit
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.
Learn
Patterns and Purpose, an Excerpt from Animation at Work · An A List Apart Article
"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.
Designing Websites for iPhone X | WebKit
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.
An event for CSS position:sticky | Web | Google Developers
Introducing the sticky-change event. A custom event that fires when aposition: sticky element becomes fixed.
Philip Walton | Polyfills & Houdini | Browser API Special, CSS Day 2017 on Vimeo
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."
Interesting
Introduction to WebRender – Part 1 – Browsers today – Mozilla Gfx Team Blog
An explanation of how Firefox and other browser engines render content on the web.
An interesting CodePen slider - Untitled Slider
Via the CodePen newsletter I spotted this interesting slider. I'd definitely want a way to pause it, but it showcases some neat ideas.
Our Sponsor
I can teach you CSS Layout
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.