Issue 189
Aspect ratio units, hiding content, the Firefox Shape Path editor, scroll anchoring.
News
Issue 189
I got back to the UK after my travels last night, and am writing this introduction in a Heathrow airport hotel - the glamour! That said, I like this hotel because my window looks out over Heathrow, the runway separated from me by the perimeter road. Just at the point where airplanes touch down. I am writing and watching the early morning arrivals.
One of the things I was doing on my travels was running a workshop in Cleveland, Ohio. It was such fun, and I have several upcoming workshops which still have tickets available. I am also keen to book in workshops for later this year.
This issue is sponsored by An Event Apart. I'm speaking at every conference this year, next up is Boston. I got to see many of the regular speakers do their new talks while in Seattle and you really are in for a treat if you book to come along to any event this year.
Rachel Andrew, CSS Layout News
Learn
Designing An Aspect Ratio Unit For CSS — Smashing Magazine
I wrote up something we discussed at the recent CSS Working Group meeting. A coming soon feature to solve one of the tricky problems we have in CSS - creating boxes which respect aspect ratio units.
8 little videos about the Firefox shape path editor
Some videos demonstrating features of the Firefox Shape Path editor.
Guide to scroll anchoring - CSS: Cascading Style Sheets | MDN
You are probably familiar with the scenario where you start to read a long page, on a slow connection, and as you are reading suddenly the page jumps position as images load in, and you lose where you were in the document.
Scroll anchoring, already in Chrome and coming to Firefox in 66, is a new default way for browsers to behave which anchors the scroll position. It is turned on by default so many sites will just get better because of it. If you do need to disable it for some content there is a new property to do so. I wrote up this guide for MDN to explain.
Content-based grid tracks and embracing flexibility
A post about using content based sizing in CSS Grid Layout.
Web Page Footers 101: Design Patterns and When to Use Each
Summary: Footers can be found at the bottom of almost every web page, and often take many forms, depending on the type of content on a website. Regardless of the form they take, their presence is critical (and highly underrated).
This is a detailed write-up of the use of footers in web design.
A Guide to Website Image Optimization and Performance
Useful tips for image optimization, which seems one of those things we need to periodically revisit to make sure we are making the most of things that have been introduced to the web platform to help us.
See No Evil: Hidden Content and Accessibility - Cloud Four
Another "what's the best way to ...?" type of post. How to hide content in an accessible way.
Our Sponsor
Announcing An Event Apart ... apart!
You told us you love our Special Edition conferences, featuring three days of great speakers—17 of them, five more than our traditional events. We heard you! That’s why in 2019, every AEA conference is a special edition.
Take home hands-on, hard-won lessons and insights taught by front-end and UX leaders. Learn the latest on all the trends affecting your work, from the pioneers who created them. And at AEA, you don’t just learn from the best, you can also interact with them. So be part of our best year yet! CSS Layout News fans save $100 off any two or three days with code AEACSSN.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.