为什么 className 不要以 ad 开头?

A公司新来的实习生小谷,发现页面里面一个 div 死活都显示不了。

页面的内容是<div id="ad_holder">你好</div>,然后用 Chrome 打开,怎么也显示不出来:

再经历了几轮排查后,小谷发现,关掉 Adblock Plus 插件后,元素就奇迹般的重现了!如下图:

这是为什么呢?

其实是因为 Adblock、Adblock Plus 等浏览器插件会自动屏蔽一些以 ad 开头的标签和文件。你可以简单理解为这些插件在页面中插入了如下的代码:

<style>
#ad_holder{
  display: none !important;
}
</style>

所以,小谷将 ad_holder 改名为 art_holder 之后,问题就解决啦。

总结

这个知识点其实只要知道有这么一回事就可以了,然而我要说的其实是一个前端开发者的「观察能力」,从细微之处发现规律。

作为一个前端,我时常问自己:

  • 我对浏览器了解吗?
  • 我对用户使用浏览器的习惯了解吗?

前端,不只是 HTML / CSS / JS。前端要对用户交互时的方方面面进行考虑,这也是前端存在的价值所在。

与君共勉。

作者:方应杭

9 thoughts on “为什么 className 不要以 ad 开头?”

  1. Wonderful items from you, man. I have take into account your
    stuff previous to and you’re simply extremely great.
    I really like what you’ve received right here, really like what you’re stating and the way in which during which you say it.
    You make it entertaining and you continue to take care of to
    stay it smart. I can not wait to read much more from you. This is really a tremendous site.

  2. Hey There. I found your blog using msn. This is a very well
    written article. I will make sure to bookmark it and come back to read more of your useful info.

    Thanks for the post. I will definitely return.

  3. Howdy! I realize this is somewhat off-topic but I had to ask.
    Does running a well-established website like yours require a lot of work?
    I am completely new to writing a blog however I do write in my
    journal on a daily basis. I’d like to start a blog
    so I will be able to share my own experience and views online.
    Please let me know if you have any kind of recommendations or tips for brand new aspiring
    bloggers. Thankyou!

  4. This design is wicked! You certainly know how to keep a reader entertained.
    Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job.
    I really loved what you had to say, and more
    than that, how you presented it. Too cool!

  5. I got this website from my buddy who shared with me concerning this web page
    and now this time I am visiting this site and reading very informative content at this place.

发表评论

电子邮件地址不会被公开。