在看这篇文章之前你可能会觉得border只是简单的绘制边框，看了这篇文章，我相信你也会跟我一样说一句“我靠，原来css中的border还可以这样玩”。这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理，文中会介绍几种小图标的效果。

IntersectionObserver 能让你知道一个被观测的元素什么时候进入或离开浏览器的可见窗口。

HTML5中提供了在网页文档之间相互接收与发送信息的功能。使用这个功能，只要获取到网页所在窗口对象的实例，不仅仅同源(域+端口号)的web网页之间可以互相通信，甚至可以实现跨域通信。

今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。

getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。

汇总jQuery的61种选择器及示例

如果脚本不依赖于任何脚本，并不被任何脚本依赖，那么则使用 defer。 如果脚本是模块化的，不依赖于任何脚本，那么则使用 async。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

还有一个免费证书的选择。为了推广HTTPS协议，电子前哨基金会EFF成立了 Let’s Encrypt，提供免费证书（教程和工具）。

随着移动设备浏览量的迅速增长，自适应网页设计变得越来越重要。Web程序员在开发移动端页面时时常会遇到这样的问题，手机设备商声明的屏幕像素宽度尺寸和网页开发时使用的CSS像素宽度不一致，为什么会出现这种情况呢？

我们将这些防止错误出现的程序称为”linters”。Javascript中有几个比较好的linter。但是在CSS中，我们就没有这么幸运了，我们的选择十分有限: 基于Ruby的，具有特殊预处理程序的scss-lint和较早的CSS Lint。现在我就要开始介绍一下我们开发的工具: stylelint.

Sublime Text还提供了非常自由的插件(plugins)扩展功能。我最近出现了一个小小的需求，想开发出一个简单的扩展功能。开发这个插件非常的简单。只需要几行代码。但更复杂的插件也都是这种简单插件基础上扩展出来的。你需要懂一些Python语言(不需要太深)。

writing-mode是CSS3里新引入的可以让文字竖向排版的属性。它不仅可以让文字竖向，还可以让文字从右往左排。

MACD指标是股票技术中最实用最重要的指标之一，其中涉及EMA、DIF、DEA、BAR几个指标。然而，对MACD指标的定义及分解算法，书上和网上的资料乱七八糟，有的说法互相矛盾，特别是对于指标的分解

如果在网上找一个关于如何将一段特定的文本拷贝到剪贴板的解决方案，最可能的结果就是使用Flash的方案来做这个事，虽然使用Flash可以很好地解决这个问题，但是这不是一个明智的想法，因为这个产品最终会消失或者至少是浏览器不再提供支持，因此这个解决方案是没有未来的。

本文将探讨 SVG 图形的基本概念和在 HTML5 中的使用。学习绘制、过滤器、渐变、文本和将 SVG XML 添加到网页。

在CSS动画中，使用Transition技术是一种“隐式”的动画方法，而相对应的，还有一种“显式”的动画技术，就是，你可以在CSS里直接指定动画效果，这需要使用keyframes属性了。

CSS中最简单的动画叫做 transition(转变)。Transition(转变)能让页面元素不是立即的、而是慢慢的从一种状态变成另外一种状态，从而表现出一种动画过程。

如何让table元素也能表现出自适应性？按HTML5的说法，table是一个不鼓励使用的HTML标记，但现实工作中，我们避免不了的偶尔会用到它。那么，怎样让一个传统的表格也表现出自适应性呢？

为什么要按9宫格等分图片，因为一条微博里最多能上传9张图片。而在微博里，这9张图片的排列规则就是9宫格，为了能达到更震撼的效果，9张图片最终拼成的是一张图片，在手机里观看，你会获得不一样的感觉，先看看效果，下面就是一个截图：

问题的最关键是这些分享工具的图标不好看，系统功能本身没有问题，我们如果有方法能够修改一下它们的图标，问题其实就解决了。

在国内，是无法用它安装的，之前安装谷歌浏览器，一直是从第三方网站是下载离线完整安装包。虽然无二，但总有些不甘心，为什么官方网站是没有离线版谷歌浏览器安装包?

在日本，将音标标记在文字上边的印刷方式叫做”Ruby“或“rubi”。HTML里也有一种专门用来显示音标或注释的标记，就叫做ruby，是采用了日本印刷业的这个属语。

我遇到的‘%2F’只是个例子，还有很多这样的字符不能吧包含在文件名中，它们同样不能被RewriteCond解析。

细研究更发现，我们可以通过 “chrome://” 地址来配置很多的火狐浏览器的菜单、选项和隐藏属性。

图片可以让页面更有吸引力，尤其是处理的恰当的时候，但问题是，图片的处理是个麻烦事情，它的创建和裁剪对于一个普通人来说是个困难的任务

空格在calc()的加减操作中有着非常重要的作用，这跟普通的编程语言中的用法有所区别，我想，这可能是因为在CSS中，你可以用“aaa-bbb”这样中间有减号的类名，而在多数的编程语言中，这样的变量名是不允许的。

我经常会遇到一个页面是有几十个png图片的问题，这时候必须将将这些图片优化压缩一下，因为你会发现其中有些看似很简单的普通的体积通常会有三、四百KB。我会用ImageMagic这个图片处理工具优化它们，如果一个图片一个图片的执行优化命令，那会非常费事，下面是我写的一个批处理文件

经常搜集整理一下网上发行的好代码，能不断扩充自己的知识库，这些知识在不用的时候就放着，需要用到的时候，从知识库里拿出来，会省掉很多的麻烦。

Address元素(<address>)是用来存放地址信息的，它可以和<article>元素配对来提供文章作者的联系信息。对它的使用需要注意一下几点

火狐浏览器里提供了大量辅助程序员的开发工具。其中一个工具就是 Developer Toolbar，它看起来很像是我们程序员常用的控制台(console)，但它的作用完全不同。比如说，它提供的一个独特功能就是能够让你在火狐浏览器里对当前网页进行截屏。

我不想揣测这些黑客为什么要工具我的网站，因为，对于一个WEB服务器来说，经常受到这样的攻击时很常见的。最重要的是，当遇到这样的情况时你要知道如何应对，如何化解。

几年前我就看到过CSS里有一些属性很奇怪，当我设置这些属性或取消这些属性后，字体看起来会变得好看和不那么好看。这就是字体平滑设置的效果。我推荐大家读一下Font smoothing explained这篇文件，你会从中学到更多的关于字体平滑效果的知识，但今天这里，我只是介绍一下它们的基本用法

在浏览器里用JavaScript获取地理位置信息API在很多移动应用里是最常见的API运用，作为Web程序员，它应该是你必须具备的一项知识技巧。幸运的是，目前所有流行的浏览器都支持了这种技术。

至于为什么要用这样的格式化效果，它能帮助你更好的在控制台(console)输出debug信息，更好的为调试程序服务。比如，严重错误或警告信息就需要用打个字体，醒目的颜色突出显示，你觉得呢，你会用这个彩色的控制台(console)信息输出技巧吗？