Digging Into Facebook's New CSS

Ahmad Shadeed has been poking through the new Facebook design, and one discovery stands out from the rest.

.element {
  inset: 4px 0;
  /* Which is equivalent to: top: 4px, bottom: 4px, left: 0, right: 0 */
}

That's right: it's the inset property, shorthand for top, right, bottom, and left. Shadeed spotted it working in Chrome 80, and it works in Firefox too, but support isn't universal—Safari doesn't have it yet, as this demo shows. It's a welcome simplification, though.

Chrome 80 and Firefox 75

More CSS reverse engineering

If you enjoy learning from big-site code, Elad Shechter has broken down WhatsApp Web's CSS, and Tee Diang offers a similar look at Twitch.tv's UI. For more on inset, check browser support first.

Direct Link →