Robin 最近感叹了人们常有的抱怨,即 CSS 令人沮丧。人们对 CSS 是什么以及它能做什么存在误解。关于 CSS 是一种什么样的语言,也存在争议。甚至对于应该在哪里编写 CSS,也有不同的观点。
Rachel Andrew 在 新的演讲中,该演讲来自 2019 年 An Event Apart 华盛顿特区,带我们回顾了我们过去在使用 CSS 时遇到的问题以及我们用来克服这些问题的“技巧”。CSS 在过去几年里发生了很大的变化,虽然这些变化有时让人觉得复杂和困惑,但它们的设计初衷是为了解决我们一直希望 CSS 能做的事情。
观看完整一小时的演讲非常值得。以下是一些突出的要点。首先,一些对常见 CSS 抱怨的驳斥
- 你永远不知道网络上任何东西的高度。 浮动从未解决这个问题,因为它们只会将事物并排放置,而不是了解周围的项目。新的布局方法,包括 CSS Grid 和 Flexbox,实际上会查看我们的元素并帮助它们保持一致的行为。
- Flexbox 奇怪且不直观。 它可能不是你想象的布局方法。如果我们将其视为一种将事物并排排列的方法,它就会感觉很奇怪,行为也很奇怪。但是,如果我们理解它的本质——一种查看不同大小的元素并返回最符合逻辑的布局的方法——它就开始变得有意义了。它分配空间,而不是将事物挤压到一个盒子里。
Rachel 继续向我们展示了 CSS 未来想要为我们做的事情
- CSS 想要避免数据丢失。 诸如
safe
和unsafe
之类的新的对齐关键字将为我们提供额外的控制权,以定义我们是否希望 CSS 积极避免意外隐藏的内容或允许这种情况发生。
.container {
display: flex;
flex-direction: column;
/* Please center as long as it doesn't result in overflow */
align-items: safe center;
}
- CSS 想要帮助我们真实地处理溢出。
min-content
和max-content
关键字使创建足够容纳内容但不过宽的盒子以及尽可能大的盒子成为可能。
.container {
width: min-content; /* Allow wrapping */
}
- CSS 想要以逻辑的方式布局内容。 网络并非从左到右。Grid 和 Flexbox 静默地引入了一种从头到尾的思考方式,这种方式与方向无关。这催生了关于 逻辑属性和值 的新规范。
- CSS 想要使内容更易于移植。 CSS Regions 允许我们将内容从一个元素流到另一个元素。虽然这可能是一个有缺陷的比较,但有点像老式马里奥兄弟游戏中的管道,你在一个位置跳入一个管道,就会将你的角色从另一个位置的另一个管道中弹出……但我们可以自己定义这些源,而无需担心愤怒的植物试图吃掉我们。

总之,这些仅仅是 Rachel 在她的演讲中涵盖内容的皮毛。这是一个很好的提醒,An Event Apart 拥有一个 来自优秀演讲者的宝贵演讲的完整库,并且参加 AEA 活动是一次值得体验的宝贵经历。Rachel 的演讲来自去年的华盛顿特区活动,而且,事实证明,下一场活动将于今年 4 月 13 日至 15 日在该地举行。如果你不能参加那个,那么全年在美国还有 其他几个。
哦,当然,我们还有一个折扣码给你!使用AEACP
可享受任何场次 100 美元的折扣。