Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Fri, 15 Mar 2024 00:48:35 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 225069128 What is safe alignment in CSS? https://frontendmasters.com/blog/what-is-safe-alignment-in-css/ https://frontendmasters.com/blog/what-is-safe-alignment-in-css/#respond Fri, 15 Mar 2024 00:48:35 +0000 https://frontendmasters.com/blog/?p=1258 Stefan Judis covered this recently, and like Stefan, I first heard of the safe keyword in CSS from Rachel Andrews at an AEA conference years ago. It’s used in addition to other alignment keywords in layout like this for example:

.flex {
  display: flex;
  align-items: safe center;
}

The extra value safe here is essentially saying “don’t let the alignment force a situation where the content is positioned off the screen where a user can’t scroll to it”. Content that is pushed off the screen in a way a user can’t scroll to it (think off the top or left of a browser window, or any element with scrolling overflow) is called data loss. I love the term data loss in CSS because that’s exactly what it is. For sighted users who only access websites with their vision, if they can’t see content, it ain’t there.

Here’s my own demo for explaining this.

I’ll post a video here below. Without using the safe keyword, and using align-items: center; in a flexbox context, you can see how if there isn’t enough room in an element, it’s possible for elements to go up over the top (block start) of the element in such a way it’s impossible to scroll to. You can scroll down just not up.

Then if you add the safe keyword, you can see the the layout won’t let the items go up into that inaccessible/unscrollable. That way you can always scroll down to get the content, the content never goes up

See how the elements stick to the top as the size of the parent changes rather than go above it? safe!

]]> https://frontendmasters.com/blog/what-is-safe-alignment-in-css/feed/ 0 1258 The Fifty-Fifty Split and Overflow https://frontendmasters.com/blog/the-fifty-fifty-split-and-overflow/ https://frontendmasters.com/blog/the-fifty-fifty-split-and-overflow/#respond Wed, 06 Mar 2024 01:55:48 +0000 https://frontendmasters.com/blog/?p=1114 A left-and-right layout is blissfully easy with CSS grid. Something like grid-auto-rows: 1fr; will do it — just put two elements as the children. This is how I like to roll though, making two equal columns that can shrink properly:

.halfs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

But Ryan Mulligan found a very interesting way to make it complicated in The Fifty-Fifty Split and Overflow. Let’s say one side needs to naturally grow with the content, but if the other side is longer, then it needs to scroll. I wouldn’t call it intuitive, but it turns out using contain: size; on the scrolling container will do the trick.

]]> https://frontendmasters.com/blog/the-fifty-fifty-split-and-overflow/feed/ 0 1114 Vertical Centering in a Block-Level Element https://frontendmasters.com/blog/vertical-centering-in-a-block-level-element/ https://frontendmasters.com/blog/vertical-centering-in-a-block-level-element/#comments Thu, 28 Dec 2023 21:48:31 +0000 https://frontendmasters.com/blog/?p=325 Rachel Andrew, blowing my mind a bit:

The align-content property from the Box Alignment spec does the job, however browsers require that you make the parent element either a flex or a grid layout. While the property was specified to work in block layout, no browser had implemented it, until now.

align-content in block layout

So now we can vertically center an element without having to reach for grid or flexbox.

Ollie Williams covered the news as well in Easy vertical alignment without flexbox, and also notes:

align-content now also works for elements with a display of table-cell or list-item.

]]> https://frontendmasters.com/blog/vertical-centering-in-a-block-level-element/feed/ 1 325