{"id":1258,"date":"2024-03-14T18:48:35","date_gmt":"2024-03-15T00:48:35","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1258"},"modified":"2024-03-14T18:48:35","modified_gmt":"2024-03-15T00:48:35","slug":"what-is-safe-alignment-in-css","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/what-is-safe-alignment-in-css\/","title":{"rendered":"What is safe alignment in CSS?"},"content":{"rendered":"\n

Stefan Judis covered this recently<\/a>, and like Stefan, I first heard of the safe<\/code> 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:<\/p>\n\n\n

.flex<\/span> {\n<\/span><\/span>  display<\/span>: flex;\n<\/span><\/span>  align-items<\/span>: safe center;\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The extra value safe<\/code> 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”<\/em>. 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<\/strong>. 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. <\/p>\n\n\n\n
I’ll post a video here below. Without<\/em> using the safe<\/code> keyword, and using align-items: center;<\/code> 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<\/em> just not up.<\/em><\/p>\n\n\n\n\t\t
\n\t\t\t
 
Here’s my own demo for explaining this.<\/a><\/p>\n\n\n\n