为什么 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。前端要对用户交互时的方方面面进行考虑,这也是前端存在的价值所在。

与君共勉。

作者:方应杭

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

  1. Spot on with this write-up, I actually believe that this web site needs far more attention. I’ll probably be back again to read more, thanks for the advice!|

  2. 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.

  3. 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.

  4. 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!

  5. 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!

  6. 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.

  7. First of all I would like to say excellent blog!
    I had a quick question in which I’d like to ask if you do not mind.
    I was curious to know how you center yourself
    and clear your head before writing. I’ve had a difficult time clearing my thoughts in getting my ideas out.

    I truly do enjoy writing but it just seems like the
    first 10 to 15 minutes are usually wasted simply just trying
    to figure out how to begin. Any recommendations or hints? Cheers!

  8. Wonderful blog! I found it while surfing around on Yahoo
    News. Do you have any tips on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there!
    Appreciate it

  9. You could certainly see your skills in the article
    you write. The world hopes for more passionate writers like you who are not afraid to
    say how they believe. At all times follow your heart.

  10. It’s a shame you don’t have a donate button! I’d certainly donate to this superb blog!
    I guess for now i’ll settle for bookmarking and adding your RSS feed to my Google account.
    I look forward to fresh updates and will share this site with my Facebook group.
    Chat soon!

  11. We stumbled over here by a different page and thought I should check things out.

    I like what I see so i am just following you. Look forward to
    checking out your web page for a second time.

  12. Have you ever thought about adding a little bit more than just your articles?
    I mean, what you say is important and everything. Nevertheless think of if you
    added some great images or videos to give your posts more, “pop”!
    Your content is excellent but with pics and clips,
    this website could definitely be one of the greatest in its niche.
    Good blog!

  13. Can I simply say what a relief to seek out somebody who really is aware of what theyre speaking about on the internet. You positively know the best way to deliver a problem to gentle and make it important. Extra individuals must learn this and understand this side of the story. I cant imagine youre no more common since you definitely have the gift.

  14. Greetings from Carolina! I’m bored at work so I decided to
    browse your website on my iphone during lunch break.
    I really like the knowledge you provide here and can’t wait to take a look when I get home.
    I’m surprised at how quick your blog loaded on my cell phone ..

    I’m not even using WIFI, just 3G .. Anyways, excellent
    site!

  15. I as well as my buddies have been looking at the best strategies located on your site and before long got an awful suspicion I had not thanked the site owner for those strategies. Most of the young men came absolutely excited to read through all of them and already have very much been having fun with those things. Appreciation for actually being considerably thoughtful and then for getting these kinds of remarkable themes millions of individuals are really wanting to be aware of. My personal honest regret for not expressing gratitude to you earlier.

  16. I want to convey my affection for your generosity for people that need help on that field. Your real dedication to passing the message all over turned out to be remarkably significant and have constantly enabled associates just like me to realize their pursuits. Your important instruction can mean so much a person like me and somewhat more to my peers. Thank you; from everyone of us.

  17. I wanted to create you that very small word in order to say thanks a lot over again for the precious methods you’ve documented on this site. This is quite strangely open-handed with people like you to make unhampered what exactly a few people could possibly have supplied as an electronic book to earn some money for themselves, chiefly seeing that you could have done it if you decided. Those points also served to be the good way to fully grasp that other individuals have similar interest the same as mine to grasp many more with respect to this condition. I know there are numerous more enjoyable occasions up front for those who scan through your site.

  18. My wife and i have been very fulfilled Chris managed to finish up his investigations through the entire precious recommendations he acquired while using the web pages. It is now and again perplexing just to happen to be offering hints that many some other people could have been making money from. And now we acknowledge we’ve got the writer to thank for this. The type of explanations you have made, the straightforward blog menu, the friendships your site give support to promote – it’s many extraordinary, and it’s making our son and our family feel that the issue is pleasurable, which is certainly wonderfully serious. Many thanks for the whole thing!

  19. Hi! This is my first visit to your blog! We are
    a collection of volunteers and starting a new project in a
    community in the same niche. Your blog provided us beneficial information to work
    on. You have done a marvellous job! cheap flights 2CSYEon

  20. An impressive share! I have just forwarded this
    onto a co-worker who had been doing a little research on this.

    And he in fact ordered me breakfast simply because I found it for him…
    lol. So allow me to reword this…. Thank YOU for
    the meal!! But yeah, thanks for spending time to talk about this issue here
    on your web site. 31muvXS cheap flights

  21. My spouse and i were absolutely happy that Peter managed to finish up his investigations through your precious recommendations he grabbed from your very own blog. It is now and again perplexing just to be making a gift of procedures many others may have been trying to sell. So we fully understand we’ve got the website owner to thank because of that. The most important explanations you’ve made, the easy blog menu, the relationships you will assist to engender – it is many excellent, and it’s assisting our son and our family believe that that theme is brilliant, which is tremendously vital. Many thanks for all the pieces!

  22. Thanks so much for providing individuals with an extraordinarily remarkable chance to read articles and blog posts from this blog. It is always so beneficial and jam-packed with a lot of fun for me and my office mates to visit your website particularly three times a week to find out the new guidance you have. And of course, I’m always astounded for the exceptional methods you serve. Selected two points in this post are definitely the simplest we have all had.

  23. Thank you for any other informative blog. The place else may I am getting
    that type of info written in such an ideal way? I’ve a undertaking that I am simply
    now working on, and I have been on the glance out for such
    information.

  24. I simply wished to appreciate you again. I do not know the things I would’ve worked on without the actual techniques provided by you over such area of interest. It was actually a very daunting crisis in my view, nevertheless being able to view a new expert technique you solved the issue took me to leap over joy. I’m thankful for this support and believe you really know what a powerful job you were providing teaching many others through the use of your website. I know that you’ve never come across all of us.

  25. Hey there! I simply would like to offer you a big thumbs up for the
    excellent info you’ve got right here on this post. I’ll be coming back to your website for more soon.

  26. At this time it appears like Drupal is the preferred blogging platform out there
    right now. (from what I’ve read) Is that what you’re using on your blog?

  27. I wish to express my appreciation for your generosity supporting folks who need guidance on this concern. Your special commitment to getting the solution throughout appeared to be quite informative and has in most cases helped associates like me to realize their targets. The informative guideline can mean a great deal to me and far more to my mates. Thanks a lot; from all of us.

  28. Oh my goodness! a tremendous article dude. Thank you However I’m experiencing issue with ur rss . Don抰 know why Unable to subscribe to it. Is there anybody getting similar rss problem? Anyone who knows kindly respond. Thnkx

  29. This is a great tip especially to those fresh to the blogosphere.
    Brief but very accurate info… Appreciate your sharing this one.

    A must read post!

  30. I抦 impressed, I need to say. Actually hardly ever do I encounter a weblog that抯 each educative and entertaining, and let me tell you, you have hit the nail on the head. Your concept is excellent; the problem is one thing that not sufficient people are talking intelligently about. I am very glad that I stumbled throughout this in my search for one thing referring to this.

  31. I was very happy to seek out this internet-site.I wanted to thanks for your time for this glorious read!! I definitely enjoying each little little bit of it and I have you bookmarked to take a look at new stuff you weblog post.

发表评论

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