New to the web platform in March

Web 平台 3 月新功能

light-dark()

light-dark() CSS 函数使得可以为属性设置两种颜色 - 通过检测开发者是否设置了浅色或深色主题,或用户是否请求了浅色或深色主题,而无需将主题颜色包含在 prefers-color-scheme 媒体功能查询中.用户可以通过其操作系统设置(例如,浅色或深色模式)或其用户代理设置来指示其颜色方案偏好.light-dark() 函数使得可以提供两个颜色值,其中接受任何值.light-dark() CSS 颜色函数在用户偏好设置为浅色或未设置偏好时返回第一个值,而在用户偏好设置为深色时返回第二个值.

要启用对 light-dark() 颜色函数的支持,color-scheme 必须具有 light dark 的值,通常设置在:root 伪类上.

<h1><code>light-dark()</code> CSS function</h1>
<section>
  <h2>Automatic</h2>
  <p>This section will react to the users system or user agent setting.</p>
</section>
<section class="light">
  <h2>Light</h2>
  <p>This section will be light due to the <code>color-scheme: light;</code>.</p>
</section>
<section class="dark">
  <h2>Dark</h2>
  <p>This section will be dark due to the <code>color-scheme: dark;</code>.</p>
</section>

:root {
  color-scheme: light dark;

  --light-bg: ghostwhite;
  --light-color: darkslategray;
  --light-code: tomato;

  --dark-bg: darkslategray;
  --dark-color: ghostwhite;
  --dark-code: gold;
}
* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}
code {
  color: light-dark(var(--light-code), var(--dark-code));
}

.light {
  color-scheme: light;
}
.dark {
  color-scheme: dark;
}

section {
  padding: 0.8rem;
}

更多参考:

• CSS color-scheme-dependent colors with light-dark()

field-sizing

field-sizing 属性用于启用自动增长的文本输入字段

默认值:fixed

可选值:fixed`content`

textarea,
select,
input {
  field-sizing: content;
}

更多参考:

• CSS field-sizing

text-spacing-trim

在中文\日文和韩文中,在标点字符之间应用字距调整可以提高可读性并产生更美观的版式.如今,大多数印刷材料和文字处理程序都采用这种字距调整.

例如,CJK 句点和 CJK 右括号通常设计为在字形空间的右半部分具有字形内部间距,以便每个字符具有恒定的前进速度.

但是,当这些标点字符连续出现时,字形内部间距就会变得过大.在下面的两个例子中,第二个是正确的排版; CJK 句点的右半部分应被删除.

更多参考:

• CJK Punctuation Spacing: the text-spacing-trim property

@scope

可以选择特定 DOM 子树中的元素,精确定位元素,无需编写难以替换的过于具体选择器,并且不会将选择器与 DOM 结构过于紧密地耦合.

@scope (.card) {
  img {
    border-color: green;
  }
}

更多参考:

• Limit the reach of your selectors with the CSS @scope at-rule

画中画

1. CSS

可以编写特定的 CSS 规则,这些规则仅在 Web 应用(的一部分)在画中画模式下显示时应用.

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}

2. opener.focus

将系统级焦点置于文档画中画窗口所属的标签页上.

这样一来,您就可以在必要时使原始标签页回到前台. 例如,当用户需要访问的界面体验不适合较小的画中画窗口时.

align-content

支持在块和表格布局中使用 align-content,通过 align-content 可用于块布局,您将能够实现垂直对齐,而无需为该属性创建弹性布局.不需要其他属性,因为该项目仍然是块项目,唯一的变化是对齐方式.

<div class="center">
  <h1>I am centered vertically</h1>
</div>

.center {
  border: 5px solid #1a73e8;
  align-content: center;
  padding: 10px;
  max-width: 550px;
  height: 300px;
}

h1 {
  background-color: #006bee;
  color: #fff;
  padding: 10px;
}

Service Worker Static Routing API

更多参考:

• Use the Service Worker Static Routing API to bypass the service worker for specific paths

Long Animation Frames API

对 Long Tasks API 的更新,可让您更好地理解缓慢的界面 (UI) 更新. 这有助于识别可能会影响下一次绘制的核心网页指标(用于衡量响应速度)的缓慢动画帧,或识别其他会影响流畅度的界面卡顿.

更多参考:

• Long Animation Frames API

content-visibility

此属性用于控制某个元素是否渲染其内容,从而允许浏览器在需要相应内容之前不渲染相应内容.

/* 关键词值 */
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

/* 全局值 */
content-visibility: inherit;
content-visibility: initial;
content-visibility: revert;
content-visibility: revert-layer;
content-visibility: unset;

• visible: 无效果.元素内容照常进行布局和渲染.
• hidden: 元素跳过其内容.被跳过的内容必须不可被例如页内查找和 tab 键顺序导航等用户代理特性访问,亦不可被选中或获得焦点.此值类似于为内容赋予 display: none.
• auto: 元素启用布局局限\样式局限和绘制局限.若元素不与用户相关,则元素还跳过其内容.与 hidden 不同的是,被跳过的内容必须仍可照常被例如页内查找和 tab 键顺序导航等用户代理特性访问,且必须照常可获得焦点或被选中.

ArrayBuffer

向 ArrayBuffer 和数组分组添加内容, JavaScript 通过支持 detached 属性以及 ArrayBuffer 的 transfer() 和 transferToFixedLength() 方法获得一些新功能.

setHTMLUnsafe\parseHTMLUnsafe

setHTMLUnsafe 和 parseHTMLUnsafe 方法支持从 JavaScript 使用声明式 Shadow DOM.与 innerHTML 或 DOMParser 相比,这些方法还提供更简单的方法,以命令方式将 HTML 解析为 DOM.