使用 Details 与 Summary 制作原生手风琴 (含收合动画！)
手风琴是一种常见的网页 UI 模式，通常是一系列垂直堆叠的标题可以用于展开收合显示不同资讯，在 HTML 当中有项新颖的语法 <details> 和 <summary> 可帮助快速实现类似的功能，并且配合上最新的 interpolate-size 和 transition-behavior 制作滑顺的展开闭合动画。
手风琴是一种常见的网页 UI 模式，通常是一系列垂直堆叠的标题可以用于展开收合显示不同资讯，在 HTML 当中有项新颖的语法 <details> 和 <summary> 可帮助快速实现类似的功能，并且配合上最新的 interpolate-size 和 transition-behavior 制作滑顺的展开闭合动画。
为了优化网页加载顺序，本文通过实际案例说明为什么应该使用 HTML 内建的 `defer` 和 `async` 属性，先从问题出发再到三种解决方案与对比，利用原生 HTML Script 标签属性及能规划脚本的加载顺序。
HTML 元素可以拥有自己的属性，用于表达各种类的资讯，像是从外观样式到无障碍资讯到各式各样的预设属性，而 data 属性是一个正式存储资料于 HTML 元素的属性，将资讯储存在 HTML 标签属性上，使 JavaScript 与 CSS 都能读取得到元素的资料。