Issue 221
Firefox 70 lands with new layout features, styling select controls, various grid demos.
News
Issue 221
I'm in the UK, and the end of conference season is in sight! While it has been a fantastic couple of months of speaking to folk, I am definitely looking forward to staying in one place for a while. I have a couple of things coming up - tomorrow I head to Milan for Codemotion, then over to Denver for An Event Apart. Say hello if you happen to be at either of those.
Today is Firefox 70 release day, and I've included a couple of demos to show off some of the new features. I am very much enjoying the new features being implemented in Firefox right now - I also get to document a lot of them over at MDN. There is more coming in Firefox 71, and so I would really encourage everyone who reads this email to download a copy of Firefox Nightly, as you can then play with the upcoming features and log any issues you see before they land.
A new sponsor today, thank you to Flywheel for sponsoring this week.
This email is something of a labour of love at this point, and it gets expensive to send out to over 10,000 folk. If you have a product or service you would like to share with them, and help to cover the costs as well, check out the sponsorship page.
Rachel Andrew, CSS Layout News
Firefox 70 for developers - Mozilla | MDN
Firefox 70 is out today. It includes some useful things for layout fans. The grid-auto-columns and grid-auto-rows properties now support a tracklisting rather than just a single value. This is really valuable when using subgrid.
Firefox has also implemented the two-value syntax for the display property. This will enable the use of a cleaner, more descriptive syntax for display, for example display: block flex for a block level box with flex children.
See the next two items for demos of these features.
Learn
Two-values for the display property
A quick demo of the two-value syntax for the display property, which ships in Firefox 70.
Tracklistings for grid-auto-columns and grid-auto-rows
Another demo of a Firefox 70 feature, the second demo needs Firefox Nightly as it also includes subgrid, as it is when using subgrid you really need this feature.
CSS-only horizontally-scrolling cards with snapping - DEV Community 👩💻👨💻
A nice demo with some good discussion in the comments about how to make it more accessible and usable.
Weaving One Element Over and Under Another Element | CSS-Tricks
Using CSS Blend Modes and CSS Grid to weave two elements together.
Bidirectional horizontal rules in CSS - DEV Community 👩💻👨💻
Using CSS Logical Properties to write the same CSS for RTL and LTR languages.
Interesting
CSS Grid Bullet Journal
A bullet journal layout using CSS Grid, use the Firefox Grid Inspector to see how it goes together.
Can we please style the control?! | Greg WhitworthI love this post as it demonstrates the level of thinking that needs to go into something that people might think of as "just" adding styling support to an element. I've long seen the links in my own work between working on products and working on web platform features, and it is a way of thinking I try to encourage with frustrated web developers who think that adding some feature or ability should be straightforward.gwhitworth.comOur Sponsor
Power up your development workflow with Local by Flywheel!Local by Flywheel is a free local WordPress development application that was created with the developer in mind and makes building, testing, and launching WordPress sites a total breeze! This fully-featured tool contains everything you’ll need to set up and develop local WordPress sites, allowing you to refrain from breaking things on your live site! It’s simple enough for beginners to use, but also offers plenty of advanced features if you want to customize the way your local environment works. Local by Flywheel’s features are endless, but here are a few crowd favorites: One-click WordPress installations, letting you set up your local sites fast Local SSL support, test your sites locally without any hassle Easily access your local sites' root files and database Shareable demo URLs, allowing you to show your site to your clients, collaborators, or friends Customizable environments for developers, helping you configure the way your local site runs An Add-ons Library, allowing you to customize Local’s application with the features you need So, what are you waiting for? Revolutionize your workflow and download Local by Flywheel for free today on Mac, Windows, or Linux!localbyflywheel.com
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.