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单位
- 通过
calc()
计算出的值
如果你的内容在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来设置。
element.style.webkitScrollSnapType
element.style.webkitScrollSnapPointsY
element.style.webkitScrollSnapPointsX
element.style.webkitScrollSnapDesitation
element.style.webkitScrollSnapCoordinate
通过Javascript设置时,注意和系统采取的其他方案是否有冲突。
增强的CSS
下面的CSS属性,可以去掉前缀在Safari中使用了。
- Transitions
- Animations
- Transforms
- Flexbox
- Columns
- … 太多了,详见Apple的文档
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
似的。
webkitmouseforcechanged
— 任何压感的改变.webkitmouseforcewillbegin
在mousedown
之前响应,实乃阻止默认行为之理想事件。webkitmouseforcedown
如果此触碰行为判断为3D触碰的话,在mousedown
之后响应。webkitmouseforceup
如果此触碰行为判断为3D触碰的话,在以上所有事件之后响应。
常量MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN
和MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN
分别代表正常点击的数量和3D点击的数量。
可以在这里查看一些例子
增强的JAVASCRIPT
然后,我们得到了一些ES6的新能力:
- 类语法(Class syntax)
- 模版字面值(Template literals)
- 符号(Symbols)
- 硬件属性(Computer properties)
- … 太多了,详见Apple的文档
标签页中的PINNED图标
你可以自定义icon来做为pinned图标了。
<link rel="icon" sizes="any" mask href="icon.svg">
SVG图标根据苹果的要求,应该是100%黑色的形状,透明背景。
如果要改变颜色的话,用下面的方法:
<meta name="theme-color" content="red">
THE END
原文:Johan Brook, Jun 9, 2015, http://www.johanbrook.com/writings/what-s-new-in-safari-9/