首页
技术分享
实用工具 发布文章 新浪微博 Github

Safari 10的技术规格出来了,嗯,简直激动人心。

这里简单『搬运』一下官方的文章

Web APIs

  • IndexedDB
    完整支持W3C推荐规范
  • 复制和剪切
    可以用Javascript来复制和剪切内容了,方法: document.execCommand('copy') document.execCommand('cut')
  • CSP 2.0
    CSP (Content Security Policy 内容安全策略)支持 2.0 标准
  • Shadow DOM
    终于支持了呀,Chrome在几年前就支持了,这样的话,iOS上也可以放心搞 web components 了
  • ES 6
    嗯,Safari 支持 ECMAScript 2015 标准,也就是 ES 6 ,完全支持,史上第一个完全支持 ES 6 的浏览器
  • ES 国际化
    集成 ECMAScript Internationalization API 标准,也就是 ECMA-402,支持客户端数字、币种、时间格式等
  • DOM 兼容性增强
    这个没啥说的
  • 3D Touch 事件
    对于 3D Touch,iOS 是 touchforcechange, macOS 是 webkitmouseforcechange,只有用力按下时触发。 touch对象的 force 属性值的区间为从 0.01.0
  • WebGL

    • iOS 支持情景创建参数 antialias 默认值为 true
    • iOS 支持情景创建参数 alpha,默认值为 false
    • 一个页面上的活动 WebGL 情景数量限制为 16,超出后,新创建情景会将最旧的销毁

媒体

  • iOS 内联视频
    • 设定webkit-playsinline属性后,iPhone Safari会允许视频在页面内播放,没有设置该属性时,点击播放依然会全屏,但用户缩小(双指动作)时,也会内联播放
    • 在 iOS 中,如果视频没有音轨或者禁用了音轨,可以在页面加载时自动播放了
  • macOS 画中画
    • Safari 10 支持画中画功能
    • Safari 默认的 HTML5 视频控制条在画中画中有一个独立的样式
    • 如果想要自定义画中画的播放控制条,可以用 Javascript 演讲模式 API

文本特性

排版与渲染

  • CSS 支持 object-position
    吼,终于支持了,之前只支持object-fit,正好前几天写了一篇 object-fit: 炒鸡方便的图片居中方法
  • 支持使用 SVG 路径剪切
    你可以剪切成复杂的图案,包括贝塞尔曲线路径和evenodd填充规则。使用 path() 图形,就像在 CSS Shapes Level 2 specification 规范中定义的一样
  • 支持 #RGBA 和 #RRGGBBAA
    支持 #RGBA 和 #RRGGBBAA 颜色值了
  • border-image 的新值
    border-image新增 roundspace
  • image-rendering 的新值
    image-rendering 新增两个值 crisp-edgespixelated-webkit-crisp-edges-webkit-optimize-contrast 映射到 crisp-edges
  • 支持 direction 属性
    so… 支持从右到左的语言了,滚动条的位置和表单控制会适配到
  • media query支持广色域

    @media (color-gamut: p3) { … }

  • CSS 截断属性
    新增 break-beforebreak-insidebreak-after

  • 去前缀的属性
    以下几个属性支持不用 -webkit- 的前缀了
    • filter
    • cross-fade
    • image-rendering

Web Inspector

  • 支持 WebDriver 自动化测试,不多介绍直接看文档吧: Selenium WebDriver
  • 内存调试
    新的时间轴,可以显示页面的内存使用情况和基于时间的散点分布。这些新功能可以帮你定位和提高页面的内存性能
  • 快速抽样分析
    呃,这个看不懂。。。直接贴原文:The new JavaScript profiler delivers fast performance by sampling running code at a high resolution while disabling debugging tools. It allows scripts to run at full JIT-accelerated (just-in-time compilation) speeds for accurate timeline recording.

原生 API

Safari APP 扩展

感觉就是 Chrome Web Store 那一套了。具体看 Safari APP 扩展开发指南

本文来自:https://www.qianduan.net/safari-10-almost-perfect/