This was originally posted on a website I was developing over a year ago called Keenotes.
If you read a lot of news websites, you've probably experienced a CSS popup: An advertisement or signup form appears on your browser window, scrolls with your scrollbar, and usually blacks out the area outside of it (with a transparent background color).
CSS popups exist for two reasons:
- News websites wish to make as much money as possible off their traffic, so they will either require you engage with their corporate masters (a.k.a. advertisers) in whatever way is most profitable for them. Usually, this involves giving them an email address and consenting to be spammed with useless emails, or giving them access to your Facebook page (if you have one) so they can learn as much about your life as possible to target their advertising better. But at the same time...
- They wish to be indexed by Google, which won't happen if they just hard-forward guests to another page until they get what they want. Google means traffic, which means more money, after all.
Greed run amock; sounds like business as usual in the domain of online publishing. (For more on greed, see also: any and every "make money by blogging online blog".)
The good news is, there's a very easy way to bypass these stupid CSS popup advertisements, and all you need is any version of Mozilla Firefox or Google Chrome* published in the past two years to easily utilize it. Thus I present, Reading Online News Websites: The Elite Way.
For this example, I will be using this webpage.
"Oh no, they want my metadata!" Well, too bad for them. To read the article, begin by right clicking the gray border around the white box, and click on the Inspect Element option in the context menu.
Next, you'll want to navigate to the Rules tab, then examine the situation. Change the "display" property from "block" to "none":
If you did it properly, the white box will disappear, but the blackout will remain, like so:
Do the same thing to the blackout; only this time, add
display: none to the "element"
And just like that it disappears. Success:
That's all there is to it.
A quick word about the legal implications of this technique: Although webservers still own the intellectual property of any of the pages you visit, I hold the opinion anything in your computer's memory is, in essence, your property to manipulate any way you see fit. Can't read the font? Zoom in. Don't want annoying CSS popups and third-party tracking cookies? Block/hide them at your discretion. It's your web browser. It's your computer. Take control of your destiny.
That being said, use this at your own legal risk and discretion. I offer no warranty or legal advice and am not qualified to offer either. But if you want to avoid liability, you could always go dark.
(Note: The instructions are nearly identical in Chrome; I just didn't feel that posting two sets of screenshots was warranted.)
* Not sure about other browsers; too lazy to research.