之前，我们讲了宽高比盒子，谈到一个技巧，就是运用填充来随心所欲地调整一个元素的长宽比例。这个技巧并不是经常能用到的，因为修整一个元素的高度是自找麻烦，但也不是没有这种情况出现。要降低这一风险，有一种方法，那就是伪元素(Psuedo Element)策略，让伪元素顶住其上一层元素，撑起纵横比。但是如果元素里的内容将元素顶得更高，那元素也会变得更高，纵横比就完蛋了。

没错，display: contents要在Blink引擎和WebKit引擎里成为默认样式了，可能会随着Chrome浏览器65版与Safari浏览器11.1版一起发布。火狐浏览器从37版开始就有了这一功能，现在要轮到这两个浏览器了。这样，唯一没有这个功能的就剩下Edge浏览器了，大家一起投票提要求吧！

深入挖掘 CSS Grid 布局规范，发掘一些你可能不知道的特性，并探索即将到来的特性。CSS Grid 布局于 2017 年 3 月 开始被浏览器所支持，在撰写本文时，大多数网站有超过百分之70的访问者有 CSS Grid 特性支持。 这个数据还在快速增长中， 并且在 Edge 浏览器发布更新支持后继续改善。我希望你之前已经有时间去探索过 CSS Grid 布局的一些特性了。 这篇文章将带你探索一些你可能不知道的特性。 并且了解一下未来阶段中可能实现的规范。

<details>标签在Chrome，Firefox等浏览器下默认是有展开收起行为的；通过在<details>标签上添加布尔类型的open属性，可以让我们的详情信息默认就是展开状态；<summary>标签如果缺省，则<details>元素会在内部自动创建一个<summary>内容，默认的文案是“详细信息”。本文主要通过一些示例，介绍了HTML5中的<details>和<summary>在不需要借助任何JavaScript就可以实现一些常见的交互效果。

圣诞节和元旦团队策划了两个活动，都涉及到了在多个平台下的分享，如何按照产品要求实现多平台下一致的分享效果，包括分享文案的动态生成，在没有Native的帮助下是比较困难的。我们研究了很多分享方案，得到了一套较为完整的分享方案。

任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验，对于那些对产品有着像素级完美追求的人这种体验差异尤其显著！SVG（可缩放的矢量图形）完美地解决了上文中提到的部分问题。尽管 SVG 有它的局限性，但是在某些场景下是非常有用的，如果你有一个好的设计团队，你也可以基于SVG创建一些震撼的视觉体验，而不必担心给浏览器带来过重的渲染负担或阻碍页面的加载时间。

SVG 全称是 Scalable Vector Graphics，即，矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先，不要把 SVG 和 CSS，Canvas，HTML 搞混。他们之间并没有你中有我，我中有你的关系。SVG 是通过 XML 的形式写在 HTML 文档中的。

前段时间研究 SVG 压缩优化，发现SVG预定义的 rect、circle、ellipse、line、polyline、polygon 六种基本形状可通过path路径转换实现，这样可以在一定程度上减少代码量。不仅如此，我们常用的 SVG Path 动画(路径动画)，是以操作path中两个属性值stroke-dasharray和stroke-dashoffset来实现，基本形状转换为path路径，有利于实现路径动画。

SVG 渲染使用 painter 的模型来描述图像如何渲染到屏幕。像墙上的油漆层，上层的内容遮盖下层的内容。SVG 规范定义了哪些内容会绘制在其他内容之上。每个形状的不同部分 —— stoke，fill，marker —— 每个都创建绘制层。这些形状绘制在其他层之上，层的顺序就是他们在文档中被定义的顺序。两个新的属性被引入 SVG2 规范，他们是 z-index 和 paint-order，允许你改变渲染规则。

在你初次接触一个新的JavaScript框架时，会像第一次进糖果店的孩子一样。给啥拿啥，而更直接点，有些东西可以让你更容易成为一个开发者。不可避免的是，我们在用框架时都会有一个同感，就是总有些场景是框架不能帮我们完成的。Vue框架的漂亮之处在于它的功能非常强大，虽然这个框架的指令不够面面俱到，但也能在开发上助你一臂之力了，因为创建一个自定义指令是很轻松的。