学习了,CSS中内联SVG图片有比Base64更好的形式

2018年08月19日 by 张 鑫旭 阅读 22724 次, 今日 45 次

CSS内联SVG文章头图

难免的,我们需要在CSS中内联SVG图形,以前我都是把SVG文件转换成Base64格式然后内嵌,最近发现,这并不是最好的方法,最好的方法是使用部分转义的SVG原始代码,兼容IE9+,而且颜色什么的可以直接在CSS中修改。这种方法具体真容是什么?有兴趣可以进去看下。其中有个炸裂的SVG在线压缩合并工具,相信你会喜欢的。

阅读全文…

这回试试使用CSS实现抛物线运动效果

2018年08月11日 by 张 鑫旭 阅读 19578 次, 今日 16 次

CSS抛物线文章缩略图

差不多5年前,写了篇文章,介绍如何使用JavaScript和抛物线函数实现抛物线运动效果,实际上,纯CSS也是可以实现DOM元素的抛物线运动效果的。究竟如何实现呢?不妨进来一探究竟……

阅读全文…

看,for..in和for..of在那里吵架!

2018年08月6日 by 张 鑫旭 阅读 23734 次, 今日 21 次

文章缩略图

今天天气不错,瞒着老婆去参加ChinaJoy,嘿嘿,好多周边,嘿嘿,好多萌妹子。突然,旁边一个戴眼镜的小胖子一声大叫:“看,for..in和for..of在那里吵架!”

我顺着望去,只见2点钟方向有一群穿着格子衫背着电脑包的人在围观什么,我立马发现事情不简单,就跟着过去围观,结果意想不到的事情发生了……

阅读全文…

原来浏览器原生支持JS Base64编码解码

2018年08月4日 by 张 鑫旭 阅读 40066 次, 今日 65 次

JS Base64编码解码头图

就在数月前,一个前端HTML字符信息转Base64的需求,我是毫不犹豫去找了个开源的base64.js,根据文档上语法一使用,嘿,数据准确,功能良好。当时弄完还洋洋得意,以为是个完美的解决。

结果,今天发现,尼玛原来浏览器很早就有了原生的JS Base64加密解密方法,显然,上面这种洋洋得意的做法完全就是瞎子点灯——白费蜡!究竟是什么方法呢?有没有什么使用上的坑呢?点击进去一起一看究竟吧~

阅读全文…

万岁,浏览器原生支持ES6 export和import模块啦!

2018年08月2日 by 张 鑫旭 阅读 23104 次, 今日 28 次

万岁,浏览器原生支持ES6 export和import模块啦!不仅支持静态import,还支持动态import。原以为和Node.js中的模块import一样,比较简单容易理解,结果一研究发现,在web浏览器中,原生的export和import需要知道的细节还真多,也很有必要了解。

本文内容较多,篇幅较长,丰富的demo和源代码展示,有一定深度,希望本文内容能够对您的学习有所帮助。

阅读全文…

隐私相关-了解HTML5 Do Not Track API

2018年07月26日 by 张 鑫旭 阅读 10248 次, 今日 4 次

文章头图

中国的互联网对隐私那真是一点都不上心,前有“李彦宏称中国用户愿用隐私换便利”,后有“美团点评会显示你的好友在哪儿里点过餐,住过什么酒店”。其实浏览器本身提供了API可以让用户保护自己隐私不被跟踪,但是鲜有人知道,就算有知道的,也不会在实际项目中用,因为大环境对隐私都不重视,价值有限。

不过,从近些年诸多事件网民的言论来看,隐私这件事情已经越来越关注,一定会在哪天摆在台面上成为很重要的议题进行发酵的!因此,如果网站能在隐私这件事情上做得能让用户明显感觉到尊重,则这个网站的影响力,公司的口碑说不定会爆炸式增长。那作为前端的我们,可以在这件事情做些什么呢?

阅读全文…

了解woff2字体及转换

2018年07月25日 by 张 鑫旭 阅读 17234 次, 今日 16 次

文章头图

woff字体在2012年12月被World Wide Web Consortium (W3C)推荐使用,IE9+浏览器支持。woff2字体最早在在2013年7月Chrome Canary版本上可以使用,发展到现在,几乎已经成为自定义图标字体使用的标配。

本文就将介绍关于WOFF2诸多基础知识,包括优点特性,如果TTF字体转WOFF2字体,如何在CSS中使用,mime type设置等,有截图有必要的源代码展示。希望本文内容能够对您的学习有所帮助。

阅读全文…

JS字符串补全方法padStart()和padEnd()简介

2018年07月24日 by 张 鑫旭 阅读 14049 次, 今日 10 次

字符串补全文章缩略图 在JS中,字符串补全是常用操作,以前我们的做法是先检测字符串长度够不够,不够,自己再拼接字符串以到达我们需要的字符串长度。到了ES6,浏览器天然支持字符串长度补全方法,这个方法就是padStart()padEnd()。乍一看好像很简单,但是,仔细一深入,发现意想不到的细节还挺多的,要不,你进来瞅一瞅?

阅读全文…

深入理解CSS的width:auto

2018年07月23日 by 张 鑫旭 阅读 15184 次, 今日 11 次

我们应该都知道,width的默认值是'auto''auto'由于是默认值,出镜率不高,但是,却是个深藏不露的家伙,包含了至少4种不同的宽度表现,而且每一种表现……

阅读全文…

Canvas中颜色过渡动画效果的实现

2018年07月22日 by 张 鑫旭 阅读 9463 次, 今日 3 次

canvas颜色过渡处理缩略图

在CSS3中,我们要想实现从A颜色到B颜色的过渡效果,是相当容易的,只要指定起止颜色,配合transition过渡或者animation动画都可以时间我们想要的效果。

但是,在<canvas>中却没有这么简单,因为<canvas>本质上是一个静态画布,要想实现颜色变化,需要JS去不断绘制,实现起来要比CSS实现麻烦很多。再加上颜色值本身就不一定是纯粹的数值,更增加了我们实现的难度。

本文就将通过多个案例,逐步深入,介绍一些在Canvas中的颜色处理技巧,有些技巧说不定会让你大开眼界。

阅读全文…