@Vitaly Friedman在今年3月份分享了一个主题《Dirty Tricks From The Dark Corners Of Front-End》。整个PPT中介绍了一些前端开发中使用到的一些黑魔法，当初看的时候特别的带劲。一直想将里面的内容整理出一篇文章出来，但一直没整，趁最近休假的闲暇时间整理了一下。

如果你的英文够好，可以直接听原作者分享的视频：

对应的PPT:

当然，如果您愿意花时间阅读下面的内容，我会感到非常的开心。同时我也希望下面的内容对您有在平时的工作当中有所帮助。

链接嵌套

众所周之，在前端开发当中，超链接<a>标签嵌套<a>标签会出问题：浏览器解析的时候，将它们解析成不嵌套的。来看代码：

<a href="#url1">When the crisis was over,  <a href="#url2">Mr. Jones</a> left the region immediately.</a>

浏览器解析上面的HTML代码将会变成这样：

<a href="#url1">When the crisis was over,</a>  
<a href="#url2">Mr. Jones</a> 
left the region immediately.

如下图所示：

而我们事实上需要的达到的效果是：

<a href="#url1">When the crisis was over,</a>  
<a href="#url2">Mr. Jones</a> 
<a href="#url1">left the region immediately.</a>

曾经为了达到这样的效果，我只能这样老实的写HTML代码，那么事实上呢？我们是存在一定的黑魔法的。那就是给<a>标签内部的<a>标签外添加一个<object>标签。如下所示：

<a href="#url1">When the crisis was over,  <object><a href="#url2">Mr. Jones</a></object> left the region immediately.</a>

最终浏览器达到的效果其实和下面的HTML代码效果一样：

<a href="#url1">When the crisis was over,</a> 
<a href="#url2">Mr. Jones</a> 
<a href="#url1">left the region immediately.</a>

当然，其结构未做任何改变，但效果是类似上面的代码效果。

在线效果：

上面的效果在IE9+、Firefox4+、Opera9+、Safari5.1+、Chrome14+都可以完整运行，如果在老板版本IE浏览器上要有效果的话，需要在<object>标签内添加一个注释。

破裂的图片

默认情况之下，图片加载未成功的话会有一个破裂的图片，直接影响页面的美观。那么有没有什么方法可以通过样式让未加载的图片看起来真的像是破裂的效果？

<img>元素加载的是外部图片资源，未加载成功时，在页面上就会显示类似上图的效果。<img>是一个替代元素，其外观和尺寸都是由外部资源来决定的。由于元素的内容是外部资源，那么可以通过CSS的伪元素::before或::after在content中调用attr()函数，并且给arrt()传<img>的src值。如此一来，就可以很轻松的控制图片破裂的效果。

img { /* Same as first example */ }

img:after {  
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

这是默认的一个替换效果：

在上面的效果基础上，还可以做一些样式扩展：

img {  
  /* Same as first example */
  min-height: 50px;
}

img:before {  
  content: " ";
  display: block;

  position: absolute;
  top: -10px;
  left: 0;
  height: calc(100% + 10px);
  width: 100%;
  background-color: rgb(230, 230, 230);
  border: 2px dotted rgb(200, 200, 200);
  border-radius: 5px;
}

img:after {  
  content: "\f127" " Broken Image of " attr(alt);
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}

浏览器支持效果如下表所示：