Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Wed, 02 Jul 2025 17:32:15 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.3 225069128 CSS Gap Decorations https://frontendmasters.com/blog/css-gap-decorations/ https://frontendmasters.com/blog/css-gap-decorations/#respond Wed, 02 Jul 2025 17:32:14 +0000 https://frontendmasters.com/blog/?p=6437 Microsoft is working on “gap decorations” and have put together a nice playground to explore them, and I had a play. The idea is drawing lines where gaps would be, rather than empty space. It’s really quite well done with lots of control (do they hit the edges or stop short? do they overlap or not? which direction is on top? etc).

To see them as of right now, you need to open Chrome Canary with a flag. Not one of the about://flags flags, but a command-line flag. I had never done that before, but it basically means drilling into the .app to launch from inside it with the flag.

Command (on my Mac) 
/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-features=CSSGapDecoration

It all really makes me want to be able to style grid areas without needing to place an HTML element there to do it.

]]> https://frontendmasters.com/blog/css-gap-decorations/feed/ 0 6437 Gap is the new Margin https://frontendmasters.com/blog/gap-is-the-new-margin/ https://frontendmasters.com/blog/gap-is-the-new-margin/#comments Thu, 11 Apr 2024 21:12:32 +0000 https://frontendmasters.com/blog/?p=1673 In 2020, Max Stoiber wrote the 🌶️ spicy Margin considered harmful. On one hand, it seems silly. The margin property of CSS is just a way to push other elements away. It’s very common and doesn’t feel particularly problematic. On the other hand… maybe it is? At least at the design system component level, because those components don’t know the context in which they will be used. Max wrote:

Margin breaks component encapsulation. A well-built component should not affect anything outside itself.

Adam Argyle wrote slightly earlier that he predicted the usage of margin to naturally decline:

Prediction: margins in stylesheets will decline as gap in stylesheets climb

Well it’s four years later now! Has any of this played out? Well it’s super hard to know. Anecdotally, it feels like gap is much more heavily used and my own usage is certainly up. There is public data on usage of CSS features, and, amazingly, margin usage does appear to be slowly going down.

Looks like a slow but sure declare the last 18 months or so.

I say “amazingly” because the way this data is collected checks if the site uses the feature at all, not how much it’s used.

The chart below shows the percentage of page loads (in Chrome) that use this feature at least once.

So seeing a dip here means less sites are using the margin properly entirely.

]]> https://frontendmasters.com/blog/gap-is-the-new-margin/feed/ 2 1673