State of HTML 2024调查问卷

梅一一
153 阅读8分钟

前言

今天看到网友的一篇公众号文章，里面有个技术调查问卷，问卷问题大部分都是 web 相关的，想着作为一个 web 开发者，我也来跟一下，看看有什么好活，也欢迎各位跟读，大概是几首歌的时间（不查资料）

《State of HTML 2024》

文章地址

文章内容

  • 表单
  • 交互性
  • 内容
  • web 组件
  • 无障碍
  • 类原生应用
  • 其他工具及问题

每个问题都有三个选项

表单

datalist

没听说过，感兴趣

看起来像是一个input 预选项，目前已经有不少组件库都有类似的组件，原生支持的话好处大概是 SEO，以及少些一些逻辑代码

  <input name="country" list="countries">
  <datalist id="countries">
    <option>Afghanistan</option>
    <option>Albania</option>
    <option>China</option>
    <option>Denmark</option>
    <option>France</option>
  </datalist>

autocomplete attribute

用过，想再次使用

建议值的来源通常取决于浏览器。通常，值来自用户曾经输入过的值，但它们也可能来自预先配置的值。例如，浏览器可能允许用户保存其姓名、地址、电话号码和电子邮件地址，以实现自动完成目的。也许浏览器提供了保存加密的信用卡信息的功能，以便自动完成身份验证功能。

作用之一提交操作效率

<input name="address_firstline" autocomplete="billing street-address" />

HTML 媒体捕获

没听说过，感兴趣

在手机浏览器配了 capture 时会捕获用户摄像头而不是选择文件

而且似乎不需要 https

  <input type="file" accept="video/*" capture>

input.showPicker()

听说过，感兴趣

这玩意可以跟上面几个东西联动，但目前想不到什么详细的用途，或者可以少 JS 写点代码？但它弹出来的页面在 dom 中是没有的，感觉不好控制了

<input id="dateInput" type="date">
<button onclick="dateInput.showPicker()">Select date</button>

FormData API

用过，想再次使用

家喻户晓的 web api，使用难度不大，通常传文件用，后端需要 formData 类型请求体时传递

let fd = new FormData(form);
let data = JSON.stringify(Object.fromEntries(fd));

Customizable Select

没听说过，没兴趣

暂时看不出来有什么作用

select,
::picker(select) {
  appearance: base-select;
}

用于 contenteditable 的 plaintext-only 值

没听说过，感兴趣

前面是做复制插件时用到过，这个新属性听说是可以限制不对富文本生效，但没实际测试

<h2 class="title" contenteditable="plaintext-only"></h2>

EditContext

没听说过，一般般兴趣

2024 出的 api，没做过富文本，而且 mdn 搜不出来，得去chrome 那边搜

const canvas = document.createElement("canvas");
const editContext = new EditContext();
canvas.editContext = editContext;

caretPositionFromPoint

没听说过，很感兴趣

2024 出的 api，看着很牛，能获取节点光标坐标位置，能做精细化渲染？没用过，可能利好 AI 那边

const range = document.caretPositionFromPoint(e.clientX, e.clientY);
const textNode = range.offsetNode;
const offset = range.offset;

交互性

dialog

听说过，感兴趣

对话框标签算是很早的了，在一些 tailwind 组件库中经常看见类似的 div 实现版

<dialog id="confirm">
 <form method="dialog">
  Are you sure?
  <button value="1">Yes</button>
  <button value="0">No</button>
 </form>
</dialog>

details 和 summary 和 Exclusive accordion

听说过，感兴趣

可以用来做折叠面板，一些 tailwind 组件库就有跟它类似的

<details>
    <summary>Details</summary>
    Longer content
</details>

弹出窗口（popover） API

没听说过，感兴趣

类似 modal? 加上动画应该不错，不过看了一下兼容性，嘛...未来客气

<button popovertarget="foo">Toggle the popover</button>
<div id="foo" popover>Popover content</div>

inert 属性

没听说过，感兴趣

使其元素进入不可选中状态！酷！

  <div id=app inert class=loading>
    我是大聪明
    <h2 onclick="alert(100)">测试</h2>
  </div>

Clipboard API

用过，想再次使用

官方提供的剪切板操作 api，需要在安全环境下使用

navigator.clipboard
  .readText()
  .then(
    (clipText) => (document.querySelector(".editor").innerText += clipText),
  );

内容

懒加载

用过，想再次使用

直接等等党起飞，部分媒体标签的新增属性，加个属性就能让你资源懒加载，省去一堆逻辑，不过亲测下来，大概差半屏范围就开始加载，如果需要更精细化的控制，还得手动控制，

<img src="picture.jpg" loading="lazy" />
<iframe src="supplementary.html" loading="lazy"></iframe>

srcset and sizes attributes

用过，不感兴趣

可以提供一些源属性给浏览器判断，省去逻辑代码，亲测下来就是不够好用

<img
  srcset="fairy-med.jpg 480w, fairy-large.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  src="fairy-large.jpg"
  alt="Elva dressed as a fairy" />

资源提示（全部）

用过，想再次使用

更精细化控制页面加载速度的选项，对首屏渲染有帮助，首屏不需要但很快就需要的就延迟加

<link rel="preload" href="picture.jpg" />
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />

Content-Security Policy (CSP)

听说过，感兴趣

没记错的话，electron 新手必须碰上一次这个报错

Content-Security-Policy: default-src 'self'

fetchpriority attribute

听说过，感兴趣

资源加载的优先级属性，猜测得结合浏览器一些策略来使用，单个使用没啥效果

<img src="logo.svg" fetchpriority="high" />

blocking="render"

没听说过，一般般

没啥资料，意思大概能防止重绘重排？

<script blocking="render" async src="async-script.js"></script>

用于 AR/VR/3D 内容的 model

没听说过，不感兴趣

没做过 3d 题材项目，对我来说未来可期

<model src="3d-assets/car"></model>

controlslist attribute

没听说过，感兴趣

防止某些控件出现在媒体元素的工具栏中，大概能省点逻辑代码

<video src="fun.mp4" controlslist="nodownload"></video>

CSS Custom Highlight API

没听说过，很感兴趣

提供了一种机制，通过使用 JavaScript 创建文档上的任意文本范围，并使用 CSS 对其进行样式设置，从而在文档上设置任意文本范围的样式。 实用功能，可惜太新，等等党再等一下

// css
::highlight(my-custom-highlight) {
  background-color: blue;
}

// js
const parentNode = document.getElementById("foo");
const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);
const highlight = new Highlight(range1);
CSS.highlights.set("my-custom-highlight", highlight);

setHtmlUnsafe()

没听说过，不感兴趣

新过头了，没啥资料，大概看起了是为了安全做的 api

const value = "<p>This is a string of text</p>";
document.getElementById("target").setHTMLUnsafe(value);

parseHtmlUnsafe()

没听说过，不感兴趣

应该跟上面是一对

Document.parseHTMLUnsafe(input)

Intl.Segmenter

没听说过，感兴趣

分隔字符串的，大概是 i18n 那一类的新接口，没用过，未来可期

const str = "吾輩は猫である。名前はたぬき。";
const segmenterJa = new Intl.Segmenter("ja-JP", { granularity: "word" });

web 组件

template

用过，一般般

保存 html 但不渲染，可以后续通过 js 进行手动渲染，不参与布局计算，跟 react 的 Fragment 类似，但感觉正常情况下有点鸡肋，做框架那群人应该喜欢

<template id="counter">
 <div class="counter">Clicked {{ times }} times</div>
</template>

使用自定义元素

用过，感兴趣

原生的 web 组件，相对来说应该是冷门，不过这个好处之一是可以跨框架，未来可期，利好微应用？

<sl-switch>Switch</sl-switch>
class MyElement extends HTMLElement { … }
customElements.define("my-element", MyElement);

作用域自定义元素注册表

没听说过，一般般

const registry = new CustomElementRegistry();
registry.define('sub-element', SubElement);

Shadow DOM

用过，感兴趣

web 组件的隔离方案，用于隔离 CSS 和内部结构

this.shadowRoot = this.attachShadow({mode: "open"});

Declarative Shadow DOM

没听说过，感兴趣

看起来很强，未来可期

<host-element>
    <template shadowrootmode="open">
        <!-- Shadow content -->
    </template>
</host-element>

命令式插槽分配

没听说过，感兴趣

可 JS 控制的插槽，挺好~

this.attachShadow({mode: "open", slotAssignment: "manual" });
this.shadowRoot.querySelector("slot[name=foo]").assign(element);

ElementInternals

没听说过，不感兴趣

为自定义元素分配隐藏语义，促进可访问性，并允许它们完全参与表单。

this.#internals = this.attachInternals()
this.#internals.ariaChecked = true;

DOM Parts

没听说过，感兴趣

diff 的起源？

HTML 模块

没听说过，感兴趣

使用 import 导入 html？然后当成组件用？那也太猛了，不过各种资源问题咋解决

<script type="module">
 import { TabList } from "./tablist.html" with { type: 'html' };
 customElements.define("tab-list", TabList);
</script>

无障碍

Landmark elements

用过，想再次使用

各种 html5 的语义化标签，除了 seo 外还利好无障碍，虽然我没做过无障碍应用

tabindex attribute

用过，想再次使用

之前为了让元素可以 tab 聚焦用过，现在想想确实无障碍用得多

<div role="button" tabindex="0">I’m Tabbable</div>

focusgroup attribute

没听说过，不感兴趣

<div focusgroup="wrap horizontal">
 <!-- child elements -->
</div>

search

没听说过，不感兴趣

<search>
  <form action="search.php">
    <label>Find: <input name="q" type="search"></label>
    <button>Go!</button>
  </form>
</search>

类原生应用

在此分类中笔者大部分都没使用过，so 只做展示

File System Access API

没听说过，感兴趣

访问用户本地设备上的文件和目录。

const handle = await window.showSaveFilePicker(opts);

Badging API

没听说过，感兴趣

在 web 应用程序的图标上设置一个徽章，以一种侵入性较小、持久的方式通知更新的状态。

navigator.setAppBadge(unreadCount)

Web Share API

没听说过，感兴趣

向各种用户选择的目标公开共享内容的机制。

navigator.share(shareData)

Launch Handler API

没听说过，感兴趣

允许 PWA 控制其启动方式，例如在新窗口或选项卡中

"launch_handler": {"client_mode": "navigate-new"}

File Handling API

没听说过，感兴趣

允许 PWA 将自己注册为某些文件类型的处理程序。

"file_handlers": [{
    "action": "/open-file",
    "accept": {
      "image/svg+xml": ".svg",
      "image/png": ".png"
    }
  }]

Window Controls Overlay API

没听说过，感兴趣

允许 PWA 在标题栏区域上显示自定义内容，其控件将成为覆盖。

"display_override": ["window-controls-overlay"]

Isolated Web Apps

没听说过，感兴趣

PWA 的原生打包、权限和签名更新。

isolated-app://4tkr2qbhf7rlz2a3wo3rh4wqaaic/index.html

其他工具

都是多选题，感兴趣的可以去官方看看

  1. 您经常使用哪些静态或动态网站生成器？
  2. 你经常使用这些验证工具中的哪一个？
  3. 您使用哪些工具和服务来跟踪和提高网站的性能？
  4. 您使用哪些分析工具和服务来监控您的网站？
  5. 在初始开发阶段，您主要使用哪种浏览器？
  6. 您会咨询以下哪些资源来了解 web 平台功能？

致谢

  • 感谢各位阅读文章，如有机会，未来再见
avatar
文章
阅读
粉丝