以前都说前端坑，或者前端入坑了，为什么呢？ 因为 IE 啊。
我做前端以来，一直都是很幸福的，因为还几乎咩有处理过 ie 的兼容问题。
但是最近要处理，以前应付面试背过的兼容方案都忘掉了，所以还是要查。
忽略 IE6，IE7 的情况下，规则就这几条：
\9 IE6/IE7/IE8/IE9/IE10都生效
\0 IE8/IE9/IE10都生效
\9\0 只对IE9/IE10生效
当然还有这个东西
html
[if lt IE 9]><![endif]
继续阅读 »
content
{:toc}
问题描述
当我们点击一个空的、没有任何内容的 div 或者其他块级元素时。在 IE11 以下，是没有反应的。
使用场景
这类问题使用场景还是很普遍的。比如 UI 给了一张大图，要点击图上的某一块位置的时候。可以用一个空的 div 定位到相应的位置，然后对它进行绑定事件。
继续阅读 »
content
{:toc}
简介
lottie 是一个可以轻易的给各种 native app 添加高质量动画的类库。可以在 iOS、Android 和 React Native 实时渲染 After Effects 动画，就像使用静态图片一样容易。上图即为 lottie 的 logo。
简单的说，lottie 动画制作的流程是，通过 Bodymovin 扩展将 AE 动画导出为 json 数据，然后再将这个 json 渲染在客户端或者 web 端。如下图：
继续阅读 »
唠叨
还有一周2016就要过去了，时间过得太快，压抑的一年，好像什么都没做，闭目冥思，反思自我得失...我勒个去，文采不好，再唠叨真成大妈了。
这一年听到最多的声音就是房价涨了，房价涨了，房价上蹿上蹿，一路飙升，疯了，全国都疯了，我也疯了，房租涨了，工资没涨，不好意思，我又禁不住
啰嗦了两句，还是聊技术吧，只有技术最可靠。
最近看了几篇关于table-cell的用法，觉得旭神总结的还不错，于是乎我就抄袭，不对，是模仿，也不合适，
其实是微微扩展了以下，增加几点需要注意的地方。
支持度
从下图可以看出，所有浏览器都支持的很好嘛。
特性(Peculiarities)
table-cell的特征就是跟table的td表现是
继续阅读 »
当我们在进行 Web 开发时，很多时候都是在有意或无意地创建一些矩形，深究一下，到底有多少中方式来得到一个几何图形呢？本文将简单介绍几种生成圆形、三角形和多边形的方式，并分析每种方式的优缺点。
下面是可能使用到的方式：
border-radius
border
rotating shapes with transform
pseudo elements
box-shadow
wrapping text into shapes with shape-outside
clip-path on an element
SVG assets
canvas
more
border-radius
使用 border-radius 样式属性是
继续阅读 »
CSS 动画已经存在很多年了，使用恰当可以很好地提高网站的用户体验，也正是由于其容易使用，就很可能出现性能低下的动画，从而降低了整个页面的运行效率。回想一下：你曾经是否使用过 CSS 来改变元素的宽度、高度或绝对位置？如果回答是肯定的，就意味着你触发了性能低下的重排或重绘计算，在某些情况下甚至可能导致页面闪烁。
什么样的情况会导致页面闪烁呢？现代浏览器根据设备的刷新率来刷新页面中的内容，对大多数设备而言，屏幕以 60 次每秒的频率刷新，即 60HZ。如果在屏幕上出现了某些运动，如滚动、过渡或动画，浏览器应该每秒刷新 60 帧，如果某些帧花费的时间太长，进而导致浏览器的刷新频率跟不上设备的刷新频率（跳帧现象），就会出现页面闪烁。所以
继续阅读 »
最近在写一个动画效果，使 ul 下面的 li 逐个进入，就像下图
做这个效果用到了 css 的 animation 中 animation-delay，给 li 设置入场动画后，再给 li 设置 animation-delay，像这样：
css
.li-animation-delay-1 {
animation-delay: 0.1s;
}
并且每一个 li 的 animation-delay 都比前一个 li 的长 .1s，也就达到了后面的 li 的入场动画后播放的效果。
因为 li 的数量也不确定，所以我打算批量生成一些 li-animation-delay-*, 查了一下 scss 正好有 for 的用法：
继续阅读 »
GitHub 不再使用字体来输出图标了。我们把代码中所有的 Octicon 替换成了 SVG 版本。虽然这些改动并不那么明显，但马上你就能体会到 SVG 图标的优点。
切换到 SVG 以后，图标会作为图片渲染而非文字，这使其在任何分辨率下都能很好地以各种像素值显示。
more
为何使用 SVG？
图标字体渲染问题
图标字体从一开始就是一种 Hack。将图标作为 Unicode 符号生成一个自定义字体，并通过打包后的 CSS 来引入图标，这样只需要在任意元素上添加一个 class，图标就可以显示出来，然后我们通过 CSS 就能即时改变图标的尺寸和颜色。
然而，虽然这些图标是矢量图形，但在 1x 显示屏下的渲染效果并不理想
继续阅读 »
highlight.js是一款功能强大的代码高亮Javascript工具，支持162程序语言，自带74种高亮样式，支持自动侦测语言类型，几乎所有的markdown都支持highlight.js。Hexo在syntax-highlighting-with-highlightjs的基础上成功实现对代码行号的添加，并且做了一些优化和改进。
注：阅读本文需要一定的前端基础知识。
加载highlight.js
使用highlight.js非常简单，只需引入highlight.js的css及js（推荐在主题模板中作为全局css和js引入，引入的位置在之间）。
html
highlight.js有许多代码风格，我在这里使用的是git
继续阅读 »