还记得我们为什么使用SCSS/LESS等CSS预处理器吗？我想很大一部分人是因为变量和嵌套语法。变量让我们可以很方便的去管理整个系统（网站）中的主题；嵌套语法则可以让我们更好的去组织和编写CSS代码，且让我们的样式文件有了最初始的命名空间或者说是作用域的概念（我们可以把某个模块的代码都放在一个唯一的container当中，这个container就是一个作用域）。至于如条件语句/函数这些特性，如果你不是去开发如Bootstrap/Element-ui 等这些库的样式，在常规的项目编程中通常用到的很少。
还记得我们为什么使用SCSS/LESS等CSS预处理器吗？我想很大一部分人是因为变量和嵌套语法。变量让我们可以很方便的去管理整个系统（网站）中的主题；嵌套语法则可以让我们更好的去组织和编写CSS代码，且让我们的样式文件有了最初始的命名空间或者说是作用域的概念（我们可以把某个模块的代码都放在一个唯一的container当中，这个container就是一个作用域）。至于如条件语句/函数这些特性，如果你不是去开发如Bootstrap/Element-ui 等这些库的样式，在常规的项目编程中通常用到的很少。
看到这个标题的时候，很多人可能会像我一样，脑海里会一下子跳出CSS3的方案来。的确如此，CSS3是实现渐变文字最简单直接的方案，本站就有很多用CSS3实现的双色水平渐变的文字实例。我这里把描述突然从炫彩字转到了渐变字，两者的概念一样吗？我不知道，可能只是各个行业的叫法不一而已。我所在的行业是为LED显示屏提供云节目制作和发布服务的，行业内把这种文本称之为炫彩字媒体，比如大街上司空见惯的显示屏上写着诸如“欢迎光临”的五彩斑斓的文字。受阻于业务需要，CSS的方案是我们最先Pass掉的，为什么呢？
TypeScript是一种开源编程语言，在软件开发社区中越来越受欢迎。TypeScript带来了可选的静态类型检查以及最新的ECMAScript特性。
作为Javascript的超集，它的类型系统通过在键入时报告错误来加速和保障我们的开发，同时越来越多对的库或框架提供的types文件能够让这些库/框架的API一目了然。我对这门语言垂涎已久，但是迟迟无法找到练手的地方。
很显然的，个人博客又一次的成了我的学习试验田😸。我放弃了上一版Vue单页面的框架，改为基于TypeScript/Koa的多页面应用。在改造的过程中，我试着将服务端（Koa）代码以及前端代码都使用TypeScript来开发，中间使用了webpack作为开发时前后端的桥梁。
在前面两篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助，本文作为《你不知道的CSS》系列的第三篇文章，将继续在CSS技巧方面进行探讨，不同于前两篇的是，本文将着重介绍CSS中伪类和伪元素在项目中的应用场景。伪类相信大家最熟悉也是用的最多的莫过于:hover, :active, :focus之类的，因为这些在平常的项目中太常用了（然而我目前依然见过还有用js去添加.hover类来变化背景色的同学😴）。而伪元素如:before, :after相信大家也用的烂熟了。 当然对于比较常见的伪类（元素）不在本文的讨论范围类，本文主要介绍一些生僻的但是又非常实用的伪类(元素)。CSS的世界已经变天了，抛开过去，拥抱变化吧~
在上文《你不知道的CSS（一）》中，介绍了兄弟选择器美化表单，font-size:0消除间隙，overflow清除浮动，border绘制三角形等7个实用技巧。由于文章长度限制，还遗留了一些技巧没有介绍，考虑到日后可能会有更多的技巧需要补充进来，便将上文改名为你不知道的CSS（一），名字其实有点浮夸，希望能完善为一个系列，也希望该系列中介绍的技巧能够帮助到更多人解决实际开发中遇到的问题。在这里感谢SegmentFault的小编在微博上的推荐。本文将重点介绍CSS中未知高度容器的垂直居中技巧。同样每个技巧将结合demo或者图示来说明（如果demo无法打开，请自备梯子，原因你懂得🙀）。
CSS的世界是神奇的。
随着各浏览器WEB标准的日趋统一，CSS在WEB世界中扮演的角色也愈发的重要。甚至于在GitHub上出现了You-Dont-Need-JavaScript这样Star近万的优秀开源项目，抛开该项目的实用性不说，项目中的众多的DEMO就已经证明了CSS的强大。
当然，这篇文章不是为了介绍这个项目，而是整理了一些实用的CSS技巧，来解决我们在实际项目开发中遇到的的问题。文章也会长期更新，总结更多的技巧。每个技巧将结合demo或者图示来说明（如果demo无法打开，请自备梯子，原因你懂得🙀）。也许你此刻正在发愁的一个bug可以在这里找到答案😆。
本站在首页文章封面图从无色转变为有色，以及页面切换、发布留言等信息提示的背景模糊都利用到了css3的filter滤镜。
CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜，一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。
目前有grayscale、blur、invert、saturate等10个filter-function。
filter属性目前支持的浏览器较少，chrome，Firefox基本都支持了，IE只有EDGE(这个算IE吗)部分支持。具体兼容性请自行测试一下。这里的Demo在chrome（47.0.2526.80），Firefox（43）上测试通过。先来看一下http://caniuse.com/的兼容性评测：
京东首页从1F开始，左侧大图都有一个很有意思的效果，当你的鼠标滑过图片时，会有一层质感很强的流光从左侧不可见位置滑动到右侧不可见位置的效果。相较于淘宝的蒙版效果，个人感觉流光效果更好看一些。因此，本站一些图片也采用了这种流光效果，具体可鼠标滑过博文封面图预览。
流光效果实现起来很简单，主要是利用css3的线性渐变（linear-gradient），2D转换（transform）以及倾斜（skew）配合hover来实现，当然如果想要兼容一些低版本浏览器，可以使用图片代替。因此，结构相对简单，只需要一个图片父容器（.image-light），图片容器（img），以及流光容器（:before或:after或其他子标签）。
新浪微博开放平台（http://open.weibo.com/）提供了大量的接口API，如粉丝，微博，评论，用户读取等26个接口，共分为微博相关API，公共服务API，地理信息API等三大板块API。开发者只需注册开放平台App Key，即可利用开放平台提供的API测试工具测试各个不同的接口。本站很多地方都用到这些接口，如留言板中的地理位置，博客右侧的新浪用户卡片……
本文主要说的是利用新浪用户读取（https://api.weibo.com/2/users/show.json）接口生成一个漂亮的用户微博卡片。新浪接口授权相对严格，而此接口需要access_token和（uid或screen_name）两个必填参数，其中参数uid与screen_name二者必选其一，且只能选其一；并且接口升级后，对未授权本应用的uid，将无法获取其个人简介、认证原因、粉丝数、关注数、微博数及最近一条微博内容。 完整URL如下：https://api.weibo.com/2/statuses/public_timeline.json?access_token=你的access_token&uid=要获取信息的用户uid，该接口返回一个包含了该用户各种信息的json对象。
我们经常会遇到一些可编辑文本内容中显示红色下划波浪线，类似于word文档中错误单词的拼写检查，使得该标签内容很不美观。那么如何关闭textarea等可编辑文本字段的拼写检查呢？这里，我们可以通过一个Html5全局属性spellcheck来解决禁用拼写检查的功能。
spellcheck属性是Html5规范的一部分，它添加了对输入、textarea 元素和可编辑文本字段的拼写检查。主要针对一些无法识别的词语提供熟悉的红色波形曲线。
spellcheck属性仅 textarea、input（非密码） 元素或者标记为 contentEditable 的元素并且支持HTML5的浏览器有效。语法如下：
