课程
专栏
首页
文章
我的

[译]Safari9带来的新东西

Jun 9, 2015, Johan Brook

笔者有幸参加了WWDC2015大会，在web技术讨论环节上，苹果公司的Safari浏览器团队展示了在Safari9中带来的新属性，其中包含了iOS中新增的CSS样式，如backdrop滤镜和滚动界线点样式、ES6的升级，和其他CSS的升级点。

BACKDROP滤镜

如你所知，从iOS7开始，系统通知的背景是有毛玻璃效果的。通知浮层之下的内容会被透过这层半透明遮罩变得模糊。

当前，我们有很多方法来实现这种动态模糊效果。最常见的，是复制一个元素的副本，并在这个副本上添加一个遮罩，将这个副本中的某些区域进行模糊处理，然后将这个遮罩至于原来的元素之上。这种方法能够解决问题，但是显得很笨拙。

但是，在Safari9(OSX和iOS)中，苹果添加了一个叫做backdrop-filter的属性。这个属性和普通的css滤镜，即filter共用一套赋值。通过这个属性，你可以方便地为元素设置一个毛玻璃效果，非但如此，你还可以把若干filter属性叠加起来。这个属性已经被提交给了W3C。

/* 顶部导航样式 */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    /* 随着页面滚动，下面的代码会让导航下面的内容以毛玻璃的样式渲染。 */
    backdrop-filter: blur(10px) saturate(100%);
}

这个属性在video或其他动态对象也生效哦！但是应用前最好先观察一下是否有性能问题。

SCROLL SNAP POINTS(滚动界限点)

在做各种跑马灯、滚动图片效果的时候，我们需要实现滚一下显示一张图片，再滚一下显示下一张图片，即为滚动的距离设置一个界限。虽说效果简单，但是我们也只能通过Javascript来管理滚动条的定位。

现在，苹果提供了一种通过CSS就可以控制滚动条界限的方法。

#viewport {
    /* 开启滚动界限 */
    -webkit-scroll-snap-type: mandatory;
    /* 设置x轴上每300px一个滚动界限点 */
    /* 在Y轴上应用-webkit-scroll-snap-points-y属性 */
    -webkit-scroll-snap-points-x: repeat(300px);
}

设置-webkit-scroll-snap-points-x和-webkit-scroll-snap-points-y属性之后，我们可以通过repeat属性来将跑马灯效果设置为无限循环，也可以在repeat中传入参数来限制其循环距离，如：

如果你的内容在viewport中是动态的，不规则的，上面的设置可能不能满足你。往下看——

将destination和coordinate的属性设置为50% 50%，以将不规则的元素定位在viewport的中间。

Safari使用-webkit-scroll-snap-destination和-webkit-scroll-snap-coordinate来解决需要适应viewport的不规则元素的问题。这些属性用来决定你在viewport中滚动的内容如何定位。

#viewport {
    -webkit-scroll-snap-type: mandatory;
    /* 界限终点，50% 50%表示定位在中心 */
    /* 界限终点默认为0，即左上角 */
    -webkit-scroll-snap-destination: 50% 50%;
    /* 如何对齐元素的界限坐标 */
    /* 50% 50%表示定位在中心 */
    -webkit-scroll-snap-coordinate: 50% 50%;
}

这些属性也可以通过Javascript来设置。

通过Javascript设置时，注意和系统采取的其他方案是否有冲突。

增强的CSS

下面的CSS属性，可以去掉前缀在Safari中使用了。

CSS支持程度检测

Safari9中，添加了CSS支持程度的检测，可以写一个判断条件，像媒体查询一样根据CSS的支持程度来写不同的代码了。

@supports(condition) {
  /* 此条件下的样式 */
}

@supports(-webkit-initial-letter: 3) {
  /* 如支持首字母样式，则... *、
}

CSS4的:matches选择器

:matches伪元素可以将很多后代选择器集成在一起，如：

/* 应用:matches之前 */
.default .foo,
.default .bar,
.default .baz {
    color: red;
}

/* 应用:matches之后 */
.default :matches(.foo, .bar, .baz) {
    color: red;
}

3D触碰技术的API

苹果增加了一些3D触碰技术的API以支持他们的新硬件。

首先，鼠标事件中增加了一个webkitForce属性，这是一个判断压感的数值。

DOM元素可以监听一些新事件了，就跟mouseup和mousedown似的。

常量MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN和MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN分别代表正常点击的数量和3D点击的数量。

可以在这里查看一些例子

增强的JAVASCRIPT

然后，我们得到了一些ES6的新能力：

标签页中的PINNED图标

你可以自定义icon来做为pinned图标了。

<link rel="icon" sizes="any" mask href="icon.svg">

SVG图标根据苹果的要求，应该是100%黑色的形状，透明背景。

如果要改变颜色的话，用下面的方法：

<meta name="theme-color" content="red">

THE END

Safari9完整的发布说明点击这里

原文：Johan Brook, Jun 9, 2015, http://www.johanbrook.com/writings/what-s-new-in-safari-9/

None

null

None

None