Issue 121
CSS Grid for browsers that don't support grid, aspect ratios, flexbox alignment and a special offer.
News
Issue 121
Happy Thanksgiving to my US readers. As the UK seems to have decided to join in the Black Friday fun, I'll throw my own special offer into the mix. A $30 discount on my complete CSS Layout course until Monday 27th November making the price $169 rather than the usual $199. No code required, if you buy from today through Monday you'll get the discount. Check out the Table of Contents to see what is included.
Enjoy the links this week. Once again the newsletter is supported by An Event Apart, the dates for the 2018 shows are now announced and I'll be speaking at all of them! I hope to see you there.
Rachel Andrew, CSS Layout News
Learn
Using CSS Grid: Supporting Browsers Without Grid – Smashing Magazine
My latest article for Smashing Magazine gets into the subject of what to do about browsers that don't support grid layout. I want to remind you that it isn't just "old browsers", and also explain why searching for a polyfill possibly isn't the best solution.
Faux Grid Tracks · An A List Apart Article
An exploration of a technique to fake the ability to display the lines of the grid.
How we adapted the Booking.com mobile site for the iPhone X notch.
Details of how Booking.com are dealing with "the notch". What I find more interesting about this is that we have a very visible, non-rectangular device with this iPhone. I think it likely we will see more of this, which makes the CSS involved interesting to discuss.
You can find lengthy discussion of the new variables as an CSS WG issue. Something to keep an eye on.
Aligning Items in a Flex Container - CSS | MDN
I'm still working on the MDN Flexbox articles. This one covers alignment within flex containers.
Aspect Ratios for Grid Items | CSS-Tricks
Chris Coyier takes a look at possible ways to create aspect ratio boxes in Grid Layout. I like articles that just write up some thoughts around how to approach a thing - especially with new layouts. Showing your workings is really helpful to people needing to solve the same problem.
Web Typography: Designing Tables to be Read, Not Looked At · An A List Apart Article
If you need to format a data table as part of your page, these rules will help you make it readable.
Interesting
A Dao of Responsive Liquid – Jeffrey Zeldman – Medium
"To a good developer in those days, what mattered was making something that worked for everyone. (That should still be what good developers care most about, right?"
The Current State of Element Queries
"Element queries (or “container queries” if you must) continue to make their way into conversations amongst responsive web design makers, but their inclusion into any spec and the present landscape is unclear. In this article we’ll discuss what element queries are and where community consensus currently finds itself amongst developers and standards working groups."
Our Sponsor
Best Web Design Conference
Year after year, smart, focused, dedicated designers and front-end professionals tell us no other conference comes close to offering the insights and information they get from attending An Event Apart—three days of cutting-edge design, code, and content.
Set yourself Apart. Learn the design, UX, front-end skills, techniques, and technologies you’ll need this year, next year, and the years ahead–at the web and digital design conference for forward-thinking professionals.
Register now and save $100 with discount code AEACSSLAYOUT.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.