从天猫某活动视频不必要的3次请求说起

2018年12月24日 by 张 鑫旭 阅读 8627 次, 今日 11 次

天猫

我们在移动端做H5开发的时候,有时候会用到MP4视频,对于一些酷效果,是性价比最高的方式。然而,很多前端开发在使用这些视频的时候没有注意,或者根本就不知道视频的某些信息的位置会影响浏览器的请求个数,从而影响网页性能。

阅读全文…

CSS vector-effect与SVG stroke描边缩放

2018年12月24日 by 张 鑫旭 阅读 5009 次, 今日 4 次

vector-effect文章头图

默认情况下,我们改变SVG图形尺寸,stroke描边宽度也会跟着一起变化。有时候,我们希望描边宽度一直不变,怎么办呢?可以试试使用vector-effect属性。

阅读全文…

CSS ::backdrop伪元素是干嘛用的?

2018年12月22日 by 张 鑫旭 阅读 6700 次, 今日 8 次

backdrop头图

backdrop这个单词是背景幕布,就是戏曲表演后面的一块布。::backdrop伪元素就是控制需要视觉聚焦的元素后面的背景元素样式的。在web中哪些元素需要视觉聚焦呢?一个是HTML5 <video>视频元素,还有就是HTMl5.2 <dialog>元素,以及处于全屏状态下的普通元素。这些元素的背景样式均可以交给::backdrop伪元素进行控制。

阅读全文…

周知:CSS -webkit-伪元素选择器不再导致整行无效

2018年12月17日 by 张 鑫旭 阅读 4750 次, 今日 4 次

-webkit-与伪元素

通常,如果选择器链或组中有无效的伪元素或伪类,则整个选择器列表无效。如果伪元素(但不是伪类)具有-webkit-前缀,那么对于Firefox 63+,Blink、Webkit和Gecko浏览器认为它是有效的,而不会使选择器列表无效。

阅读全文…

使用wavesurfer.js显示mp3 audio音频的波形图

2018年12月9日 by 张 鑫旭 阅读 10794 次, 今日 7 次

波形图

如果你想实现右图所示的波形图效果,可以借助wavesurfer.js。wavesurfer.js上手简单,扩展丰富,有多达35个可选参数,什么音频速率控制,波形图大小尺寸啊,都完全不在话下。还有好多种方法,对了,还有很多额外的插件,丰富的使用案例。

基本上,你要想对音频进行解析,显示个图形啥的,不要多想了,就wavesurfer,童叟无欺,老少皆宜,居家旅行,开发必备。

阅读全文…

CSS font-feature-settings 50+关键字属性值完整介绍

2018年12月9日 by 张 鑫旭 阅读 5797 次, 今日 12 次

CSS font-feature-settings

CSS font-feature-settings属性控制OpenType字体中的高级排版功能,也就是可以让OpenType字体排版更加精致,符合实际开发需要。

兼容性很不错,支持的特征关键标签也很多,都是4个字母,全部加起来,可能上百要的,本文主要介绍浏览器能够支持的一些特征标签。

阅读全文…

CSS蛋疼应用之:数据上报和HTML验证

2018年12月6日 by 张 鑫旭 阅读 6448 次, 今日 5 次

介绍两个我觉得比较蛋疼但有意思的CSS应用,一个就是纯CSS实现数据上报,用户行为跟踪;另外一个就是纯CSS实现HTML验证,并且在页面上进行提示。比较有脑洞,有想法,虽然以后估计用不到,但是,其中新奇的思路说不定对于我们开阔眼界很有帮助。

阅读全文…

HandBrake乃MP4免费压缩webm转换工具不二之选

2018年12月3日 by 张 鑫旭 阅读 5829 次, 今日 4 次

HandBrake官网logo

HandBrake是视频处理的软件,开源,免费,而且对web视频呈现非常友好。对于我们开发者而言,用来进行MP4视频压缩可谓是不二之选,无需特别技巧便可直接将各类视频格式转换成MP4格式,可以指定帧率,画面质量,声音速率,以及画面大小来实现我们的压缩效果,极小尺寸,同时视频依旧高质量,运行稳定,非常推荐。

阅读全文…

HTML5 video视频播放Picture-in-Picture画中画技术

2018年12月2日 by 张 鑫旭 阅读 10454 次, 今日 12 次

视频画中画技术

Chrome 70已经原生支持HTML5视频播放时候Picture-in-Picture,也就是俗称的画中画技术,也就是很多视频网站看评论时候,播放视频变小挂在右下角的这种交互技术。实际上,这里的画中画要比当前视频网站的画中画要更强,强在其是一个客户端层面的接口,小视频窗口是操作系统窗体级别的,就算你的浏览器切换到其他选项卡页面,或者最小化,也会在你电脑右下角播放视频。

于是乎,我们可以一边码代码一边看网页小视频了!

阅读全文…

杀了个回马枪,还是说说position:sticky吧

2018年12月2日 by 张 鑫旭 阅读 28078 次, 今日 107 次

sticky布局效果缩略图

position:sticky早有耳闻也有所了解,后来,Chrome放弃了对其支持,我也就不关心这个声明了,今天偶然发现,卧槽,Chrome什么时候杀了个回马枪,居然又支持了。眼瞅着,各个浏览器纷纷立了山头,要必要关心关心position:sticky了,不要被人留下厚此薄彼的口舌。结果一关心,竟然发现,sticky定位要比预想的更强大,更有趣……

阅读全文…