Safari 浏览器和 WebKit 的新功能

探索 Safari 浏览器和 WebKit 的最新功能，并学习如何制作更完善、功能更强大的网站。我们将带您了解 HTML 的最新更新、CSS 增强功能、Web 检查器工具、以及 Web API，等等。

资源

相关视频

WWDC23

WWDC22

下载

♪ 柔和乐器演奏的嘻哈音乐 ♪ ♪ 您好！我是 Kendall Bagley Safari 浏览器团队的软件工程师自从上次我们在 WWDC 相遇已经过去一年了今天我们会来聊聊 Safari 浏览器和 WebKit 上的所有绝妙的新功能和改进包括今年 WWDC 的最新更新以及过去一整年间的积累说实话这一年可真够忙的！从去年秋天起每次 Safari 的版本更新都带来了各位网页开发者一直想要的令人激动的全新功能一年来我们做出的所有改进都是在响应开发者分享给我们的反馈中的重点比如用 :has() 伪类添加了父选择器新的 flexbox inspector 还有容器查询功能我们想要在优化和简化您的日常工作的同时构建出最强大的 Web 开发软件实际上画面上的就是我们今天要介绍的一部分新内容但我们不可能在短短的一个讲座里面面俱到的讲清楚一切过去一年间 Safari 浏览器经历了七次版本更新带来了总计 162 个新网页平台功能我们很荣幸能为您提供那么多新工具来帮助您建设网站和网页 App 对 macOS 来说尽快查看更新内容的最佳方法就是使用 Safari Technology Preview 在那里您可以试用最新最棒的 Safari 和 WebKit 功能并帮助我们了解还需改进之处但如您所见新功能可真是有一大堆让我们来看看接下来要讲解的内容吧今天我们要了解一下新的 HTML 功能 CSS 改进有一大堆改进帮您改善代码架构新的 Web Inspector 工具多种新 web API 出色的 JavaScript 和 WebAssembly 功能以及安全和隐私方面的改进首先让我们来看看 HTML 有哪些更新我创建了一个网页供我和同事使用让我们拿它当作示例我这个人比较节俭喜欢再利用衣服好让我的衣橱更加持久所以我觉得一个衣物交换网站应该是一个好主意可以让我们的团队也参与进来我设计的网站有一个请求物品按键能让您在发现一件中意的衣服时展示一个供您填写的表单我想在整个网页的上方一个覆盖层上展示这个表单新的对话框元素提供了一个非常简单的方法可以稳定而方便的创建覆盖层好创建我们的申请表 CSS 中新的背景伪元素让我们可以设置模态后面背景的样式让我们请求一个物品调出对话框看到这阴影和动画了吗？看起来真棒！有人在网站上申请了物品之后发布它的人要能够接受这个请求在页面底部有一个轮播可以让您翻阅所有收到的请求但我不希望有人因为鼠标或键盘的误点按与这些不是在最前面的按钮或文本框互动我可以使用 inert 属性来解决这个问题在 JavaScript 的这里动态应用 inert 属性我就可以在用户切换轮播时禁用与非当前轮播卡片上元素的互动 Inert 还能关闭辅助技术的互动防止屏幕阅读器读出那些禁用的项目这能更清晰的引导系统知道应该与哪些元素交互最后对 HTML 来说还有新的图像延迟加载功能在我的网站上那些头部的图标需要立刻加载但那些初次加载时处在屏幕外的衣物图片可以对它们使用延迟加载这样只有在用户滚动到它们时图片才会加载这会使网页的加载和响应看起来都变得更快我很喜欢这个网站现在的样子对于那些使用辅助技术的人来说它也会十分好用这些 HTML 特性只是一个开始因为今年 CSS 也有许多值得关注之处我们对 CSS 的关注重点主要是通过更强大的架构让您可以更轻松的复用您的 CSS 鉴于此我们知道对于新 web 技术开发者的头号需求就是容器查询我们很高兴地宣布容器查询会在 Safari 16 中实装！您将可以同时使用尺寸查询和容器查询单元在这里我在尝试为这个衣物交换网站设计另一种布局我要把这个代表一件衣服的卡片变成一个可复用的组件并把这个组件放到页面布局的几个不同位置在侧边栏中这里的空间有点狭窄所以我希望组件中的内容垂直堆叠在物品的主网格中我想把第一个变成主页横幅让它占满所有横向空间并把其中的内容调整成适合宽布局的样式主内容区域中的其他物品应被分成较小的列所以我又创建了一种布局适用于中等横向空间的情况用容器查询而不是媒体查询的方式处理这种布局的变化我只需为这个组件写一次布局代码就可以在网站的任何地方任何大小的容器中使用这个组件且始终会应用正确的布局我指定了容器应该使用哪些元素以及它应该只衡量行内大小还是要同时衡量行内和块级大小这是通过 container-type 属性实现的为容器命名是一个可选项用 container-name 属性即可它能让我更加灵活的构建 HTML 然后我使用 @container 规则基于容器的尺寸规定了应用样式的条件这里如果一个衣物卡片组件处于一个宽度超过 250 像素的组件中网格就会有两列而不是一列 CSS 架构的另一个更新：级联层这是 CSS 级联的一个重大升级自 CSS 诞生之日起级联就一直是由这些不同的层组成的但无论各层中给定选择器的优先级如何作者样式也就是您作为 web 开发者所写的样式总是会覆盖浏览器默认样式而行内样式则总是高于作者样式以此类推剩下的层级也如此级联层采用了这种概念还允许您创建自己的自定义层每层中的优先级都是独立计算得出的一整层的优先级会高于另一整层无论使用中的选择器优先级如何而哪些层高于哪些层是由您通过在 CSS 中定义层顺序决定的在为大型项目构建 CSS 以及长期维护其代码时级联层会成为一种好用的工具也许您的团队会用它防止一个设计系统被覆盖或者把它与您为项目中的自定义样式使用的框架分开一切都取决于您！对您的 CSS 架构来说所有这些精彩的新改进之上的画龙点睛一笔就是 :has() 这是一个伪类用作大家期待已久的父选择器它还有许多其他功能与 CSS 中的任何其他选择器结合 :has() 可以用于寻找兄弟元素属性表单文本框状态等等它真的很强大在这里我想在每当有人为一条消息选中了“Urgent?”(紧急？) 复选框时就高亮显示整个消息框我可以用 :has 伪类来规定只要表单元素有一个复选框被选中的复选框类型输入就应用这个 CSS 我甚至都不需要用 JavaScript 我们希望这些为处理 CSS 架构所进行的改进包括 :has() 级联层以及容器查询能大大改善您作为一名 web 开发者的工作效率但让我们如此兴奋的 CSS 改进可不止这些开发者一直想要一个类似现有的视口单元的工具但要更好的适配那些在滚动时视口尺寸会变化的设备为此我们给大家带来了新的视口单元如果您想知道视口在最小状态时它的高度用 svh 即可要是想知道视口在最大状态时的高度请用 lvh 只要记住：s 代表小 l 代表大对于那些始终匹配视口当前实际高度的动态数字用 dvh 即可不只是高度我们还为您准备了更多视口单元有宽度单元与常用的高度单元配合可以改善完整性还有块和行内元素它们在多语言情况下不同语言的文本溢出情况不同时会很有用当然我们也没忘了最小和最大值但要是您想在网页上创造一些运动而不只是做出被动反应呢？以前动画一直都是高度声明性的您要指定一个开始结束和持续时间让物体动起来但让网页元素动起来一直都是一个挑战无论是在您试图让它沿着弧形轨迹移动时还是只是让它根据一个偏移量移动而我想在您点按头部横幅时添加一个秘密动画效果因为这样会很有趣有了新的 offset-path 您可以定义对象运动的轨迹用 offset-path 来设置运动轨迹用 offset-distance 来设置关键帧效果然后用 animation 属性来应用关键帧效果这样您就可以全权控制 CSS 中的动画我们还想把更多的网页控制权交给您即使是那些通常都是被浏览器引擎定义的那一部分而 over scroll-behavior 就是这类实践的第一个例子自网络诞生以来如果您点按了一个把您转至网页某处的链接它会在视觉上表现为一次跳跃有时候这会使用户迷失方向 CSS 中的 scroll-behavior 属性允许您指定是否想要这种行为它的默认值是自动也就是显示为那种跳跃如果把 scroll-behavior 指定为平滑浏览器就会平滑的滚动到页面上的指定位置您还可以用 JavaScript 方法来实现这个效果用 Window.scroll() scrollTo() 或 scrollBy() 即可最了解您的客户的人就是您自己您应该能定义自己的网页体验而不必拘束于浏览器引擎默认值在这方面 :focus-visible 和 accent-color 同样可以大放异彩如果您曾经想要对焦点选择器应用某种样式以使其更符合您的整体设计那您可能已经很熟悉焦点选择器了但这么做可能会导致损失一些基于浏览器的无障碍辅助功能而在我的网站上我喜欢用自定义表单颜色而不是内置的颜色让我们把头部横幅的蓝绿色用在这里的焦点高亮和复选框上吧用 :focus-visible 伪类您可以自定义焦点选择器的样式同时使其只在浏览器原生支持时才显示出来而且要为您的表单增加另一层自定义您还可以用 accent-color 来改变表单控件 UI 不同部分的颜色它可以用来调整复选框以及单选按钮等等另外对于 CSS 我们一直在越来越多的替换掉 WebKit 前缀它们曾经是进行特性实验的完美方法但现在我们可以逐步接近它们的标准定义属性了这样可以使您的 CSS 更易于编写提高互操作性但别担心您已有的带有 WebKit 前缀的 CSS 将在您把它们过渡至相应的 web 标准期间正常工作 Backface-visibility print-color-adjust 以及 text-align: match-parent 都与它们的对应前缀版本完全相同 Mask 和 text-combine-upright 都从前缀版本更新了语法以符合标准而且不带前缀的 appearance 属性还增加了对新的 auto 值的支持但 Safari 16 中移除了 WebKit 特定的值比如 caret 和 listitem 以符合标准规范我们新增的排版选项也颇值得关注特别是 font-palette 属性的加入使为彩色字体选择调色板变得更加简单尝试为我的网站添加 logo 想必会很酷我们可以用内置的深色或浅色调色板来试试看怎么样甚至还可以用色彩覆盖自定义加入一点明亮的黄色使其完全符合我想要的样子在排版方面还增加了 text-decoration-skip-ink 它允许您控制一条下划线或上划线与字母或字符相交时会发生什么还有 ic 单元可以让您在块方向精确排列 CJK 字符对于中文日文和韩文等语言它可以助您创建一个整洁的排版网格最后在这些优秀的 CSS 特性中我们当然还得说说 subgrid 多年来网页布局一直都是一个难题 CSS Grid 是革命性的功能但它只对网格容器的直接子级有用在这里我使用了 CSS Grid 来布局这些卡片使其根据视口宽度通过增加或移除列来调整布局这里没有进行任何媒体查询但每张卡片的内容的尺寸都是不同的有些标题会更长照片的宽高比也不同这使一切看起来很乱我想要让页面上所有的请求物品按键和消息框都对齐我想要在出现标题很长的卡片时其他卡片能随其调整使它们维持相同的间距现在我们可以用 subgrid 来实现此功能我在每张卡片上都放了一个网格并把这些网格都绑定到了它们的父网格只需写入 “grid-template-rows: subgrid”即可您可以在 Web Inspector 的 Grid Inspector 中看到所有衣物卡片的内容都完美对齐了在这里我还可以启用所有我需要的网格使用 Web Inspector 能让许多 CSS 作业都变得轻松事实上 Web Inspector 获得了许多很棒的新功能我觉得您一定会跃跃欲试的首先布局变的更容易写了因为您可以实时看到它们的情况这正是 Web Inspector 如此重要的原因另外有了新的 Flexbox Inspector 您可以直接看到各元素之间的间距在我的网站上我在为头部横幅添加图标时遇到了一些麻烦我只需点按检查元素选择布局选项卡因为我现在要看的不是网格我可以折叠这一部分直接进入新的 Flexbox Inspector 甚至只需点按一下我就能打开所有的视图而且并不影响流畅性打开所有视图后我可以清楚的看到那些井号和容器框标识着这些元素是如何排列的的以及空白空间为什么占据了视图现在我可以使用新的对齐编辑器来好好对齐这些内容了转到样式选项卡找到 align-items 旁的一个新按钮在这里我可以切换不同的选项来找到哪种样式最适合我的头部横幅 justify-content 也可以应用同样的方法同样的只需在不同选项间切换找到适合您的那一款我还觉得这些黄色图标有点太小了我想让它们变得与红色图标一样大这些红色图标应该在名称中使用了“medium”这个变量但我实在想不起来它们的全名了我可以检查这些黄色图标在 inspector 中更改它们的高度这样就可以调整它们的尺寸而且有了新的 CSS 模糊自动补全功能我可以直接输入“medium” 我想要的变量就直接出现了尽管“medium” 是在其名称的末尾这样一来那些黄色图标终于不会显得太小了而且对于我要检查的元素中不需要的各图标中的其他变量新的 CSS 工具会将它们隐藏起来但别担心如果您需要也有一个按键可以显示它们接下来的这个可能是今年 Web Inspector 最为激动人心的更新我们很高兴的宣布 Safari Web Inspector 支持开发者工具扩展了创作了您最喜欢的开发者工具扩展的人现在可以把它们移植到 Safari 浏览器上了可以使用它们在其他浏览器中使用的相同底层 API 来完成移植如果您想学习如何为 Web Inspector 开发扩展探索新 API 并开始自己设置与使用它们请务必查看今年 WWDC 的“创建 Safari Web Inspector 扩展”讲座现在我们已经了解了相当多的我们的前端技术是时候换个方向了解一下我们的 web API 有什么新内容了我们很高兴的宣布对 web push 的支持该功能会在 Safari 16 和 macOS Ventura 中更新它将在明年登陆 iOS 和 iPadOS Web push 让您可以从网站或 web App 向用户远程发送通知这是一个完全可互操作的基于标准的功能如果您已经在其他浏览器中部署实现了 web push 那您应该无需任何修改就可使其在 Safari 浏览器上工作而且您也不需要 Apple Developer 账户要了解所有详情请查看 WWDC 22 的“了解 Safari 浏览器的 Web Push”讲座如果您为 web push 感到兴奋那想必新的 web App 清单改进也会令您兴奋现在您可以在 manifest 文件中自定义用户保存在主屏幕上的图标要优先显示清单中的图标您要确保在 HTML head 中没有定义 apple-touch-icon 如果您想在 iOS 和 iPadOS 中显示一种图标而在其他移动平台上显示另一种您仍然可以使用 HTML head 中的 apple-touch-icon 来定义 Apple 设备的图标如果您没有在这两个地方设置图标用户把您的网站保存到主屏幕时就只会看到您的网站的屏幕截图激动人心的是我们在载入 manifest 文件时不再等待用户在共享菜单中选择 “添加到主屏幕”了也就是说您可以在您的整个网站上用 manifest 文件来定义网页特征进一步降低使用 meta 标签的需求此外我们的 API 还改进了相同来源情况下多种浏览上下文的网页使用情况广播频道允许您在那些不同浏览上下文间发送通知假设有人正在使用这个衣物交换网站并同时在两个窗口中打开了它然后用户在其中一个窗口请求了一件衣服我们能够发布一条消息在其他打开的选项卡或窗口中同步这个不可用状态但也许您不只需要更新后台选项卡还需要更新网站保存的文件为此我们还更新了文件系统访问 API 我们在这一年间的几个版本中对这个 API 进行了增量更新从访问域私有文件系统开始它是基于访问域的私有存储比如我的衣物交换网站上的文件不会被其他网站比如 apple.com 读取然后我们给 API 添加了 FileSystemFileHandle 的 getFile() 方法它会从您的网站的根目录读取检索得出的已存在的文件就像我们对这个我们刚刚创建的草稿文件所做的一样现在让我们看看我们今年最有活力的 API 新内容色彩 Display P3 色域使我们可以呈现 RGB 色域中不存在的颜色这是色彩选择器的一些示例弯曲的白线的左侧是 RGB 色域中存在的颜色而线的右侧则是只在 P3 色域中才有的颜色 2016 年我们为视频和照片添加了 P3 色域支持去年我们很高兴成为了第一个实装了 CSS Color Level 4 定义的新色值语法的浏览器今年我们为画布元素内的内容添加了 P3 色域的支持我们终于不必再受限于 90 年代设备的色域了您可以开始利用今天的优秀设备所支持的全部色彩再现能力过去一年间我们的 Web API 的新功能甚至还不止这些包括 shadow realms web locks 以及更新了对 ResizeObserver API 的支持用于 ResizeObserverSize 界面它能助您监控元素的 box-sizing 属性变化在我们 API 更新中有太多值得一试的部分当然了那些新功能也是事实上我们还有更多内容接下来让我们来看看 JavaScript 和 WebAssembly 的新特性如果您的网站使用 worker 而您想让这些 worker 的实例在选项卡和窗口间共享那么新的共享 worker 界面一定会有所帮助它还可能减少内存使用量不需要为每项您希望发生在后台的任务产生新的 worker 每个同访问域的浏览上下文只需要一个 worker 每个脚本都会用同样方式创建一个共享 worker 然后它们就可以用相同的端口来接收和发送消息共享 worker 将可以接收和回复来自所有不同脚本的消息这会降低您的服务器的载荷同时使客户的网页浏览体验顺滑快速我们还有一系列的数组功能要展示给您当您想要从末尾搜索时不必使用 reverse() 来改变数组现在您只需要使用 findLast() 和 findLastIndex() 方法就像我现在这样查询最后一个项目包含“鞋带”的项目和索引新的 at() 方法还能使从末尾搜索数组更加简单当索引为正时使用大括号效果很好但 at() 给了我们额外的功能可以用负值索引使您的代码更简洁易读但即使有这么多的新数组功能也没有什么能比得上我们新增的国际化功能的数量在过去一年间 WebKit 持续不断的得到了我们的 Intl 功能方面的更新我们增加了支持不同数字系统的新方法：NumberFormat 更新了 Locale 和 DisplayNames 以支持更多日历还有通过 Intl Enumeration API 支持了更多货币种类正如我所说这一年来我们新增了许多 Intl 功能可供您尝试和探索以满足您的世界各地用户的功能绝不会少对于那些已经有各种不同编程语言的项目比如 C Objective C 或 Swift 要把它们带到 web 上来只需使用 WebAssembly 无需重写即可运行有了今年的这些改进您的使用 WebAssembly 的 web App 只会变得更强大其可寻址内存扩展到了 4GB 新的零成本异常处理也会进一步提升性能总的来说 JavaScript 和 WebAssembly 毫无疑问都得到了一些激动人心的特性供您尝试说到 WebAssembly 我们还有一些安全和隐私增强它们不仅保护我们开发的网页所面向的用户还会为您作为开发者带来许多新的潜能有了新的 Cross Origin Opener Policy 和 Cross Origin Embedder Policy HTTP 响应标头您的网站可以选择加入进程隔离使您的网站运行在它自己的专用 webContent 进程中我们知道使用 WebAssembly 多线程许多 App 可以受益于在多个线程上平行运行有了这些新的标头您可以安全的使用这一功能我们的第二个安全性增强同样涉及 HTTP 标头我们支持了内容安全策略 level 3 CSP 增强了对您的加载内容的安全控制还降低了跨站点脚本以及其他漏洞的风险 Level 3 更新带来的最令人激动的新功能就是新的 strict-dynamic 源表达式 Strict-dynamic 的设计者意识到您可以用随机数来允许某些脚本然后把这种信任扩展到已受信任脚本加载的脚本中而不再需要明确的允许列表看看这能让标头变的多简洁原来的那种一长串域名的形式可能会导致允许值过多这就是我们的安全和隐私特性更新今天我们的讲座也就到此为止了但还有许多东西等待您自己去探索比如我们还带来了一些媒体更新包括使用 getUserDisplay() API 支持截屏特定 Safari 窗口 WebRTC 完美协商带内章节轨道和 requestVideoFrameCallback() 以及许多 web 扩展的酷炫新特性支持了 manifest version 3 以及一堆新的 web 扩展 API 要更深入了解今天介绍的这些特性探索 Safari 和 WebKit 在过去一年间的所有 162 项特性和改进请务必下载 Safari Technology Preview 来跟上未来的更新为探索 web 技术请查看我们的版本更新日志博客文章以及 webkit.org 上所有的精彩内容包括关于 Web Inspector 的详细文档和往常一样通过提交错误报告告诉我们您的想法和您接下来想要的东西如果您在 WebKit 中遇到了错误无论是 HTML CSS JavaScript DOM API 还是 Web Inspector 都请务必提交您的反馈使用 bugs.webkit.org 上的 WebKit 的错误跟踪系统即可有关 Safari 浏览器界面的建议或错误报告请通过 Apple 反馈助理提交问题在接下来的一年我们期待着带来更多优秀的特性持续更新 Safari 浏览器和 Safari Technology Preview 来改善 web 开发者的工作效率感谢参加我的讲座祝您在 WWDC 过的愉快再见！ ♪

2:59 - Dialog element

<!-- <dialog> element -->

<dialog method="dialog">
  <form id="dialogForm">
    <label for="givenName">Given name:</label>
    <input class="focus" type="text" name="givenName">
    <label for="familyName">Family name:</label>
    <input class="focus" type="text" name="familyName">
    <label>
      <input type="checkbox"> Can trade in person
   </label>
   <button>Send</button>
  </form>
</dialog>

3:09 - Backdrop pseudo-class

/* ::backdrop pseudo-element */

dialog::backdrop {
  background: linear-gradient(rgba(233, 182, 76, 0.7), rgba(103, 12, 0, 0.6));
  animation: fade-in 0.5s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

3:53 - inert attribute

// inert attribute

function switchToIndex(index) {
  this.items.forEach(item => item.inert = true);
  this.items[index].inert = false;
  this.currentIndex = index;
}

4:22 - Lazy image loading

<img src="images/shirt.jpg" loading="lazy"
     alt="a brown polo shirt"
     width="500" height="600">

6:46 - Container Queries

/* Container queries */

.container {
  container-type: inline-size;
  container-name: clothing-card;
}
.content {
  display: grid;
  grid-template-rows: 1fr;
  gap: 1rem;
}
@container clothing-card (width > 250px) {
  .content {
    grid-template-columns: 1fr 1fr;
  }
  /* additional layout code */
}

8:05 - Cascade layers

/* Author Styles - Layer A */
@layer utilities {
  div {
    background-color: red;
  }
}

/* Author Styles - Layer B */
@layer customizations {
  div {
    background-color: teal;
  }
}

/* Author Styles - Layer C */
@layer userDefaults {
  div {
    background-color: yellow;
  }
}

8:54 - :has() pseudo-class

<!-- :has() pseudo-class -->

<style>
  form:has(input[type="checkbox"]:checked) {
    background: #ff927a;
  }
</style>



<form class="message">
  <textarea rows="5" cols="60" name="text" 
    placeholder="Enter text"></textarea>
  <div class="checkbox">
    <input type="checkbox" value="urgent"> 
    <label>Urgent?</label>
  </div>
  <button>Send Message</button>
</form>

11:08 - Offset Path

/* offset-path */

:is(.blue, .teal, .yellow, .red)  {
  offset-path: circle(9vw at 5vw 50%);
}

@keyframes move {
  100% { 
    offset-distance: 100%;
  }
}

/* Animation */
.clothing-header.clicked :is(.blue, .teal, .red, .yellow) {
  animation: move 1100ms ease-in-out;
}

11:43 - scroll-behavior: auto
```
html {
  scroll-behavior: auto;
}
```
12:09 - scroll-behavior: smooth
```
html {
  scroll-behavior: smooth;
}
```

13:10 - :focus-visible & accent-color

/* :focus-visible & accent-color */

:focus-visible {
  outline: 4px solid var(--green);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

:root {
  accent-color: var(--green);
}

14:50 - Font palette dark mode & light mode

/* Dark mode */
font-palette: dark;

/* Light mode */
font-palette: light;

15:01 - Font palette custom colors

/* Dark mode */
font-palette: dark;

/* Light mode */
font-palette: light;

/* Custom colors */
@font-palette-values --MyPalette {
  override-colors: 1 yellow;
}

#logo {
  font-palette: --MyPalette;
}

15:55 - CSS Grid

/* Grid to layout cards */
main {
  display: grid;
  grid-template-columns: 
    repeat(auto-fit, minmax(225px, 1fr));
  gap: 1rem;
}

/* Grid to layout each card’s content */
article {
  display: grid;
  grid-row: span 5;
}

16:35 - Adding sub grid

/* Grid to layout cards */
main {
  display: grid;
  grid-template-columns: 
    repeat(auto-fit, minmax(225px, 1fr));
  gap: 1rem;
}

/* Grid to layout each card’s content */
article {
  display: grid;
  grid-row: span 5;
/* Adding subgrid, tying them together */
  grid-template-rows: subgrid; 
}

21:15 - Web App Manifest file icons

// Manifest file 

"icons": [
 {
   "src": "orange-icon.png",
    "sizes": "120x120",
    "type": "image/png"
  }
]

21:29 - apple-touch-icon

<!-- HTML head -->

<link rel="apple-touch-icon" href="blue-icon.png" />

22:36 - Broadcast Channel

// State change
broadcastChannel.postMessage("Item is unavailable");

23:14 - Origin private file system

// Accessing the origin private file system
const root = await navigator.storage.getDirectory();

// Create a file named Draft.txt under root directory
const draftHandle = await root.getFileHandle("Draft.txt", { "create": true });

// Access and read an existing file
const existingHandle = await root.getFileHandle("Draft.txt");
const existingFile = await existingHandle.getFile();

25:32 - Shared Worker

// Create Shared Worker
let worker = new SharedWorker("SharedWorker.js");

// Listen for messages from Shared Worker
worker.port.addEventListener("message", function(event) {
  console.log("Message received from worker: " + event);
});

// Send messages to Shared Worker
worker.port.postMessage("Send message to worker");

25:56 - findLast() and findLastIndex()

const list = ["shirt","pants","shoes","hat","shoestring","dress"];
const hasShoeString = (string) => string.includes("shoe");

console.log(list.findLast(hasAppString));
// shoestring

console.log(list.findLastIndex(hasAppString));
// 4

26:17 - at()

const list = ["shirt","pants","shoes","hat","shoestring","dress"];

// Instead of this:
console.log(list[list.length - 2]);

// It's as easy as:
console.log(list.at(-2));

29:12 - strict-dynamic source expression

// strict-dynamic source expression

// Without strict-dynamic
Content-Security-Policy: script-src desired-script.com dependent-script-1.com
  dependent-script-2.com dependent-script-3.com; default-src "self";

// With strict-dynamic
Content-Security-Policy: default-src "self"; script-src "nonce-desired" "strict-dynamic";

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。