Polyfills是一种保证使用现代代码的绝佳办法，同时还能支持旧版浏览器。但是目前polyfills使用起来很困难，因此我们开发了一种全新的服务以便简化其使用方法。在此，邀请读者使用并改进它。
挑战
下面是我们正在尝试解决的一些问题：
开发者对哪些特性需要使用polyfill不是很清楚。例如你在某个旧版本的IE浏览器（因为你有很大数量的用户还在使用它）中载入网站，发现网站不工作，你不得不慢慢调试来搞清楚到底是哪个特性导致了这个问题。有时候问题很清楚，但大多时候并非如此，尤其是旧版浏览器往往缺少好的开发者工具的时候。
针对每个特性都有很多polyfill可供选择。很难确定哪一个能最忠实地模拟缺少的特性。
有一些大的polyfill捆绑着很多你不需要的polyfill，例如ES6，它全面覆盖了一系列的特性集。为了解决一个简单的问题而向浏览器植入所有的这些代码其实是不必要的。
较新版本的浏览器不需要polyfill，但一般来说polyfill可用于所有种类的浏览器。虽然这是为了提高与旧版浏览器的兼容性，但这也降低了新版浏览器的性能。我们不愿意做出这种妥协。我们更愿意在原本不具备某个特性的浏览器上使用polyfill。
我们的解决办法：以polyfill为服务
为了解决这些问题，我们开发了polyfill服务。这有点像是验光师先对你的眼睛验光检查，然后针对你的视力问题配置眼镜。我们将对浏览器做同样的事情。下面解释它是如何工作的：
开发人员在他们的页面中插入一个脚本标记作为导入polyfill服务的端点。
该服务分析浏览器的user-agent标头和必需特性列表（或是使用一个默认的可使用polyfill服务的列表），然后搭建浏览器所需的polyfill列表。
按照正确的依赖顺序表定制polyfill。
通过CDN 压缩服务包并提供服务（对此我们衷心感谢Fastly的支持）。
我们真的需要这个解决办法吗？你可以这样思考：Modernizris是一个大型的特性检测包，所有对它的合理使用都得益于自定义的安装配置，但是很大数量的Modernizris用户仅仅使用了它的默认安装，这常常是来自于 cdnjs.com 或是 html5boilerplate 的某个部件。但是，如果不使用Modernizris的特性检测功能，那你为什么安装这个工具呢？可能你误解了库文件的功能，单纯地以为Modernizris会“修补东西”？不得不承认，第一次听到这个名字的时候笔者正是这样想的，以至于后来发现Modernizris不但没有起到作用，反而拖了现代浏览器的后腿，笔者感到有些失望。
然而，Polyfill服务却是真正起到了作用。不想花时间去深入了解旧版本浏览器缺点的你一点儿错也没有。让别人先弄明白问题所在，然后我们在不需要了解细节的情况下就能直接受益。
如何使用
最简单的使用情况是：
<script src="//cdn.polyfill.io/v1/polyfill.min.js" async defer></script>这包含了我们默认的 polyfill设置。这个默认设置是我们人工挑选的一个特性列表，我们认为这个列表中所包含的特性对于现代网络开发来说不可或缺，而且相对应的polyfill相当小且十分精确。如果你想指定添加某个polyfill特性，只需要这么做：
<!-- Just the Array.from polyfill --><script src="//cdn.polyfill.io/v1/polyfill.min.js?features=Array.from" async defer></script><!-- The default set, plus the geolocation polyfill --><script src="//cdn.polyfill.io/v1/polyfill.min.js?features=default,Navigator.prototype.geolocation" async defer></script>
如果有必要在解析自己的代码之前加载polyfill的话，你可以移除async和defer属性，或是使用一个脚本加载器（不需要任何polyfill的加载器！）
测试与文档特性支持
我们所支持特性的完整表格在特性矩阵中。为了搭建这个网格，我们使用了Sauce Lab的自动测试平台，它截获了polyfill在每个浏览器中的测试，然后记录结果。
User-Agent 分析？ 你确定？
是的，我们确定。下面是为什么UA分析要比特性检测好的原因：
在一些情形中，针对同一特性我们有多个polyfill可供选择，这是因为一些浏览器提供非顺从实施方式，因此只需要你敲打成型即可，而其他浏览器则没有提供任何的实施。但若是有UA检测，你能够选择相应的polyfill。
有了UA检测，第一个HTTP请求就能直接由polyfill代码应答。如果我们使用了特性检测，第一个请求将会为特性检测代码服务，而第二个请求则需要用于获取特定的polyfill。
几乎所有的大型网站都使用UA检测。这并不是说与之相关的特征就是不好的。显然，好的UA规则要比差劲的UA规则更难编写。而且我们并没有排除借助特性检测使用该服务的可能。
本操作方法文章演示如何使用 JS 网格控件创建甘特图。在基于如何：创建基本 JS 网格构建的本主题中，您将定义摘要、标准、里程碑和完成百分比甘特条形图的样式。每个条形图样式都具有形状、图案和颜色。每个条形图尾部都具有条形图尾部样式、颜...先聊聊布局方面的知识，先列据一个实现三栏水平布局（左右定宽，中间自适应）案列，目前有圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局。
相同点：
差异点：
DOM节点结构：
双飞翼布局比圣杯布局多使用了一个div，少用大致4个css属性，比圣杯布局思路更直接和间接一点。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局， Flex 布局将成为现代浏览器的首选方案。
绝对定位 position: absolute 使元素的位置与文档流无关，因此不占据空间。PS：这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
栅格
以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，通俗一点的就是在一个特定区域内划分出有规律的格子，并依靠这些格子进行有规律的版面布局。
栅格布局的作用
栅格布局的使用
现大多数UI框架设计上都会设计栅格化系统，比如 bootstrap(jquery) 、 element(vue) 、 antD(react) 等。
Bootstrap 的栅格化系统采用将页面布局分为12列，再根据页面宽度采用预定义类控制模块占用宽度比例（宽度百分比）的思想，实现响应式布局。
Bootstrap将屏幕大小分为4类，主要关键点是媒体查询 @media 。
官网中对Layout 布局的定义是： 通过基础的 24 分栏，迅速简便地创建布局.Element是基于 vue.js 开发的UI框架，其设计的栅格系统也与 Bootstrap 类似，可选 flex 方式满足现代浏览器，组件开发的目的都是为了解决基本布局定位的问题。
主要组件为 Row 与 Col , 其中 Row 为行布局容器, Col 为列布局容器.
参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：
antD 是Ant Design 团队基于 React 开发的一套企业级后台UI框架，其栅格整个设计建议区域按照 24 等分的原则进行划分
支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序
参照 Bootstrap 的 响应式设计，预设六个响应尺寸：
怎么实现一个基本栅格化？
通常一个基本的栅格化系统包括：
为了给整个栅格系统设置宽度，我们需要一个容器。容器的宽度通常为100%，但你可能希望为更大的显示器设置最大宽度 max-width 。
行元素用于防止里面的列（ column ）溢出到其他的行。通常会使用 clearfix 来清除浮动，因为我们是通过浮动来制作栅格系统的。
列元素是栅格系统的核心，也是最复杂的一部分。因为列的定位可以有很多实现方式，同时还需要考虑它的宽度以及响应式设计等因素。
列的位置
Floats 、 inline-blocks 、 display-table 、 display-flex 他们都可以实现栅格布局中，列的定位。先选取使用 float ，如果列都是空的，浮动的列都会贴在彼此的顶部。为了避免这种情况：
列的宽度
由于容器总宽度是100%，我们想要6列，所以每列宽度为：100 / 6 = 16.66
这里我们把一行分成六列，通过简单的计算，还可以定义列的多种宽度。
列的间隙 (Column Gutters)
由于列的宽度单位是响应式的百分比(%)，我们给列元素的间距是固定单位的 padding（px单位） ，为了避免复杂的计算，我们规定所有的盒子模型为 border-box 类型。
为了适配更多分辨率的布局，我们只需改变列的宽度。
比如当屏幕宽度小于1000px时，为了布局更简洁，我们使用两倍列的宽度，一行六列变为了一行三列。
当屏幕宽度比1000px还小时
