Skip to content

Issue 262

CSS OM, SVG Animation, Variable Fonts, Masonry, and DevTools

Rachel Andrew
2 min read


Issue 262

Another Tuesday and another CSS Layout News. I have a new sponsor this week, the Wireframe podcast from Adobe. Do check out the podcast, they have just launched season 3, so there is plenty in the archives to listen to as well.

This month I am looking forward to SmashingConf Live, where I'll be speaking along with a whole host of lovely folk. You can bundle a ticket for any of the Smashing Conferences along with a workshop pass, if you fancy coming along to my CSS Layout Masterclass too! Some of the feedback we've been getting from the online workshops is that people are enjoying them more than in-person. There is definitely something for being able to follow along at home, with your familiar setup.

Rachel Andrew, CSS Layout News


What does 100% mean in CSS?

A look into what 100% actually means in CSS with some nice examples.

Introspecting CSS via the CSS OM: Getting supported properties, shorthands, longhands – Lea Verou

This is a nice write-up of how to get CSS properties via the CSS OM, while creating a list of shorthands and their longhand CSS properties.

The Making of: Netlify's Million Devs SVG Animation Site | CSS-Tricks

Netlify are celebrating reach 1 million developers using their service (I'm #75,327 with Grid by Example being hosted on Netlify). Sarah writes up how the SVG animations were created.

A Lightweight Masonry Solution | CSS-Tricks

Using the experimental Firefox Grid Masonry solution, and creating a fallback.

A Look at What's New in Chrome DevTools in 2020 | CSS-Tricks

A rundown of the new features in Chrome DevTools, including the handy Inspect Element feature and ability to emulate vision deficiencies.

Getting the Most Out of Variable Fonts on Google Fonts | CSS-Tricks

A useful rundown if you want to use the variable fonts that are launching on Google Fonts.


Dark Ages of the Web

This is brilliant, and as someone who has been developing websites since the end of 1996 all too familiar.

Our Sponsor

Listen to Wireframe, a Podcast About How Design Helps Technology Fit Into Our Lives. From Adobe.

Listen to Wireframe, a Podcast About How Design Helps Technology Fit Into Our Lives. From Adobe.

Wireframe is a show for designers and the design-curious, hosted by Khoi Vinh, Senior Director of Design at Adobe. The pandemic has changed our habits and our lives, so this season of Wireframe leans into how design intersects with these changes. There are stories like:

  • how user experience design helps people manage stress and sleeplessness;
  • or find something good to watch on an online streaming service;
  • or help individuals, creators and social causes through crowdfunding.
  • It explores how design helps older family members understand technology.
  • The podcast also chats with designers trying to make voting easier. Turns out, it’s really hard.

You’ll hear from designers and design leaders who have built UX and UI experiences for companies like Headspace, Patreon, Kickstarter and Withings. Whether you’re into UX, UI, technology... or just curious about the way design impacts our everyday lives, the show is a must-listen. Subscribe now!