使用 media query 进行 IE 的 CSS Hack

尽管现在很多大多数现代浏览器对 CSS3 的诸多特性已经开始支持了,但是有的时候我们还是避免不了对低版本的 IE 浏览器进行兼容性的样式写法。常见的思路无疑是写注释性语法: <head> <!--[if gt IE 9]><!--> <style> // your style rule 详情 »

解决新版本 Chrome 提示 DOMException: The play() request was interrupted

解决新版本 Chrome 提示 DOMException: The play() request was interrupted 解决新版本 Chrome 提示 DOMException: The play() request was interrupted 大概在一些新版本的浏览器中,我们是用 audio 或者 video 进行媒体资源播放的时候,可能会在控制台看到这个输出: Uncaught 详情 »

IE vs Chrome vs Safari video 的预加载表现分析

我们知道在 video 的标签中支持 preload的属性, 它表示可以 用于定义视频对于媒体资源的预加载从而达到更好的播放体验。它可以设置下面属性值: auto 表示整个视频都会进行下载,即使用户并不打算播放它。 metadata 只请求视频信息的 metadata 数据,比如长度。 none 不停止视频资源预加载。 测试表现 Chrome *版本: 61 * 我们测试Chrome设置为 auto 的时候加载数据大约为 (3.6M 详情 »

MacOS High Sierra Safari 11限制了 video 自动播放

前些天 Apple 正式向用户推送了他们的新一代 Mac OS MacOS High Sierra 。这次带来了新的 Safari 浏览器,然而一个不好的消息,是 safari 重新制定了新的限播策略。点击这里 了解上个版本的播放限制策略调整。 现在网页用包含 video 或者 audio 的标签,如果涉及了 autoplay 属性,浏览器现在不再进行自动播放, 详情 »

记一次 JS 代码压缩后产生的 Bug

最近遇到了个平时很少遇到的 Bug,理论上代码压缩混淆后大多数都不会存在问题(之前确实没有遇到),但是最近却不小心给遇到了。 大概在测试的时候,没有混淆前,代码是可以正确执行的,但是混淆后,代码就出现部分 JS 未顺利执行的情况。然后通过代码一步步调试,发现,在进行混淆的时候,会把一些变量命名转化成类似字幕 a, b, c等这样。然后这次在组件注册的时候,比较偷懒,用了 Function.name 来代表注册组件的名称,而不是独立命名。 详情 »

判断一个元素是否是 SVG 元素

我们经常通过事件代理会取到一些元素,大概我们第一个想到的 tagName 来判断,但是这样的确需要写过 map 来判断。我们可以有个快捷的方法: const el = document.querySelector('.svg-inner'); el.ownerSVGElement // true 则表示式 svg 元素 如果 false 则不是 参考: https://stackoverflow. 详情 »

前端实用的在线工具推荐系列(一)

caniuse caniuse 是一个在线查看浏览器的对某些特性的支持情况,如果你需要查看某些语法比如新的 ES6 语法 或者 H5 中一些新的 API (web worker, mediaSource等。作者还提供了一些开放的 API 让你将它嵌入到你的页面中。自己之前写过 《在自己的网站或者博客嵌入浏览器支持情况》 有兴趣的可以阅读下。 在线地址 icomoon.io icomoon.io 是一款在线生成 iconfont 详情 »

What learned from an open github project

Last year, I have tried to finish an interesting react-native project on my GitHub. React-native-percentage-circle is a component which supports you to define your percent data 详情 »

美化 input range 控制条

平常我们使用制作进度条的时候都是想的用 div 去模拟,在 html5 后,我们可以使用 input range 来实现这样的效果。 默认的效果如图: 你可以设置它的值得范围(min, max) 以及它的步长(step)。 这里的重点是设置它的样式啦: 取消掉默认的样式 在 chrome 和 safari 下我们可以通过声明: -webkit-appearance: none; 取消掉默认的样式, 详情 »

【译】iOS 上 video 标签的 的一些限制

原文地址: https://webkit.org/blog/6784/new-video-policies-for-ios/ @jernoble 如果接触过 ios 上的开发,在iphoneOS 3 的时候 safari 只允许用户与 video 进行交互的时候才会触发数据的加载。但是为了将更多的媒体播放控制权重新回到网页开发者,iOS 8放宽了这一限制:Safari开始支持 preload="metadata" 属性,允许& 详情 »