How to use iOS 9 content blockers to remove web popover boxes
In Settings > Safari > Advanced, enable Web Inspector.
Connect your iOS device to a Mac via USB.
On the Mac, go to Safari > Preferences > Advanced, and check the Show Develop Menu in Menu Bar.
In the Develop menu, with the page open on your iOS device in Safari, select your device name and the page. The raw HTML of the page will load.
Now as you hover over HTML in Safari in OS X, areas of the page in Safari in iOS will highlight.
When you’ve found the box (in this case, a subscription reminder at the Washington Post), look for div id="name" at the top. The name here is wp_Alert.
Find the segment of HTML that corresponds to the box, and note its ID name.
A few of the early content-blocking filter apps let you block CSS elements by name. I’ll walk through the steps for 1Blocker:
-
Launch 1Blocker.
-
Tap Customize.
-
Under Configurable, tap Hide Page Elements.
- Now:
- Name it descriptively, like “WaPo article reminder”.
- Enter the CSS selector. IDs have to be preceded with a hash sign, so our example is entered as
#wp_Alert. - Tap Hide Only for Particular Domains.
- Enter the domain; here,
washingtonpost.com.
-
Tap Save.
-
Now go back to Safari and reload the page: the popover should now be missing.
Fill out a 1Blocker filter to suppress the popover.
The finished filter can be flipped on and off, too.
Some websites either already use random ID names or will start doing so. Others may obfuscate the popover box’s container, making it impossible to identify. But for many sites, this will let you browse in peace without them missing out, either.
At left, the page with a popup. At right, reloading after installing the CSS box filter.
Sign up for Computerworld eNewsletters.
