Issue 135
Generated content, responsive components with ResizeObserver, and margin collapsing
News
Issue 135
Next week I'll be sending this email from California, where I'll be making a flying visit, and then conference season gets underway properly as we head into April. I look forward to having things to share from the conferences I'll be attending this year.
Speaking of conferences, the email this week is sponsored by SmashingConf. You can see me and a whole host of brilliant speakers at SmashingConf this year. I'm also running CSS Grid and Flexbox workshops at many of the events. I would love to see you there!
Rachel Andrew, CSS Layout News
Learn
Styling Empty Cells With Generated Content And CSS Grid Layout — Smashing Magazine
Some thoughts from me on using CSS Generated Content to style grid areas, with a few little examples of where you might find this technique useful.
Eric's Archived Thoughts: Displaying CSS Breakpoint Information with Generated Content
A little tip for using generated content to keep track of breakpoints while developing.
Custom properties for breakpoint debugging — That Emil is Emil Björklund
Emil Björklund adds to the previous post on displaying CSS breakpoint information with generated content, with an enhancement using Custom Properties.
Responsive Components: a Solution to the Container Queries Problem — Philip Walton
Using ResizeObserver to create responsive components. A great explanation of how and why you might want to do this, including limitations and drawbacks.
Revisiting Margin Collapse - Pine
A refresher on how margin collapsing works.
Interesting
Tables, CSS Display Properties, and ARIA | Adrian Roselli
Some information on using Grid and Flexbox to attain "responsive tables" and on using CSS table properties to do vertical centering and so on - often used as a fallback for flexbox and grid. It seems as if some more digging into this is needed, as the need for the display of tabular data that works well on small screen devices is a real one.
Developing new typography and spacing for GOV.UK Frontend - Design notes
Interesting notes on use of typography and spacing in the GOV.UK beta, the aim to give teams across sites to have a consistent way of managing this.
Our Sponsor
“Coming to Smashing Conferences fundamentally changed how I develop websites.”
— Ryan Chittenden, Director of Web Development, Fuego Digital Media
With our third SmashingConf San Francisco, taking place on April 17 & 18, we want to explore strategies for making outstanding, fast experiences, and what we all need to know today, to be more productive and make smarter decisions tomorrow.
Register for three days and save $100 off the cost of registering separately for the conference and the workshop. Check the speakers →
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.