Service Worker实现浏览器端页面渲染或CSS,JS编译

2018年04月24日 by 张 鑫旭 阅读 13576 次, 今日 15 次

Service Worker提供了一种能力,可以fetch请求的资源,然后后Service Worker中进行编译或转化,返回处理后的其他资源,这种特性可以用来实现各种资源的在线的客户端编译,本文就将抛砖引玉,通过两个应用案例,展示未来web开发可能的面貌。

阅读全文…

简单了解ES6/ES2015 Symbol() 方法

2018年04月10日 by 张 鑫旭 阅读 16081 次, 今日 14 次

Symbol是JavaScript ES6新出现的一个的原生数据类型(primitive data type),作用是什么?有什么特性?本文就将简单介绍相关知识,希望能够对您的学习有所帮助。

阅读全文…

小tips: 纯前端JS读取与解析本地文本类文件

2018年03月27日 by 张 鑫旭 阅读 17012 次, 今日 21 次

所谓文本类文件,指MIME Type为text/*文件,例如,CSS文件(text/stylesheet),JS文件(text/javascript),HTML文件(text/html),txt文本(text/plain)等等。

在现代浏览器下,我们可以直接对这些文件进行处理,无论是通过type=file表单元素还是从桌面拖拽到网页中都是可以的……

阅读全文…

AMCSS(CSS属性模式)开发简介

2018年03月25日 by 张 鑫旭 阅读 8234 次, 今日 6 次

AMCSS是Attribute Modules for CSS的缩写,表示借助HTML属性来进行CSS相关开发。传统我们多个模块特性是通过多个类名进行控制的,而AMCSS则是基于属性控制……

阅读全文…

几种CSS渐变背景图片transtion动画方法

2018年03月25日 by 张 鑫旭 阅读 17780 次, 今日 19 次

background-image不支持CSS3 transition,因此,当CSS3 gradient渐变作为背景图片存在的时候,直接设置transition是不会有过渡效果的,那该怎么办呢?

阅读全文…

借助SVG文字尺寸自动缩放甚至突破Chrome 12px限制

2018年03月24日 by 张 鑫旭 阅读 9992 次, 今日 6 次

文字大小尺寸跟着容器的尺寸变化。这对于一些需要尺寸自适应的slogon内容就很实用,例如移动端320~414宽度间的自适应。纯CSS可以实现,但如果局部自适应实现就比较麻烦,canvas则效果不好,SVG实现则兼顾两者的优点……

阅读全文…

借助Web Animations API实现JS keyframes动画

2018年03月23日 by 张 鑫旭 阅读 8440 次, 今日 4 次

用一句话解释Web Animations API就是把CSS3实现的animation动画变成有JS代码实现。

各有优势。CSS3 Animations动画简单,灵活,复用性强,非常适合静态动画效果;Web Animations参数由JS控制,与单个元素绑定,因此非常适合不固定的动态动画效果,例如随机动画……

阅读全文…

玩转HTML5 Video视频WebVTT字幕使用样式与制作

2018年03月22日 by 张 鑫旭 阅读 14691 次, 今日 12 次

HTML5 Video视频支持支持外挂字幕,文件后缀名是.vtt,称为WebVTT格式,专门的web字幕格式。使用很简单,用一个<track>元素即可。并且字幕的样式是可以控制的。

阅读全文…

HTMLUnknownElement与HTML5自定义元素的故事

2018年03月20日 by 张 鑫旭 阅读 7257 次, 今日 12 次

我之前以为写一个规范以外的标签元素就是自定义元素,后来发现不是的。HTMLUnknownElement与自定义元素并不能直接相等,甚至可以说是陌路两人。

W3规范中,对自定义元素的定义是中间必须要有短横线(就是键盘上的减号)连接,并且浏览器也是这么认为的……

阅读全文…

小tips: 在canvas上实现元素图片镜像翻转动画效果

2018年03月18日 by 张 鑫旭 阅读 8227 次, 今日 18 次

CSS中要想实现元素的翻转效果,比较简单,例如我们希望某一张图片水平镜像翻转,只需要一行CSS就可以了。但是在canvas中,则要麻烦一些,麻烦的并不是无法翻转,而是坐标系的定位……

阅读全文…