illegalCreed

中文

English

中文

English

Appearance

参考 ​

基于 HTML Living Standard · 核于 2026-06

速查 ​

  • 折叠：<details> + <summary>，open 默认展开；同 name 组手风琴（互斥，2024）；::marker / list-style 改三角
  • 对话框：dialog.showModal() 模态 / show() 非模态 / close(值)；::backdrop 遮罩；<form method="dialog"> 提交即关并设 returnValue
  • 弹层：popover（auto 点外面关 / manual 不自动关）+ popovertarget；进顶层、零 JS、Esc 关
  • 声明式调用：command / commandfor（show-modal / close / toggle-popover…，自定义以 -- 开头）——很新，2025 起，需降级
  • 失活：inert 不可点 / 不可聚焦 / 读屏跳过；showModal() 自动对背景施加
  • 焦点：tabindex="0" 入序、-1 仅脚本聚焦、正数反模式；autofocus；DOM 顺序 = 视觉顺序
  • 焦点环：用 :focus-visible（仅键盘显示）而非 :focus；整组高亮用 :focus-within
  • 全局属性：id / class / data-* / hidden / title / lang / dir / contenteditable / inputmode / enterkeyhint / inert / popover…
  • 移动键盘：inputmode（数字/邮箱/网址盘）、enterkeyhint（回车键文案）
  • ARIA 第一条：能用原生就别用 ARIA；多数语义元素自带隐式角色；「No ARIA is better than bad ARIA」

交互元素速查 ​

元素 / 属性作用关键点
<details> / <summary>原生折叠/展开open 默认展开；toggle 事件
details name="…"手风琴（互斥分组）同名只开一个；不支持则退化为独立折叠
<dialog> + showModal()模态对话框顶层 + ::backdrop + 背景 inert + Esc 关 + 焦点收拢
<dialog> + show()非模态对话框不遮挡背景、Esc 默认不关
dialog.close(值) / returnValue关闭并回传值<form method="dialog"> 提交即关并设值
dialog 的 cancel / close 事件Esc/关闭钩子cancel 可 preventDefault() 拦截
closedby（any/closerequest/none）允许的关闭方式较新，渐进增强
popover（auto/manual/hint）弹层auto 支持 light dismiss + 互斥
popovertarget / popovertargetaction弹层触发按钮动作 show/hide/toggle（默认 toggle）
:popover-open / ::backdrop弹层样式钩子显示时命中 / 背后遮罩
command / commandfor声明式调用者控对话框 + 弹层；很新，需降级
inert区域失活不可点/聚焦、移出可访问性树

全局属性速查 ​

属性用途
id / class唯一标识 / 类名（CSS、JS 钩子）
data-*自定义数据（JS element.dataset）
hidden隐藏（display:none）；until-found 可被页内查找命中并展开
title提示气泡（别只靠它放关键信息）
lang / dir语言（BCP 47）/ 书写方向（ltr/rtl/auto）
translate / spellcheck是否翻译 / 是否拼写检查
contenteditable可编辑（true/false/plaintext-only）
draggable可拖拽（配拖放 API）
inputmode移动端虚拟键盘类型（numeric/tel/email/url…）
enterkeyhint回车键文案（done/go/next/search/send…）
tabindex焦点序（0 入序 / -1 仅脚本 / 正数反模式）
autofocus载入/对话框打开时自动聚焦
inert整片区域失活
popover把元素变弹层
accesskey键盘快捷键（坑多，慎用）
role / aria-*ARIA 语义（优先原生，少用）
autocapitalize / writingsuggestions自动大写 / 写作建议（较新）
is自定义内置元素（Web Components）
nonceCSP 一次性随机串
slot / part / exportpartsShadow DOM 插槽 / 部件样式暴露
itemscope / itemtype / itemprop…微数据（schema.org）

tabindex 三类取值速查 ​

取值可 Tab可 .focus()用途
0是（DOM 序）是让自定义组件可键盘聚焦
-1否是仅供脚本/点击聚焦的目标
正数是（数字优先序）是⚠️ 反模式，避免

command 内置值速查 ​

目标command 值等价 JS
<dialog>show-modal / close / request-closeshowModal() / close() / requestClose()
弹层show-popover / hide-popover / toggle-popovershowPopover() / hidePopover() / togglePopover()
自定义以 -- 开头（如 --archive）在目标上派发 CommandEvent（command / source）

现代特性 Baseline 状态（2026-06 核） ​

特性状态用法建议
<details> / <summary>✅ Baseline 广泛可用（2020 起）放心用
details 的 name 手风琴🟢 Baseline 新近可用（2024 起）可用；不支持则退化为独立折叠，几乎无害
<dialog>（showModal/show/close/::backdrop）✅ Baseline 广泛可用（2022-03 起）放心用
inert✅ Baseline 广泛可用（2023-04 起）放心用
:focus-visible✅ Baseline 广泛可用（2022-03 起）放心用，焦点环首选
Popover API（popover / popovertarget）🟢 Baseline 新近可用（2025-01 起）较新；老浏览器弹层不显示，需评估受众或加 JS 兜底
dialog 的 closedby🟡 渐进增强（Chrome 134+ 等）渐进增强，不支持回退默认关闭行为
details::details-content🟡 渐进增强仅做展开动画，不支持则瞬间展开
hidden="until-found"🟢 较新但已较广支持渐进增强
contenteditable="plaintext-only"🟢 已广泛可用可用
command / commandfor（Invoker Commands）🟠 很新，非「广泛可用」（Chrome/Edge 135、Safari 26.2、Firefox 144，均 2025）必须降级：不支持则按钮无效果，建议 JS 兜底或特性检测
popover="hint" / interestfor（兴趣调用者）🟠 很新渐进增强，不支持回退 auto/常规交互
writingsuggestions🟠 较新渐进增强，不支持则忽略

Baseline 含义：广泛可用＝主流浏览器稳定支持多年，可直接用；新近可用＝近一两年才在全部主流浏览器齐备，老设备可能不支持；渐进增强/很新＝尚未达成跨浏览器一致，务必能降级。以 webstatus.dev / caniuse.com 实测为准。

权威链接 ​

标准 / 规范

课程 / 指南

兼容性 / 调试

相关页 ​