苹果全球开发者大会（AppleWorldwideDevelopersConference，简称：WWDC）是苹果公司每年定期举办的信息技术交流活动。该活动旨在向世界各地的软件设计师展示Apple的最新软件和技术。通常用于展示macOS、iOS、iPadOS、watchOS和tvOS系列等苹果软件和技术。作为前端开发人员，我们的主要关注点是网络。在过去的一年里，Safari浏览器核心WebKit发布了超过162项新功能和改进，包括新的对话框元素、延迟加载、:has()伪类、WebLocksAPI、文件系统访问API、多个WebAssembly的改进等。在此次发布会上，苹果宣布发布Safari16beta版。让我们来看看Safari16beta版带来了哪些新能力。WebInspectorExtensionsSafari16带来了对WebInspectorExtensions（类似于Chrome的DevtoolsExtension）的支持。如果您的团队使用React、Angular、Vue或Ember等强大的框架，或者可能使用流行的测试套件或其他开发人员服务。现在有了SafariWebInspectorExtensions，您可以从这些框架和服务安装开发人员工具扩展，以加快您的开发。ChromeDevTools扩展的JavaScriptAPI也基本相同。您可以轻松地将现有的Chrome扩展移植到Safari。你只需要在AppStore中搜索这些扩展。当然，流行的第三方框架和服务的扩展并不是WebInspectorExtensions唯一令人兴奋的用途。通常，对开发人员工具的小改进会对工作流程产生巨大影响。要了解构建SafariWeb扩展的基础知识，如何将现有扩展转换为与Safari一起使用，以及如何打包它们以便在AppStore中分发，请查看此视频教程https://developer.apple.com/videos/play/技术会谈/110148/。WebInspectorExtensions还为SafariWebExtensions带来了其他改进，包括同步跨iOS、iPadOS和macOS启用的扩展的能力。容器查询在响应式布局布局中，经常会使用媒体查询（MediaQueries）来检测窗口的宽高，实现自元素样式的自动调整。但是，在某些页面设计中，当元素的容器大小发生变化时，元素的样式也需要随之改变。显然，媒体查询无法支持这种场景。CSS容器查询就是为了解决这个问题。它一直是Web开发人员梦寐以求的功能。简单的说：容器查询允许开发者根据容器元素的大小来设置元素的样式。它类似于@media查询，只是它根据容器的大小而不是视口的大小进行判断。Safari16支持一些新的容器查询单元：cqw查询容器宽度的1%cqh查询容器高度的1%cqi查询容器内联大小的1%cqb查询容器块大小的1%cqmincqi或最小值cqbcqmaxcqi或cqb最大WebPushformacOSSafari16onmacOSVentura即将推出WebPush。您可以远程向网站和Web应用程序的用户发送通知。“即使Safari未运行，也可以发送这些通知”。它使用与其他浏览器相同的网络标准：PushAPI和NotificationsAPI，以及ServiceWorkers。用户可以选择通过用户手势接收通知，例如单击按钮。然后系统会提示他们授予您的网站或应用程序发送通知的权限。用户可以在通知中心查看和管理通知，也可以在通知设置中为各个网站自定义样式和关闭通知。Safari中的WebPush将使用与ApplePush相同的通知服务，它支持所有Mac和iOS设备上的原生推送。此外，Apple还计划在2023年为iOS和iPadOS实现WebPush。SubgridCSSGridLayout于2017年3月发布，它彻底改变了网页布局设计的可能性。然而，Subgrid将Grid提升到了另一个层次，使得在复杂布局中安排项目成为可能，而不受HTML结构的限制。顾名思义，它除了可以对同级网格进行操作外，还具有对子网格进行操作的能力，可以实现比Grid更复杂的布局，比如下面的例子：网格模板列：重复（9、1fr）；grid-template-rows:repeat(4,minmax(100px,auto));间隙：20px；}.item{显示：网格；网格列：2/7；网格行：2/4；网格模板列：子网格；网格模板行：子网格；行间距：0；}.subitem{网格列：3/6；grid-row:1/3;}另外，SafariGridInspector可以让你非常方便的开发和调试子网格布局。FlexboxInspectorSafari16在去年的GridInspector之后添加了FlexboxInspector。FlexboxInspector可以为您提供更好的Flexbox布局可视化，并可以帮助您更好地从视觉上区分空闲空间和间隙。辅助功能改进Safari16在macOS上重建了WebKit辅助功能支持，提高了性能和响应能力。这一改进使WebKit能够在比以前更短的时间内为来自客户端（例如VoiceOver）的更多辅助功能请求提供服务。在一些复杂的网页上，花费在众多可访问性请求上的时间减少了25%。此版本还通过确保元素在可访问性树中正确表示，极大地改进了对具有display:contents的元素的可访问性支持。动画改进CSS偏移路径为Web开发人员提供了一种沿着任意形状的自定义路径制作动画的方法。offset-path属性可以让你定义一个几何路径来做动画。offset-anchor、offset-distance、offset-position、offset-rotate属性为您提供了额外的功能来优化被动画对象的精确移动。#motion-demo{offset-path:path('M20,20C20,100200,0200,100');动画：移动3000毫秒无限交替缓入缓出；宽度：40px；高度：40px；背景：青色；}@keyframes移动{0%{偏移距离：0%；}100%{偏移距离：100%；}}使用Safari16，您现在可以为CSS网格设置动画。这意味着您可以对行或列的大小进行动画更改，这再次为网络动画开辟了新的可能性。SharedWorkerSafari16新增了一种Worker——SharedWorker。与ServiceWorkers一样，SharedWorkers支持在后台运行JavaScript，但它们的生命周期略有不同。每当用户打开您的域的任何选项卡时，您的SharedWorker就会运行，并且所有打开到同一域的选项卡都可以共享同一个SharedWorker。例如，如果你想打开一个WebSocket连接到代表多个选项卡进行通信的服务器，你可以使用SharedWorker来实现这一点。其他支持通过CSSoverscroll-behavior属性控制浏览器滚动条到达边界时的行为；HTMLinput元素支持
