iOS 9对前端做了什么?

作者:big(谢刚),腾讯TGideas团队前端工程师,前端虐我千万遍,我待前端如初恋!

随着9月25日iPhone6s的发货,早已预订入手的小伙伴已开始了新一轮的研究。那么它的到来对于前端来说有哪些新东西?

Force Touch

针对此次的3D Touch 页面中多了三个事件,当然了,以下事件请自带webkit前缀

1. mouseforcewillbegin

2. mouseforcedown

3. mousefoeceup

Javascript代码

看字面意思就能理解了,用法和其他事件一样,只是奇怪为何不起名为forcetouchdown,forcetouchup ??

backdrop-filter

iOS9 中的Safari支持背景模糊这个CSS属性

CSS代码

效果如下:

CSS Supports

iOS9中,CSS也可以做一些特性检测,即@supports,用法和media query一样简单,例如

CSS代码

当然也可以用Javascript检测

Javascript代码

CSS Scroll Snapping

HTML代码

CSS代码

这个属性是干嘛的,看下面的图就知道了,除了从最后变换到起始位置不是很自然以外,中间的过程是不是屌屌的?!深入学习

Split View

分屏模式,在这种模式下,浏览器可能会呈现如下三种状态(头疼的事情就来了)

1. 以1/3屏幕宽度呈现

2. 以1/2屏幕宽度呈现

3. 以2/3屏幕宽度呈现

Picture in Picture

JS有了判断画中画的API,可以让我们主动切换视频的展示模式,如下:

Javascript代码

其他更新

1. 更好的支持ES6:classes,computed properties,template literals and weak sets

2. 支持CSS4的伪类选择器::not,:matches,:any-link,:placeholder-shown,:read-write,:read-only

原文发布于微信公众号 - 腾讯大讲堂(TX_DJT)

原文发表时间:2015-12-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

学习纲要:CSS 基础概念

6710
来自专栏BestSDK

9种最经典的导航模式,APP开发必备

一、标签式导航 标签式导航又称为tab式导航,现在大多数app采取的主流形式,一般分为底部导航、顶部导航、底部和顶部双tab导航 1、底部标签导航 底部导航一般...

54590
来自专栏Coco的专栏

【前端性能】必须要掌握的原生JS实现JQuery

22030
来自专栏GIS讲堂

Openlayers4中的全屏

Openlayers4中,ol.control.FullScreen()可实现地图的全屏展示,可是当地图的初始化宽度和高度都不是100%的时候,全屏的时候只会宽...

15630
来自专栏编程微刊

前端css常用的选择小汇

13420
来自专栏九彩拼盘的叨叨叨

Web动画性能介绍

帧率(FPS):描述每秒播放的帧数,单位为 Hz 或者 frame/s (帧/秒)。

11730
来自专栏一“技”之长

iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程

        众所周知,绚丽动画效果是iOS系统的一大特点,通过UIView层封装的动画,基本已经可以满足我们应用开发的所有需求,但若需要更加自由的控制动画的...

30930
来自专栏姬小光

【第013期】如何查看页面图片尺寸

网页上的元素实际渲染的时候,其实都是方形的。由于很多图片有白色或者透明的背景,对于设计师来说,打开最终的网页并不能看出页面上的图片是否有按自己的设计实现。

12160
来自专栏前端说吧

CSS-用伪类制作小箭头(轮播图的左右切换btn)

50880
来自专栏前端知识分享

第7天:input和label标签

今天学的不多,就只学了表单元素中的input和label标签。搬了房子,收拾了一下东西,太累了,所以没有学很多。明天还上班,今天就先到这。

11710

扫码关注云+社区

领取腾讯云代金券