演示: 照片 | 报纸 | 博物馆
nav { 
  display: block;
  columns: 30ch; 
  column-gap: 4ch;
}
nav { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr));
  column-gap: 1rem;
  justify-content: center; 
}
nav { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr));
  grid-template-rows: masonry;
  column-gap: 2lh;
  justify-content: center; 
}
nav { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
  grid-template-rows: masonry;
  column-gap: 4lh;
  justify-content: center; 
}

在 Safari 技术预览版、Firefox(开启 功能标志 后)或任何支持网格级别 3 的浏览器中查看这些演示。

WebKit

  • 主页
  • 跟踪预防

文章

  • 新闻
  • CSS
  • 贡献
  • 隐私
  • 性能
  • Javascript
  • Web 标准
  • Web 检查器
  • Safari 技术预览版

功能状态

  • CSS 状态
  • 标准立场

下载

  • Safari 技术预览版
  • WPE
  • Epiphany 技术预览版
  • WebKitGTK
  • WebKit 构建存档

Web 检查器界面

  • 界面
  • 页面覆盖
  • 审计选项卡
  • 元素选项卡
  • 图层选项卡
  • 网络选项卡
  • 源选项卡
  • 时间线选项卡
  • 键盘快捷键

Web 检查器设置

  • 启用 Web 检查器
  • 设备设置
  • Web 检查器设置

Web 检查器断点

  • DOM 断点
  • 事件断点
  • JavaScript 断点
  • 符号断点
  • URL 断点

更多 Web 检查器

  • 控制台命令行 API
  • 控制台对象 API
  • 控制台代码片段
  • 检查器引导脚本
  • 本地覆盖
  • 脚本黑盒

Safari 文档

  • Safari 发布说明
  • Safari 技术预览版
  • WebKit 框架

Safari 开发者功能

  • 启用开发者功能
  • 开发菜单
  • Web 检查器
  • 响应式设计模式

使用 Safari 开发者功能

  • 检查 macOS 上的 Safari
  • 检查 iOS 和 iPadOS
  • 检查 visionOS
  • 检查 tvOS
  • 检查您的应用内容
  • 安装 Xcode 和模拟器
  • 添加额外模拟器

Safari 设置

  • 更改开发者设置
  • 更改功能标志设置

Web 驱动

  • 在 macOS 上启用
  • 在 iOS 和 iPadOS 上启用

报告错误

  • 错误生命周期
  • 错误报告指南
  • 错误优先级
  • Bugzilla 小贴士

贡献 WebKit

  • 入门
  • 测试贡献
  • 政策和指南
  • 提问
  • 跟踪预防政策