Suck Button
CSS ad-blocking biting my ass
The other day I was working on this page’s sidebar layout. My goal was to add some links to my socials and redesign the little music player. Long story short, when I uploaded the site to nekoweb, the social buttons that I added were missing.
I went through the usual debugging steps by making sure there were no CSS conflicts and that the browser was loading the new CSS file. Nothing. Using the “Inspect” function, I checked the CSS rules that were being loaded by the website. I came across this weirdly title CSS file that was being loaded, it seem machine generated. Well, in fact, it was. Looking into the file there were a couple rules targeting class names like “.socials” and “.facebook-btn”. Yes, CSS ad-blocking.
I use uBlock Origin for ad-blocking. Now, this tool not only blocks ad-related websites or malicious websites, it also comes with some handy CSS blocking filters that get rid of cookie boxes and other screen blocking elements. Some of these filter lists target social media links, like the ones I was trying to add. The way it does that is by compiling a bunch of known CSS classes and { display: hidden !important }. In my case I tried to name my social button section “.side-socials” which trigger the list “EasyList – Social Widgets”.
Funny thing is I decided to quickly modify the class in my html file and change it to “.soc-btn”, which turns out also triggers the same list. Common sense is now banned. I ended up naming the class “.funny-page”. Now it works the way it supposed work.
The lesson? Don’t follow standards.