之前在文章中插入示例DEMO是通过异步加载codepen来实现的，但是受制于网络条件，有时候加载缓慢，甚至无法加载。就想着将一些简单的示例直接在Markdown中写为HTML代码输出到前端页面运行，可是这样一来，不仅让Markdown失去了严谨性和优美性，而且如果不小心写了一个可能污染全局的样式或者脚本，那就翻船咯~
但是Markdown最终是要转换成HTML的，因此只要在Markdown的转换过程中做点手脚，再配合上Shadow DOM这个魔法盒子将示例代码运行在一个沙箱中，问题就能得到解决。

看到这个标题的时候，很多人可能会像我一样，脑海里会一下子跳出CSS3的方案来。的确如此，CSS3是实现渐变文字最简单直接的方案，本站就有很多用CSS3实现的双色水平渐变的文字实例。我这里把描述突然从炫彩字转到了渐变字，两者的概念一样吗？我不知道，可能只是各个行业的叫法不一而已。我所在的行业是为LED显示屏提供云节目制作和发布服务的，行业内把这种文本称之为炫彩字媒体，比如大街上司空见惯的显示屏上写着诸如“欢迎光临”的五彩斑斓的文字。受阻于业务需要，CSS的方案是我们最先Pass掉的，为什么呢？

HTML5中有很多十分有趣的标签，相比于article/section等这些我们所熟知并且已经应用的标签，还有些标签或者因为兼容性，或者因为还处于草稿阶段而不那么为人所知。在使用Bootstrap/Element等UI组件时，常常看到某个标签上会应用一些如role="dialog"的不常见的属性，这是因为HTML语义化的需要。role属性主要供有障碍人士使用，作用是告诉如屏幕朗读程序等辅助程序当前元素所扮演的角色。由于HTML5标签本身已经实现了语义化，role属性不建议被添加。而对于一些老浏览器或者一些模拟元素（如div模拟dialog），role属性则应该被注明。Bootstrap中有很多注明了role属性的组件，而这些组件有一部分已经被HTML5所实现，并已经标签化，如dialog,progress等。当然，这些标签的原始样式各个浏览器不统一，并且可以说很简陋，对此，可以通过一些自定义CSS样式来进行优化。

特别说明：本文介绍的标签，目前兼容性都很差（虽然部分标签有对应的polyfill），仅供学习和了解，请勿用于生产环境。同时，DEMO仅限Chrome浏览器预览。

一直以来，CSS作为一种申明式的样式标记语言，很难像如javascript等命令式编程语言一样通过定义和使用变量的方式来维护和追踪某些状态。后来随着scss,less等CSS预处理器的出现，我们可以像优秀的开源框架bootstrap那样，通过维护一个_variables.scss变量文件的方式来维护一个庞大的项目。但预处理需要编译，并非CSS原生支持。而现在，我们可以在原生CSS中使用变量了！

在开发公司UI组件库的过程中，颜色组件ColorPicker由于时间关系没有去深入研究，看着花花绿绿的色谱图，以为实现起来会很复杂，就直接将一个开源的颜色选择器封装了一下。这大概是半年以前的事了，这篇文章也在我的博客中以草稿形式（只有标题没有内容，当时是做了一个记录，想着后来有时间了去研究，目前这种草稿还有很多😂）存放了半年了。前段时间请教了公司UI同事一些颜色相关的概念，又去搜索了下这方面的知识，收获还是蛮大的，尤其是知乎色彩空间中的 HSL、HSV、HSB 有什么区别？这篇提问中，@Forrest近乎大白话的回答，超赞👍。

想着在年前把博客更新升级一下，于是顺手修复了一些已知的BUG，优化了留言模块，升级了nginx，更是为了利于SEO，在webpack的编译中加入了prerender-spa-plugin预渲染模块。经本地window主机测试后，一切OK。这便着手在线上Linux主机中配置，nginx, node, mongod 等的升级一切顺利，但就是在项目中 npm install 的时候卡住了，而且这一卡就是一天多！难道是我安装姿势不对，需要起来重睡？ 查看npm报错原因，就出现在本文的主角phantomjs上。

关于phantomjs，无论是在之前的项目中写单元测试，录制UIrecorder测试用例时都遇到过，但仅仅也是遇到而已，只以为仅仅是一个依赖模块，照着文档npm install一下，对其甚至连基本的了解都没有，于是问题就出现了。

在前面两篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助，本文作为《你不知道的CSS》系列的第三篇文章，将继续在CSS技巧方面进行探讨，不同于前两篇的是，本文将着重介绍CSS中伪类和伪元素在项目中的应用场景。伪类相信大家最熟悉也是用的最多的莫过于:hover, :active, :focus之类的，因为这些在平常的项目中太常用了（然而我目前依然见过还有用js去添加.hover类来变化背景色的同学😴）。而伪元素如:before, :after相信大家也用的烂熟了。 当然对于比较常见的伪类（元素）不在本文的讨论范围类，本文主要介绍一些生僻的但是又非常实用的伪类(元素)。CSS的世界已经变天了，抛开过去，拥抱变化吧~

分页是WEB开发中很常用的功能，尤其是在各种前后端分离的今天，后端API返回数据，前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代，分页功能都是必不可少的。
分页大多数（基本上）情况下都是对异步数据列表的处理，这里首先需要明白一下分页的流程。
在已知每页显示数据量pageSize以及当前页码pageIndex的情况下：

前段时间写过一篇介绍简单音乐播放器效果开发的博文《为你的博客添加简单的CSS3音乐播放器》，实现了单曲循环播放效果，这个效果也是我的博客首页一直有的效果，同时文中也介绍了一些简单的HTML5 Audio标签的属性和方法，如 play() , paused()等。当然，之前的效果只适合诸如博客或者某个单页面（如专题页面）使用。而现在的可以称之为完整版的播放器弥补了之前的不足，增加了列表播放，音量控制，播放进度，播放时间以及播放模式，上一曲，下一曲等功能，除了歌词外，基本就是个播放器了（本来就是播放器）。

关于上传，总是有很多可以说道的。
16年底，公司项目番茄表单的前端部分，开始了从传统的jquery到vue 2.0的彻底重构。但是上传部分，无论是之前的传统版本，还是Vue新版本，都是在使用着FileAPI这款优秀的开源库，只是进行了简单的directive化。为什么呢？因为兼容性。没办法，公司项目不等同于个人项目，必须要考虑大多数浏览器。否则，上传部分完全可以利用Vue-Resource以及FormData来抛开对FileAPI的依赖。这让我深感遗憾，幸好这个简单的遗憾在个人博客Vue化重构的时候得以弥补。

JavaScript的window对象对应着浏览器窗口本身，因此这个对象的属性和方法统称为BOM（浏览器对象模型），如window.open(),window.location等。

JavaScript的document对象是指文档对象模型，主要是处理网页内容。DOM（Document Object Model）即文档对象模型，是针对 HTML 和 XML 文档的 API 。字母D指document（文档），字母O指object（对象），字母指Model（模型）。DOM 描绘了一个层次化的节点树。节点表示一个连接点，文档是由节点构成的集合，DOM的节点主要分为三类：元素节点、文本节点（不是文本内容）、属性节点。

偶然间发现这篇文章，可以说，这是我见到的对移动rem单位做的最详细，最细心的一篇总结性文章，果断转载至本博客，以便有需要的同志们研究。

本文结合作者（流云诸葛）对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值。