Issue 161
Gutters for Flexbox, container queries, Blink LazyLoad, and clip-path
News
Issue 161
I am currently in Chicago, where I did the Chicago Triathlon and the next day spoke at An Event Apart on Graduating to Grid. Next stop for me is Zurich and Frontend Conf. There are still two An Event Apart shows left this year, I'll be at both. In Orlando with my current presentation and in San Francisco with something all new! I'd love to see you there.
An Event Apart are the sponsor of the email this week, so thank you to them for helping to ensure this can continue.
Rachel Andrew, CSS Layout News
column-gap and row-gap in Flexbox
Firefox 63 will be the first browser to implement the row-gap, column-gap and gap properties for Flexbox. Let's hope other browsers follow up soon!
Learn
Advanced effects with CSS background blend modes – LogRocket
A nice article about using background blend modes.
Web Performance Made Easy: Google I/O 2018 edition | Web | Google Developers
A great roundup of web performance information, with optimization techniques and tools.
Solving container queries today | CSS Day 2018 on Vimeo
If you are waiting for container queries, it might be that you can solve your problems another way with existing technologies. Greg Whitworth explains.
Using CSS Clip Path to Create Interactive Effects, Part II | CSS-Tricks
A follow-up article explaining how clip-path can be used for interactive effects.
A native lazy load for the web platform | CSS-Tricks
A post explaining the "Blink LazyLoad" feature, what the proposal is and how it will work.
Interesting
Firefox Site Compatibility — Together, We Build a Better Web
As part of the work I do for MDN on writing layout documentation, I try to keep properties up to date with any changes. The Firefox Site Compatibility site is a useful place to keep an eye on if you want to know when things are changed or removed that might cause a problem. Often these removals are due to a specification change, where the browser has implemented a feature still a work in progress. For example, in Firefox 63 the offset- logical properties have been renamed.
Our Sponsor
Set yourself Apart
Learn with Mina Markham, Brad Frost, Val Head, Rachel Andrew, Jen Simmons, Luke Wroblewski, Dan Mall, Jon Tan, Una Kravets, Jason Grigsby, Laura Martini, Derek Featherstone, Sarah Parmenter, Yesenia Perez-Cruz, Trent Walton, Kate O’Neill, Jason Pamental, Kristina Halvorson, Dave Rupert, Gerry McGovern, Aaron Walter, Josh Clark Eric Meyer, Jeffrey Zeldman, and a few hundred of your smartest peers … during three glorious days of design, code, and content for UX designers & front-end developers.
An Event Apart is three days of sessions from the industry’s best speakers, with an intense focus on inclusive design, usability, CSS Grid, product design and more. Including a CSS Power Block afternoon featuring Jen Simmons, Eric Meyer, and CSS Layout News’s Rachel Andrew. CSS Layout News readers 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.