Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Fri, 06 Jun 2025 11:37:59 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.3 225069128 The Height Enigma https://frontendmasters.com/blog/the-height-enigma/ https://frontendmasters.com/blog/the-height-enigma/#respond Fri, 06 Jun 2025 11:37:57 +0000 https://frontendmasters.com/blog/?p=6053 You might as well really understand height and Josh Comeau has your back here. It’s really quite different than width and perhaps less intuitive. Plus when grid and flexbox get involved, things change.

]]> https://frontendmasters.com/blog/the-height-enigma/feed/ 0 6053 Reading flow ships in Chrome 137 https://frontendmasters.com/blog/reading-flow-ships-in-chrome-137/ https://frontendmasters.com/blog/reading-flow-ships-in-chrome-137/#respond Wed, 14 May 2025 22:28:54 +0000 https://frontendmasters.com/blog/?p=5868 Rachel Andrew notes an excellent new feature of CSS that Chrome is dropping first: reading-flow and reading-order.

There are CSS features that can move elements to places that make what the tabbing order (thus “reading order”) super different than what the visual order of the elements is. This can be an awkward jumpy-aroundy experience and it’s considered an accessibility problem.

This is a step toward fixing that. I took a very basic example from the spec to try it out and made a Pen. See this video I took in Chrome Canary how it goes from the wrong order to the right order:

I was imagining (hoping?) it would be more like reading-order: visual; where it would just “make it work” based on the rendered position of the elements and the direction and writing-mode and whatnot (even absolute positioning or masonry?). But it looks like this (for now?) is specifically for fixing flexbox and grid layouts and you have to specifically tell it what you’re doing.

(sorry about all the parentheticals)

]]> https://frontendmasters.com/blog/reading-flow-ships-in-chrome-137/feed/ 0 5868