Safe/unsafe в флексбоксах
Когда в субботу записывали подкаст, внезапно обнаружил в релизноутах Safari TP поддержку внутри flexbox ключевых слов
Стефан Джадис удивился так же, как я. В своей статье он показывает, для чего эти ключевые слова нужны.
Пусть у вас есть вёрстка на флексбоксах, в колонку. И пусть вы выравниваете контент по центру при помощи
Если мне всё-таки важно не прятать левый край, можно написать
https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/
Когда в субботу записывали подкаст, внезапно обнаружил в релизноутах Safari TP поддержку внутри flexbox ключевых слов
safe и unsafe. Подумал, что это что-то новое, пошёл разбираться. Оказалось, в Firefox это есть аж с 2018 года. И в Chrome оно тоже есть.Стефан Джадис удивился так же, как я. В своей статье он показывает, для чего эти ключевые слова нужны.
Пусть у вас есть вёрстка на флексбоксах, в колонку. И пусть вы выравниваете контент по центру при помощи
align-items: center;. Если контент по какой-то причине не помещается во вьюпорт, что должен сделать браузер? Ну, я его попросил выравнивать по центру, он и будет выравнивать по центру. Но, к сожалению, левая часть большого блока будет спрятана за левым краем вьюпорта. И, как вы понимаете, подскроллить к этой спрятанной области у пользователя возможности не будет. Это — поведение ключевого слова unsafe, которое прописывать не обязательно. Для картинок такое поведение, наверное, подходит, а вот для текстов нужен другой подход.Если мне всё-таки важно не прятать левый край, можно написать
align-items: safe center;. И в таком случае браузер, когда уткнётся левым краем большого блока в левый край вьюпорта, начнёт этот большой блок двигать вправо. Скролл спасёт пользователя от потери информации. Удобно.https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/