cordova 不安全 css,[译] CSS Flexbox 中安全/不安全的对齐方式

CSS Flexbox 中安全/不安全的对齐方式

我最近看了 Rachel Andrews 的演讲锦上添花:重新定义 CSS 的技术潜力。Rachel 的演讲总是能清晰而简洁地传达出满满的干货。这次演讲中有一行 CSS 代码是我从未见过的。

.something {

display: flex;

// 👇 这是什么操作?😲

align-items: safe center;

}

复制代码

CSS 的数据防丢目标

Rachel 解释说,在制定 CSS 规范时,其中一条关键原则就是防止数据丢失。我还是第一次听说这种说法。我们在 CSS 中遇到数据丢失的频率如何?做了哪些预防措施?

CSS 的使命是让访问者看到内容和元素。CSS 就是为此而生的。容器会根据内容自动向右或向下扩展。当内容超出范围,容器进入可滚动状态。除非你用 overflow: hidden; 禁用了这一功能,否则,用户可以通过滚动看到容器范围之外的内容。

我了解到,当使用 Flexbox 时,在某些情况下无法防止数据丢失。

CSS Flexbox 上下文中的数据丢失

假设有下列 HTML 代码:

CSS

is

awesome!

复制代码

搭配如下 CSS 代码:

.container {

display: flex;

flex-direction: column;

align-items: center;

}

复制代码

align-items 属性将子元素沿着交叉轴(Cross axis)居中对齐。这没什么问题,但如果容器/视口的尺寸比较小,就会导致数据丢失。

a5b6d5c6d960fffee804f75cc00911b6.png

由于 Flexbox 的对齐机制,子元素无论如何都是居中的。子元素的左侧和右侧发生了溢出。问题是,左侧的溢出部分在视口的起始边缘以外。你无法通过滚动来显示这一部分 —— 这样就发生了数据的丢失。

在这种情况下,align-items 属性的 safe 关键词就派上用场了。The CSS Box Alignment Module Level 3(仍处于草稿状态)中对安全对齐是这样定义的:

“安全” 的对齐方式在溢出时改变了对齐模式,以避免数据丢失。

如果你定义了 safe 对齐方式,那么会在发生溢出时按照 start 方式来对齐元素。

.container {

display: flex;

flex-direction: column;

align-items: safe center;

}

复制代码

format,png

safe 对齐方式让浏览器总是把元素放在用户能看到的地方。

safe 对齐的浏览器支持情况

仅有 Firefox 支持 safe 关键字,暂未实现跨浏览器支持。我不推荐现在就使用它,因为它无法优雅地降级。你可以说这种安全方式本应该是 align-items 属性默认支持的,但我也没辙,CSS 确实有些难以驯服。而制定 CSS 规范就更复杂了。🤷🏻‍♂️

那我们当下如何防止数据丢失?

Bramus Van Damme 指出,在 flex 子元素上应用 margin: auto; 即可解决问题,不需要用 safe 关键字。🎉

有问题而不自知

我从没想到居中对齐会导致数据丢失。本文讨论的案例展示了 CSS 规范和布局有多么复杂。为制定规范辛勤付出的人们,我向你们致以最崇高的敬意!

困难只是暂时的,会有那么一天,安全对齐的跨浏览器支持全面普及,让我们拭目以待吧。👋🏻

如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。

掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值