大家好,这里是大家的林语冰。坚持阅读,自律打卡,每天一次,进步一点。
本期共享的是 —— 那些我们可以开始使用或提前预习的 CSS 现代属性。
有时,优化我们 App 的 CSS 只需要一行代码就能升级或增强!了解 12 个现代化属性,将其合并到项目中,享受减少技术债务、删除 JS,以及轻松赢得用户体验的乐趣。
本文会科普 3 种不同兼容性的属性:
- 稳定升级:通过替换旧技术,修复 hack(奇技淫巧)或问题
- 稳定增强:通过良好支持的现代属性,提供改进的体验
- 渐进增强:在支持这些属性时提供升级的体验,但不会尚未支持的浏览器中造成损害
稳定升级
以下支持良好的属性可以替换旧技术,辅助修复 hack或长期存在的顽瘴痼疾。
aspect-ratio
您是否曾经遭遇视频嵌入,强制采用 16:9 等宽高比的需求?截至 2021,aspect-ratio 属性在常青浏览器中保持稳定,并且是定义宽高比所需的唯一属性。
对于高清无码视频,我们可以只使用 aspect-ratio: 16/9 一行代码搞定。对于完美平方,只需要 aspect-ratio: 1,因为隐含的第二个值也是 1。
/* 16:9 高清无码 */
.aspect-ratio-hd {
aspect-ratio: 16/9;
}
/* 正方形 */
.aspect-ratio-square {
aspect-ratio: 1;
}
粉丝请注意,应用的 aspect-ratio 十分宽容,且允许内容优先。这意味着,当内容导致元素在至少一个维度上超过该比率时,元素仍会增长或改变形状,来适应内容。为了制止这种行为,我们可以添加其他维度属性,比如 max-width,这可能是避免扩展到 Flex 或网格容器之外的必备措施。
/*
应用到 Flex 子代元素,
这些元素受限于父级元素的尺寸
*/
.aspect-ratio-square {
aspect-ratio: 1;
}
object-fit
这实际上是稳定增强中最古老的属性,但它搞定了一个重要问题,并且绝对符合一行代码升级的人设。
使用 object-fit 会导致 <img> 或其他可替换元素充当其内容的容器,并使这些内容采用类似于 background-size 的调整大小行为。
虽然 object-fit 有若干可用的值,但以下是您最有可能使用的值:
- cover:图像调整大小来覆盖元素,并保持其纵横比,使内容不扭曲
- scale-down:图像在元素内按需调整大小,使其完全可见,而不会被剪切,并保持其纵横比,如果元素具有不同的渲染纵横比,这可能会导致图像周围出现额外空间
无论哪种情况,object-fit 都是与 aspect-ratio 完美搭配的属性,可确保应用自定义宽高比时图像不会扭曲。
.image {
object-fit: cover;
aspect-ratio: 1;
/* 可选:限制图像大小 */
max-block-size: 250px;
}
margin-inline
作为众多逻辑属性之一,margin-inline 用于设置水平书写模式下的左右侧内联边距的简写。
一行代码优化有手就行:
/* 以前的写法 */
margin-left: auto;
margin-right: auto;
/* 现在的写法 */
margin-inline: auto;
逻辑属性已经存在好几年了,现在的浏览器支持率高达 98%,偶尔需要前缀。逻辑属性及其对于拥有国际受众的网站至关重要。
稳定增强
这些支持良好的现代 CSS 属性可以提供改进的体验,并且还可以允许替换旧方法甚至 JS 辅助的解决方案。不太可能需要备胎解决方案,尽管这取决于您的特定 App 的考虑因素,并且始终鼓励测试。
text-underline-offset
使用 text-underline-offset 可以控制文本基线和下划线之间的距离。该属性已成为本人标准样式重置的一部分,应用如下:
a:not([class]) {
text-underline-offset: 0.25em;
}
我们可以使用此偏移量来清除下行部分,并提高易读性,特别是当链接紧密分组时,比如链接的项目符号列表。
此升级可能会取代旧的 hack,比如边框或伪元素,甚至渐变背景,尤其是与它的好基友属性“梦幻联动”时:
- text-decoration-color 可以更改下划线颜色
- text-decoration-thickness 可以更改下划线笔划粗细。
outline-offset
当我们想要元素和焦点轮廓之间的距离时,您是否一直在使用 box-shadow 或伪元素,提供自定义轮廓?
粉丝福利!您可能忽略了长期可用的 outline-offset 属性,早在 2006 就有了,它可以将轮廓推离具有正值的元素,或将其拉入具有负值的元素。
.outline-offset {
outline: 2px dashed blue;
outline-offset: var(--outline-offset, 0.5em);
}
粉丝请注意,轮廓不会作为元素盒子大小的一部分进行计算,因此增加距离不会增加元素占用的空间量。这类似于 box-shadow 在不影响元素大小的情况下的渲染方式。
scroll-margin-top/bottom
scroll-margin 属性集以及相应的 scroll-padding 允许向滚动位置上下文中的元素添加偏移量。换而言之,添加 scroll-padding-top 可以增加元素上方的滚动偏移,但不会影响其在文档中的布局位置。
这有什么用呢?它可以缓解激活锚链接时粘性导航元素覆盖内容引起的问题。使用 scroll-margin-top 我们可以在通过导航滚动到元素时增加元素上方的空间,来考虑粘性导航占用的空间。
个人喜欢在样式重置中为任何具有 [id] 属性的元素添加通用起始规则,因为它有可能成为锚链接。
[id] {
scroll-margin-top: 2rem;
}
为了在考虑粘性、固定或绝对定位元素的重叠时,获得更给力的解决方案,我们可能需要使用具有后备值的自定义属性。然后,在 JS 的辅助下,测量所需的实际距离,并更新自定义属性值。
[id] {
/* 按需使用 JS 更新 --scroll-margin */
scroll-margin-top: var(--scroll-margin, 2rem);
}
我鼓励您进一步升级此解决方案,并使用等效的逻辑属性:scroll-padding-block-start 和 -block-end。
color-scheme
您可能熟悉可以自定义深浅主题的 prefers-color-scheme 媒体查询。CSS 属性 color-scheme 是一个选用的浏览器 UI 元素,包括表单控件、滚动条和 CSS 系统颜色。适应要求浏览器使用 light 或 dark 方案渲染这些项目,并且该属性允许定义优先顺序。
如果我们要启用调整整个 App,请在 :root 上设置以下内容,即优先选择 dark 主题,或翻转顺序来优先选择 light 主题。
:root {
/* 深色优先 */
color-scheme: dark light;
/* 浅色优先 */
color-scheme: light dark;
}
我们还可以在单个元素上定义 color-scheme,比如调整具有深色背景的元素内的表单控件,提高对比度。
.dark-background {
color-scheme: dark;
}
accent-color
如果您曾经想更改复选框或单选按钮的颜色,那么您踏破铁鞋得到是 accent-color。使用此属性,我们可以修改单选按钮和复选框的 :checked 外观,以及进度元素和范围输入的填充状态。如果我们没有其他覆盖,浏览器的默认焦点“光环”也可能会被调整。
:root {
accent-color: mediumvioletred;
}
考虑将 accent-color 和 color-scheme 添加到我们的基准 App 样式中,快速实现自定义主题管理。
width: fit-content
个人最爱的 CSS 隐形宝藏之一是使用 fit-content 将元素“收缩包装”到其内容。
尽管我们可能使用了内联显示值,比如 display: inline-block,将元素的宽度减小到内容大小,但升级到 width: fit-content 可以实现同款效果。width: fit-content 的优点在于,它使 display 值可用,因此不会更改元素在布局中的位置,除非您也对其进行调整。计算盒子的大小会调整为 fit-content 创建的尺寸。
.fit-content {
width: fit-content;
}
fit-content 值是启用内在大小调整的若干关键字之一。
请考虑将此技术二次升级为相当于 inline-size: fit-content 的逻辑属性。
渐进增强
渐进增强的 CSS 属性在被支持时可提供升级的体验,且可以放心使用,而不必担心在尚未支持的浏览器中造成损害。这意味着,它们不需要备胎方案,即使它们是现代 CSS 的最新添加内容。
overscroll-behavior
包含的滚动区域,即允许滚动溢出的尺寸有限的区域的默认行为是,当滚动在元素中用完时,滚动交互将传递到后台页面。这对于我们的用户而言,最好的情况可能是有点头大,最坏的情况则是直接红温。
使用 overscroll-behavior: contain 会将滚动隔离到所包含的区域,一旦到达滚动边界,就会将其移动到父页面,防止继续滚动。这在诸如导航链接侧边栏之类的上下文中非常有用,该侧边栏可能具有与长文章等主页内容独立的滚动条。
.sidebar,
.article {
overscroll-behavior: contain;
}
text-wrap
截至去年最新的属性之一是 text-wrap,它有两个值可以搞定不平衡行的排版问题。这包括防止“orphans”,这用来描述最后一个文本行中单独存在的一个单词。
第一个可用值是 balance,其目标是平衡每行文本的字符数。
换行文本有六行限制,因此该技术最适合用于标题或其他较短的文本段落。限制应用范围也有助于限制对页面渲染速度的影响。
:is(h1, h2, h3, h4, .text-balance) {
text-wrap: balance;
max-inline-size: 25ch;
}
pretty 的另一个值专门搞定了“orphans”的预防问题,且可以更广泛地应用。pretty 背后的算法将评估文本块中的最后四行,按需调整,确保最后一行有两个或更多单词。
p {
text-wrap: pretty;
max-inline-size: 35ch;
}
使用 text-wrap 是一个很好的渐进增强。虽然但是,任何调整都不会更改元素的计算宽度,因此某些布局中的副作用可能是文本旁边多余空间增加。
scrollbar-gutter
在某些情况下,滚动条的出现或消失可能会导致不必要的布局变化。举个栗子,当显示对话框覆盖并且背景页面添加 overflow: hidden 防止滚动时,导致从删除不再需要的滚动条发生转变。
现代 CSS 属性 scrollbar-gutter 可以在布局中为滚动条保留空间,防止出现多余的移动。当不需要滚动条时,浏览器仍然会绘制一个装订线,作为除了滚动容器上的任何填充之外创建的额外空间。
粉丝请注意,当且仅当用户的系统设置不是“overlay”滚动条时,比如 Mac OS 的默认设置,此属性才有效,其中滚动条只显示为正在滚动的内容上的覆盖。不要为了 scrollbar-gutter 而放弃内边距,因为当使用覆盖滚动条时,我们会失去所有预期空间。
由于这是视觉上明显的额外空间,因此我们可以选择使用两个关键字来分配此属性:scrollbar-gutter: stable both-edges。单独使用 stable 只会在滚动条的位置添加一个装订线,而添加 both-edges 首选项也会在滚动容器的另一侧添加空间。当布局不需要滚动条可见时,这可以确保视觉平衡。