专为 Safari 15 设计

♪ ♪ 嗨 我是珍西蒙斯 我来这里是想谈谈新的Safari 浏览器如何影响网页设计和开发 如果你是网页设计师、网页开发人员 或者是参与制作网站或网络app的 任何角色 那么本次课程适合你 对于Safari浏览器来说 这是重要的一年 在本次课程中 我们将重点关注 Safari浏览器的变化对于视觉 或交互设计的影响 Safari浏览器拥有全新的设计 默认情况下 你的网站看起来会很棒 但如果你想更进一步 本课程将使你 能够让你的作品在新的 Safari浏览器中大放异彩 我们将讨论macOS、iOS 和iPadOS中的一些重要新功能 以及它们将如何影响网页 我们将介绍CSS中的新功能 包括我最喜欢的新的宽高比属性 我们将看看窗体控件 我们新实施的控件 以及iOS和iPadOS上窗体的 全新外观 让我们从浏览器 本身的设计开始 从网络浏览器发展的早期开始 我们使用的大多数浏览器都有 一些基本的共同点 顶部有一个非常高的工具栏 其中有自己一行网址列 网站在这个空间内 这个通往网络的入口、视区 当然 作为用户 我们已经训练自己 将所有注意力集中在 我们使用的网站上 但多年来 浏览器本身 一直保持着强大的视觉存在感 无论网站的外观和感觉如何设计 浏览器界面都会把你的设计框入其中 并主导该设计 如果我们可以摆脱那个框架 并将网站的设计扩充到 窗口的每个边缘会怎样？ 这就是我们在Safari浏览器15中 所做的 今年 我们重新构想了 我们所知的浏览体验 我们将所有重点放在网络内容上 新的Safari浏览器 通过更改背景颜色 将标签栏融入每个网站 整个界面在一条线上 界面会根据需要而自然呈现 这使你的内容感觉更广阔 每个网页或网络app接管 扩充功能到窗口的四个边缘 浏览器界面遵从于内容 那么是什么决定了工具栏的背景 使用哪种颜色呢？ 作为网页设计师或开发人员 你可以选择颜色 和代码以将其添加到你的HTML中 对于不提供颜色的网站 Safari浏览器会找出要使用的颜色 有时Safari浏览器 会匹配网页的背景颜色 其他时候 会匹配标题背景 要为工具栏颜色提供选择 请将元标记将其放在HTML标题中 使用name=“theme-color,” 并使用内容属性指定颜色 通过在HTML标题中提供此信息 Safari浏览器将在页面加载时 立即获取它 它也是声明性代码 使用起来非常简单 你可以通过设置两种颜色 来支持明暗模式 是的 现在你可以向元标记 添加媒体属性 在这种情况下 media=“(prefers-color-scheme: light)” 用于第一个元标记中 和第二个元标记中的“(prefers-color-scheme: dark)” 这是我们今年春天提出的 HTML规范的新增内容 它为我们提供了一种简单 而强大的方法来结合 用户要求的配色方案 在支持name=“theme-color” 但还不支持在元标记上 使用媒体属性的浏览器中 这些浏览器将使用 第一个主题颜色声明 并忽略其余部分 所以把你的后备放在第一位 而不是最后 就像你在CSS中所做的那样 即使你的网站没有完整的 深色模式设计 你也可能希望在设备处于深色模式时 为标签栏设置自己的颜色 如果你指定的颜色太浅 Safari浏览器将进行调整 以便为用户 提供他们要求的深色模式体验 你可以在网络清单文件中定义它 而不是在HTML标题定义主题颜色 如果你在两个地方都指定了它 则HTML标题中的颜色 就是使用的颜色 现在是2021年6月 还没有一种方法可以 在网络清单文件中 为明暗模式定义多种颜色 工作小组现在正在讨论 以解决这个问题 还有非常少数的 颜色范围Safari浏览器不会使用 这些颜色 真的会完全妨碍 用户的体验 可能使网页无法访问 对于这些 Safari浏览器 会做一些其他的事情 比如这个 会将这个网站的标签栏更改为白色 如果你选择的颜色似乎没有作用 请尝试稍微调整一下 如果你愿意 可以将网站不同部分的 主题颜色设置做出变化 每个单独的HTML页面 都有自己的标头 或者 你可以使用JavaScript 来动态更换主题颜色 以响应用户的行为 仔细考虑你的设计 可以将标签栏 无缝融入你的网站的方式

这就是如何在macOS上的 Safari浏览器15 和iPadOS和iOS 15上的 Safari浏览器中 创建网站或网络app 填满整个窗口的感觉 接下来 让我们看看另外两个小调整 你可以通过这些调整 将你的网站真正提升到一个新的层次 我们中的许多人在工作时 都会在网络浏览器中打开很多标签页 新的Safari浏览器提供了 一种直观的方式 来将这些标签页组织成群组 我真的很喜欢这个 我将我的工作项目组织成不同的群组 并根据我的需要命名每个群组 然后我可以把它们收起来 把没有在做的事情放一边 知道我以后可以在任何设备上 重新加载这些标签页 因为标签组在macOS、iOS 和iPadOS之间同步 虽然标签页群组使我们能够 整理标签页栏 但仍然可以在任何一个窗口中 打开大量标签页 当有很多标签页时 图标对于轻松识别 哪个标签页非常重要 你需要确保为你的网站 提供一个出色的图标 该图标支持高分辨率设备 具有透明背景的网站图标 看起来特别棒

顺便说一下 许多团队使用自动化工具 来生成不同大小和格式的图标 以支持各种设备 通常 此类工具会生成 指定主题颜色 以及HTML标头的图标代码的代码 或者也许你的CMS或你的前端框架 会定义主题颜色 而你没有意识到 检查看看 测试该颜色 看看它是否适合你网站的设计 也许可以将其更改为更好的颜色 当大多数人查看新的标签栏时 他们只会在一行中看到所有标签 作为制作网站的人 你可能会注意到 当网站加载到浏览器窗口中时 该网站的标签页会显示区域名 当网站位于背景标签页中时 网页标题就是显示的内容 即HTML标头中 标题标签中的文本 页面标题的空间可能是有限的 因此为你的网页标题制作 一个周到的模式很重要 标题越快切入主题 用户就越容易找到他们想要的标签 有些网站将网站名称放在第一位 然后将页面名称放在第二位 相反 将内容标题放在首位 这样 如果有人在多个标签页中 打开你的网站 则更容易分辨哪个标签页是哪个 标签栏、网站图标和页面标题的颜色 都是网站设计的一部分 它们不会出现在网页本身上 但会深刻影响某人对你的网站 或网络app的体验 为了向你展示更多关于 如何利用主题颜色meta标签的力量 我为你介绍迈尔斯 嗨 我是迈尔斯 我正在做狗狗DC 这是一个网站 大家可以在WWDC期间 播放他们的狗的视频 在这里 你可以在Safari浏览器中 看到玛姬的直播 它看起来好开心！ 我已经开始暂停了直播 但我会暂时取消暂停

接得好 在狗狗DC的右侧 你可以实时评论玛姬有多棒 现在 在窗口的顶部 Safari浏览器15将标签栏涂成黑色 实际上是我页面的背景色 你可以看到黑色被当作底部 中心内容区域的背景 在标签栏中 黑色看起来不错 整个窗口看起来像是一个整体的 连贯的设计 你还可以在标签栏中 看到Safari浏览器 提到我的页面不安全 这是我希望的 因为这是我的开发环境 现在 我们在网站顶部 还有一个浮动的蓝色栏 看起来非常棒 可以延伸到标签栏 所以如果我在这里的编辑器中 进入我的原始代码…

我可以覆盖Safari浏览器 自动发现的黑色 以匹配这种美丽的蓝色

我将添加这个元标记 它会将蓝色 扩大到标签栏 然后我将重新加载并查看它的外观 看起来很不错 但我们设计了狗狗DC 在顶部包含一个水平的 灰色时事通讯栏 这实际上会中断颜色 进入顶部标签栏的流动 为了获得不间断的画面 让我们用另一种方式来显示 时事通讯栏 而不是用背景颜色

这样啊 我以后会继续修正 我现在要删除时事通讯栏

哇 现在看起来很棒 不被干扰的颜色 在Safari浏览器15中闪耀出色 当然 同样的效果也适用于iPadOS 好的 我现在可以坐在这里整天看着玛姬 但我真正想做的是 把她放在前面和中间 把除了她和聊天区以外的所有东西 都调暗 因为我认真对待那些狗狗评论 所以当然 我要点击这个剧院模式按钮

可是等一下 当我进入剧院模式时 标签栏仍然是彩色的 如果我们在进入剧院模式时 更新主题颜色 剧院模式会更好一点 好吧 我们可以在我的JavaScript中 解决这个问题 稍早 珍向你展示如何在Meta元素 本身中使用媒体查询 来自动对环境中的变化做出反应 例如暗模式 但是 对于由我的页面本身 发起的更改 我可以使用JavaScript 以更主动的方式执行此操作 以便在进入剧院模式时 使用标准JavaScript 简单地修改meta元素本身

而且 当然 我不能忘记 在退出剧院模式时重置元素

让我们看看现在是什么样子

真完美 完成了 看起来好多了 现在我终于可以专注于玛姬了 换你了 珍 狗狗DC 迈尔斯 一旦它上线 我一定会去看这个网站 谢了 我真的很喜欢这为网页设计师 开辟了另一种方式 来影响人们对网络的本能体验 现在让我们更深入地了解iOS上 发生的事情 你会注意到这里在顶部 也使用了主题颜色 环绕硬件传感器的周围 因此网页或网络app填满整个屏幕 你还会注意到我们已将标签栏 移至屏幕底部 这将它直接放在用户的拇指下 使他们更容易接触到 尤其在他们单手使用手机时 在标签页栏上向侧面滑动 以在标签页之间切换 并向上滑动以查看所有标签页 并访问标签页群组 当用户滚动网页时 标签栏会最小化到最底部的域名 以确保人们知道他们在哪里 当他们将页面拉回时 展开的标签栏会重新出现 所有这一切都意味着 你制作的网站和网络app 是画面中的闪耀明星 但如果你在页面底部 构建了一些重要的东西 现在它被新的标签栏 覆盖了怎么办？ 这是你想要在CSS中 使用环境变量的地方 以确保有足够的内边距 或边距或网格轨道 或者你编写排版代码的方式 你可以使用环境变量 来确保任何会受标签栏影响的 用户界面设计 或内容都不会受到影响 那么什么是环境变量呢？ 这是浏览器提供的动态测量 在这里你可以看到 绿色就是所谓的安全区 当标签栏在底部展开时 安全区域从上方开始 随着标签栏最小化 安全区域的尺寸发生变化 安全区域嵌入底部环境 是衡量从安全区域 到窗口底部的像素数量 它很像CSS自定义属性中的 var函数 例如 也许你已经使用自定义属性 将所有颜色转换为变量 只是由浏览器定义它 而不是你来定义这个变量 它提供有关环境的信息 你可以在代码中的任何位置 使用该长度测量 包括在计算中 在这里 我的页脚位置是粘性 与一些内边距 将我的两个连结 从页脚的边缘推开 我定义了一个内边距底部 1rem + env(safe-area-inset-bottom) 在许多情况下 这将是1rem+0 在iOS上 它将是1rem加上 清除标签栏所需的距离 有四个环境变量提供 从安全区域边缘到窗口边缘的测量： env(safe-area-inset-top)， -right、-bottom、和 -left 这些环境变量不仅仅适用于 Safari浏览器 它们在CSS规范中定义 可跨不同浏览器、设备 和操作系统工作 如果要进行垂直调整 则需要采取使用环境变量的操作 默认情况下 Safari浏览器不会尝试移动内容 然而 当iPhone侧向旋转时 它的运作方式会有所不同 还定义了一个安全区域 以避开硬件传感器外围 和屏幕的圆角边缘 默认情况下 Safari浏览器会自动将网页内容 从左右边缘移入 并放入安全区域 你可能想知道为什么 好吧 如果相反 Safari浏览器将每个网站扩大到 左右边缘 内容可能会不见 在这里 文字被盖住了 这对可用性不利 为防止数据丢失 Safari浏览器会将内容 放入安全区域 包括当网站使用 width=device-width 元窗口标签时 这是响应式 网页设计中常用的Meta标签 但我当然希望这个设计看起来更好 我想让我的紫色标题和照片 延伸到屏幕的边缘 我可以表明我希望浏览器将内容扩大到 左右边缘 通过将元窗口标签更改为 viewport-fit=cover 现在我要负责确保排版有效 我将使用环境变量 来确保内容完全可见 我可以在标题文本 和段落文本上定义 env(safe-area-inset-left)的左边距 有关安全区域插入 和环境变量的更多信息 请查看WebKit博客上的文章 《为iPhone X设计网站》 链接在本次课程的注释中 让我们来找迈尔斯 看看环境变量是如何运作的 现在让我们看看狗狗DC在iPhone 上的Safari浏览器中是什么样子 在我的iPhone上 我们可以像之前一样看到玛姬 但这次是在更小的设备上 可是等一下 好像有问题 当用户滚动聊天区时 输入区与标签栏重叠 狗狗DC明确使用vh单位 从上到下调整自身大小 明确采用整个窗口的大小 现在却和标签栏共享了 作为用户 我可以滚动 以最小化标签栏 这非常简单 但作为开发人员 我想确保我的用户 即使在滚动时也能获得最佳体验 幸运的是 我可以使用安全区域嵌入 将输入区域向上移动适当的量 我所要做的就是添加底部内边距 并将其设置为safe-area-inset-bottom

然后我只是重新加载我的网页

实际上 我只是使用了Safari浏览器 15中我最喜欢的一项新功能： 下拉刷新 看来 这与我想要的非常接近 但现在看起来有点太高了 我看到问题了 当输入区域已经有底部边距时 我已经给了它底部内边距 这两个东西垂直堆叠 所以看起来我应该只更新现有的边距 以使用安全区域插入 让我们再次调整这些样式 看看现在是什么样子

完美 这实际上显示了环境变量的威力 它们可以适用于你风格的任何长度 你可以在边框、边距 内边距、行高等任何内容中使用它们 随着标签栏的最小化和扩大 环境变量的值会自动更新 并且Safari浏览器会在更新时 自动使用新值 重新排版页面 你还可以在狗狗DC中看到 聊天区域是如何在标签栏展开时 调整大小的区域 上面的所有东西都保持相同的大小 而下面的所有东西都绕着标签栏 这是因为我们使用Flexbox排版 这种行为非常自然且容易创建 如果你还没有开始使用这些 更现代的排版模式 比如Flexbox或Grid 现在是重新审视它们的好时机 接下来 让我们听听珍 介绍Safari浏览器15中一些 更出色的功能 谢了 迈尔斯 环境变量是另一个强大的工具 用于创建 动态响应某人使用的任何设备的排版 让我们也来看看当有人将网站 另存为主屏幕app时网站的外观 我可以轻点一下这个网站 到我的主屏幕上 现在我网站的图标在我的主屏幕上 如果我点击 就可以看到该网站 作为主屏幕app打开 看起来棒极了 主题颜色填满了屏幕顶部 就像在Safari浏览器中一样 我得到了类似app的体验 你会注意到底部没有标签栏 因为我们不在 Safari浏览器的app中 我们在弹性网页设计app中 这就是新的Safari浏览器 以及如何确保 你的网站看起来很棒 接下来 让我们谈谈macOS、iOS 和iPadOS的几个惊人的新功能 以及它们将如何影响网络 通常 人们对你网站的第一次体验 是当其他人告诉他们时 例如当一个人在信息中 发送一个链接给其他人时 无论何时发生这种情况 该网站都会显示为一个 简单的富链接 这些富链接的运作方式 在iOS、iPadOS和macOS上是一致的 今年 通过与你共享 我们添加了许多新地点 和许多新方式 供大家 相互共享网站内容 这还只是两个 你需要花时间确保你的网站 在以富链接呈现时看起来很棒 默认情况下 如果不出意外 富链接将选取网页标题 网址和网站图标 并以简单的方式显示它们 我们可以通过使用在开放图形协议中 定义的名称的meta标签 添加到我们的HTML标头中的 meta数据 来改进这一点 让我们指定一个比网页标题 更适合此上下文的标题 我们将指定要显示的图形 我们希望这个图片 能成为这个特定网页的东西 就像这个页面内容中的主页横幅一样 如果我们愿意 我们也可以提供视频 如果用户允许 视频将自动无声播放 他们可以点击它来听到声音 你可以 在developer.apple.com上的 短视频《确保精美的富链接》中 了解更多详细信息 自定义富链接 是另一个细节 可确保大家 对你的网站或网络app有出色的体验 接下来 让我们来看看 视觉智能和网络 网络上的很多文字都卡在图片中 从Safari浏览器15开始 我们使用视觉智能来释放文本 现在大家可以直接与它互动 就像他们与网页上的 任何其他文本一样 这是推特上的一张充满文字的图片 当我们将鼠标悬停在它上面时 是否看到鼠标光标变成了光标？ 现在我们可以拖曳这个文本并复制 就像任何其他文本一样 每当你在macOS Monterey上 将鼠标光标悬停在图片上 或在iOS或iPadOS 15上 触碰图片时 视觉智能都会快速找到并识别 该图片中的所有文本 一旦视觉智能找到文本 你不仅可以选择和复制文字 还可以查找、翻译 使用该短语搜索网络、共享文本 收听文本 就像任何其他文本一样 视觉智能发现的文本 它有点像网页的一部分 又有点不像网页的一部分 文本被注入到图片内部的 影子DOM中 这代表它不受JavaScript的影响 但它受z-order的影响 所以 如果有东西覆盖在你的图片上 比如一个透明的盒子 视觉智能将无法在下面的图片中 找到任何文本 顶层会妨碍运作 我们已将视觉智能合并到 旁白等辅助技术中 让更多人可以使用图片中的文本 但这并不意味着此功能会改变 当前辅助工具的最佳实践 当然 网络上主要由文本组成的内容 确实应该作为 HTML中的文本放在网络上 使用网络字体设置样式以赋予 其外观和感觉 如果你愿意的话 但作为文本内容 这仍然是最佳方法 对于照片、插图或其他图片的内容 最佳做法仍然是在图片元素上 包含替换文字作为属性 出色的替代文字提供了 只有人类才能解释的含义和上下文 另外 并非所有浏览器 都具有视觉智能 因此请继续确保你网站上的图片 具有有用的替代文字 也就是说 能够访问文本 非常棒 直到现在 你必须能够看到、阅读或重新输入 才能引用其他地方 接下来 我们来看看过去一年 在WebKit中实现的CSS 先说宽高比 宽高比是一个新的CSS属性 允许你为任何元素 设置首选宽高比 但是 “设置首选宽高比” 是什么意思？ 好吧 让我们首先看看网络上 具有自然宽高比的内容种类 图片就是一个很好的例子 假设我们有一张玛姬的图片 其宽度是高度的两倍 该图片的宽高比为2:1 我们将把这张图片放在网页上 并通过添加 width: 100%和height: auto 使图片有弹性 这是一种经典的响应式网页设计技术 由于图片具有自然的宽高比 因此高度会自动 随宽度变化而变化 这张照片的宽度总是是高度的两倍 而且玛姬总是看起来非常漂亮 这种行为太常见了 我们几乎不会注意到 这就是图片的运作方式 当你使用视频元素 将视频放入页面的HTML时 视频的运作方式相同 视频文件也具有自然的宽高比 当浏览器计算页面排版时 视频元素会将该宽高比传达给浏览器 但并非所有内容都具有自然的宽高比 在这里 我有一个文章元素 在里面 有一个标题和一个段落 默认情况下 文章元素的 宽度为自动 高度为自动 在这种书写模式下 宽度自动就代表 请将这篇文章拉长 让它占据 100%的可用空间 高度自动代表够高 以适合视图内的所有内容 并且不要更高 我们可以看到当文本列变窄时 文本如何换行 并占用越来越多的垂直空间 当列变宽时 文本会回流 并占用越来越少的垂直空间 框的高度正在调整以适应文本内容 不要太短也不要太高 不考虑任何形式的宽高比 在网站的大部分历史中 这就是排版的运作方式 任何关于使用正方形 或制作盒子的平面设计想法 都是一致的 那些设计想法 好吧 他们被扔进了 “不 网络不是这样运作的！” 直到现在 现在我们可以编写CSS来定义 元素的首选宽高比 否则这些元素就没有了 让我们在我们的代码中添加 aspect-ratio: 1/1 它表示无论最终的宽度是多少 将其视为一个单位 然后将高度也设为一个单位 这意味着请使其成为一个正方形 为了保持那个正方形 高度变得比以前更大 但是当有太多内容无法放入 那个框框时会发生什么？ 默认情况下 框框会自动变高 使用一行代码 我们可以创建一组 具有任何特定宽高比的正方形 或任何形状的框 知道如果其中一个框中的内容更长 该框将增长以防止溢出 如果我们希望始终遵守宽高比 即使这确实会导致溢出 我们可以在代码中添加最小高度0 也许我们想以另一种方式处理溢出 比如添加溢出：滚动 现在 我一直在写 使这个平方为1/1的值 但是我可以将其写为aspect-ratio: 1 如果只有一个数字 浏览器会认为它“超过1” 事实上 有很多方法 可以表达相同的宽高比 包括使用十进制数 这使我们可以自由地编写宽高比 以你在其他行业中可能熟悉的方式 来制作 比如电影和电视或艺术和设计 在过去的十年里 在网络上使用这些比率 几乎是不可能的 尽管这些比率在人类文化中 占有深刻而有意义的位置 建筑、绘画 书籍设计、现代印刷设计等 现在我们可以使用这些比率 构建我们的排版 尤其是当你将宽高比 与CSS网格相结合时 各种新的设计可能性都会打开 说到电影和视频 宽高比的一个非常常见的用例 是来自第三方服务的嵌入视频 如果你使用YouTube、Vimeo Wistia 或许多视频托管提供商中的任何一种 这些提供商都会为你提供 一个iFrame来嵌入你的视频 iFrame元素不是具有 自然宽高比的元素 当响应式网页设计出现时 我们想让我们的嵌入式视频有弹性 但我们遇到了麻烦 我们一直在使用CSS中 令人困惑的内边距技巧 或使用JavaScript来调整视频大小 现在我们可以添加一行CSS 来为iFrame提供首选的宽高比 对于一个非常常见的问题 这是一个非常优雅的解决方案 宽高比：为我们提供了 另一个强大的工具 来创建我们想要的排版 接下来 弹性间隙 今年在Safari浏览器14.1中 我们提供了对Flexbox容器 间隙的支持 弹性间隙为你提供了一种 定义项目之间最小空间的方法 以确保始终存在间隙 在这里 我有一个 在Flexbox中排版的导航栏 我不希望这些选单栏项目碰到 如果我添加一个间隙属性 值为1rem 现在项目彼此之间都会有个空格 不需要左边距或右边距 我不必弄清楚如何 去除外边缘的那些边距 这要简单得多 今年在WebKit中 实现了CSS中的许多其他功能 包括额外的逻辑属性 这对于支持国际受众非常重要 各个变换属性： 旋转、平移和缩放 滚动边距和滚动捕捉的更新和改进 支持新的色彩空间 以及伪元素 和离散属性的动画 今年春天 macOS上的 Safari浏览器14.1 以及iOS 和iPadOS 14.5上的 Safari浏览器中提供了许多这些功能 其余部分将于今年秋季 在Safari浏览器15中发布 接下来 我们来看看窗体控件 在Safari浏览器14.1中 我们提供了 对macOS上的 日期和时间输入的支持 现在在Mac上 用户可以通过 与日历控件交互 或使用时间控件来填写时间 客户端验证是内置的 对于iOS和iPadOS 15 我们完全重新设计了窗体控件 它们将更好地匹配整体体验 并且更适合UIKit 它们在深色模式下看起来也很棒 这些是窗体控件的新默认值 如果你覆盖了这些样式中的任何一个 那么当然 你的样式会被应用 我们还实施了一个新的颜色选择器 为input type=“color” 在iOS和iPadOS上 有三个用于选择或调整颜色的面板 以及一个滴管 这就是我们的Safari浏览器15之旅 以及今年在WebKit上的一些亮点 但在我离开之前 我想确保你知道 在哪里可以找到重要的资源 来了解更多关于Safari浏览器 和WebKit的信息 以及你可以在哪里提交 关于你接下来希望看到的内容的反馈 所有这些资源的链接 都在本次课程的注释中 如果你有兴趣了解新的 JavaScript DOM API和媒体格式支持 请查看WWDC21上的 《开发高级网站内容》 一定要观看《探索网页检阅器改进》 并了解Safari浏览器 即将推出的新网页开发人员工具 包括我们自己的CSS网格检阅器 为了跟上未来的发展 请下载带有紫色商标的 Safari浏览器技术预览版 它大约每两周更新一次 这是个非常好的方法 针对测试最新的错误修复 和使用网页检阅器中的最新改进 Webkit.org是WebKit发行说明 详细介绍新网页技术的文章 以及网页检阅器文档的地方 我们想听听你的意见 如果你对网页检阅器 或Safari浏览器的界面有任何建议 请在Apple的反馈助手中提交反馈 如果你遇到WebKit中的错误 例如HTML、CSS JavaScript或DOM应用程序编程接口 有损坏或遗失的情况 请在bugs.webkit.org上提出 你可以在推特@webkit上 找到并关注我们 我希望你和我们一样 对Safari浏览器15的新设计 感到兴奋 新标签栏为你的设计 提供了一个新的层面 宽高比排版的新可能性 iOS和iPad上的全新窗体控件 还有更多更多 我迫不及待地想看看 这会给网页设计带来什么创新 感谢你来参加 请尽情享受WWDC [欢快的音乐]