前端开发中的一些黑魔法Pt1

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

@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::aftercontent中调用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;
}

破裂的图片

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

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/dirty-tricks-dark-corners-front-end-pt1.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部