12 个现代 CSS 一行升级,你学会了吗?

开发 前端
在某些情况下,滚动条的出现或消失可能会导致不必要的布局变化。举个栗子,当显示对话框覆盖并且背景页面添加 overflow: hidden 防止滚动时,导致从删除不再需要的滚动条发生转变。

大家好,这里是大家的林语冰。坚持阅读,自律打卡,每天一次,进步一点。

本期共享的是 —— 那些我们可以开始使用或提前预习的 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 首选项也会在滚动容器的另一侧添加空间。当布局不需要滚动条可见时,这可以确保视觉平衡。

责任编辑:武晓燕 来源: 人猫神话
相关推荐

2022-10-09 09:30:33

CSS浏览器十六进制

2022-07-08 09:27:48

CSSIFC模型

2022-05-06 09:00:56

CSS元素Flex

2023-08-22 10:25:19

CSS动画网页

2022-10-27 09:13:58

CSSGradient

2023-02-24 08:32:50

CSS渐变属性

2022-01-20 07:31:49

架构

2023-11-08 10:12:40

架构函数元素

2024-05-30 09:43:00

2022-04-01 09:02:19

CSS选择器HTML

2024-09-26 09:10:08

2024-01-19 08:25:38

死锁Java通信

2024-02-04 00:00:00

Effect数据组件

2023-01-10 08:43:15

定义DDD架构

2023-07-26 13:11:21

ChatGPT平台工具

2023-08-01 12:51:18

WebGPT机器学习模型

2024-01-02 12:05:26

Java并发编程

2021-10-04 09:29:41

对象池线程池

2023-03-26 22:02:53

APMPR监控

2024-06-21 08:15:25

点赞
收藏

51CTO技术栈公众号