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