Content Blocking by CSS in Safari

ahknight writes "There's a nice summary of how to get various kinds of content, in this case ads, blocked from being displayed via a custom stylesheet you add to your browser. This is mainly for Gecko-based browsers and rather old news, but the good news is that it also appears to work in the ... umm ... latest version of Safari."

Comments

nice !

[chrispy666]

safari already was blocking quite efficiently those nasty popups, but with this I don't even need to edit my host file to avoid having the ad banners ! cool

Ad blocking Good

[jasoncart]

I'd prefer to see the ads if it keeps the sites I enjoy reading in business.

Re:Ad blocking Good

[jasoncart]

Sorry - an HTML filter seem to have taken out the greater than & less than signs in my comment subject. Read as "Ad blocking isn't good"

There's a limit

[metamatic]

I didn't mind ads for a while, but when certain sites (ahem) started putting in those huge mega-ads that take up more than half my browser window, I had to start doing some ad blocking to make the web usable. It was either that or learn to
read
text
that
looks
like
this.

Tragedy of the commons and all that. The people whose ads are being blocked should get angry at the idiots who force us to block ads by making their ads so huge, obnoxious and badly-placed.

Re:Ad blocking Good

[Anonymous Coward]

That's what tip jars and subscriptions are for. It costs, what, NOTHING to set one up via Amazon or PayPal? Ok, percent of profits, but no startup cost.

Better ROI than ads, I'd say, and the site looks cleaner for it.

Stupid layout

[wowbagger]

The problem isn't so much the ads, rather it is the fact that the webmaster(baters) who create these sites set up their layouts assuming your screen is 800x600. Therefor, since the ads are 160 wide, and there are two of them (one on each side), that leaves 800-(2*160) = 400 (that's the sort of math these morons use) for the article.

So, if you are running a 1600x1200 window and larger fonts (anti-aliasing? I need no anti-aliasing!)
you
get
an
article
like
this .

If the morons would either

• use a "width=*" for the article
• Come to an agreement as to what class the actual article text would be

then there wouldn't be a problem - large browser users like me would either get an article that spans the available space (the width option) or could at least override the setting on the article text in our CSS (the common class option).

I've contacted several sites about this. For example, PBS (hosters of the Cringely articles) responded saying "Some people don't like long lines of text, so there!" (OK, then they can resize their windows to get the line length they want.)

Unfortunately, since every site uses a slightly different "width=", and since CSS does not allow you to say "width=[400..800]" or something like that, you have to have a seperate entry for each site, and when the webmaster(bater) changes the layout you have to update your CSS and restart your browser.

I do wish people would realise that HTML is about giving enough info to my browser to render the page, not about being pixel-exact.

Re:Stupid layout

[DeadSea]

There are good reasons to limit the width of text. If text is too wide, it is hard to read because it is not easy to see which line comes next when your eyes have to track back a foot and a half. Newspapers and magazines all publish in columns. They do this because text that narrower text is easier to read.

Yes, there are limits, a vertical line of single words is also hard to read. Text is easiest to read when the column is 2.5 to 6 inches wide. Limiting the width is a good idea because of this.

It would be nice if there were a column style that you could apply to an html div so that it would automatically be laid out in a dynamic number of easy to read columns.

Re:Stupid layout

[metamatic]

Actually, my screen's generally 1024x768. However, my browser window never is.

Re:Stupid layout

[JimDabell]

Unfortunately, since every site uses a slightly different "width=", and since CSS does not allow you to say "width=[400..800]" or something like that, you have to have a seperate entry for each site

Have you tried:

body > table {
width: 100%;
}

Re:Stupid layout

[wowbagger]

This will affect all tables in the body. When you have the standard layout of nested tables, this won't work well.

Re:Stupid layout

[wowbagger]

And again, if I, the reader, find it too hard to read the long lines of text, I, the reader, can resize my window until it is easy to read.

The webmaster(bater) does not know what my comfort threshold is.

Let me decide what I want to read.

Re:Stupid layout

[Sentry21]

since CSS does not allow you to say "width=[400..800]" or something like that

You mean like the CSS min-width and max-width attributes?

--Dan

Re:Stupid layout

[wowbagger]

You mean:

'min-width'
Value: | | inherit
Initial: UA dependent
Applies to: all elements except non-replaced inline elements and table elements
Inherited: no
Percentages: refer to width of containing block
Media: visual

'max-width'
Value: | | none | inherit
Initial: none
Applies to: all elements except non-replaced inline elements and table elements
Inherited: no
Percentages: refer to width of containing block
Media: visual

(taken from the very link you gave, emphasis mine)?

Granted, I wasn't as clear as I should have been - I was referring to Netscapes user-content.css, which allows you to re-write a page on the fly. It is not possible to, in user-content.css, say "if the width of a table entry is between x and y, rewrite it to be *".

Re:Stupid layout

[docwhat]

If the web designer wants to set the width, then they should use CSS and set the width based on character widths. This would allow people to bump up the font size and keep it looking good.

But then agin, the whole thing is irritating. Web designers forget, unlike TV, surfing isn't passive. You piss of a viewer, they walk.

Ciao!

Re:Stupid layout

[chamlin]

I thought line length was dependent on font size, since the character count is what typographers use to determine line length (they know the font size and average character counts for a length).

Re:Stupid layout

[FunkyChild]

If you're using CSS, you shouldn't be using tables anyway. You should be using nested DIVs. (standards compliance, semantic web, la da da)

Re:Stupid layout

[wowbagger]

The problem is sits that use tables in such a fashion that the view cannot use a local user-content.css file to override them.

The site isn't using CSS, the user is.

Re:Stupid layout

[FunkyChild]

Ah yes, you're right - wasn't thinking about that.

Solves half the problem

[crow]

This solves half the problem. The other half is that the ads are still loaded, just not displayed. I'm using a variant of the style sheet hack, along with Proxy Auto Config to redirect requests to ad sites to a server that returns transparent gifs for every request. It works much like JunkBuster, only it's integrated with the browser, so you don't have the side effects of using a proxy for every request (e.g., it's not any slower).

Now I hardly ever see ads, and the ads I don't see never get loaded in the first place, saving my bandwidth. Of course, that means that the web sites I visit never record a hits on their ad servers from me, whereas using the style sheet alone is completely transparent to the server.

Oh, and both the Proxy Auto Config and the Style Sheet hacks should work just fine with most web browsers, not just Mozilla and Safari.

Re:Solves half the problem

[JimDabell]

The other half is that the ads are still loaded, just not displayed.

Perhaps. It depends which browser you use. Some browsers (including mozilla, I believe) don't load images that are hidden using { display: none; }.

Re:Solves half the problem

[gidds]

I'm probably missing something obvious, but how do you use Proxy Auto Config with Safari? It doesn't seem to support a proxy auto-config file...

*cough*

[Fweeky]

anti-banner.css, and I don't assume you're using Mozilla. I'd be interested to hear if it works in other browsers (other than Opera/Mozilla/IE, that is), and in receiving instructions on how to use it in them.

The latest version of Safari?

[shippo]

Do you mean the one that has just appeared in Software Update - 1.0 Beta 2 (v73)?

Re:The latest version of Safari?

[drokus]

Thanks for the tip about beta 2.....been waiting for a while

Junkbuster?

[bedouin]

I've been using Junkbuster to block ads for the past two years, but it's becoming pretty much ineffective since the blocklist is never updated.

Anyone know of a source for fresh blocklists, or a program that's updated more regularly? I'd prefer to keep it Junkbuster if possible.

Re:Junkbuster?

[blah_ect]

http://www.privoxy.org/ "Privoxy is a web proxy with advanced filtering capabilities for protecting privacy, filtering web page content, managing cookies, controlling access, and removing ads, banners, pop-ups and other obnoxious Internet junk. Privoxy has a very flexible configuration and can be customized to suit individual needs and tastes. Privoxy has application for both stand-alone systems and multi-user networks. Privoxy is based on Internet Junkbuster (tm)." Hope this works for you, they just released 3.02

Re:Junkbuster?

[bedouin]

Yeah, thanks. I actually stumbled upon Privoxy right after I posted the parent. I'll probably upgrade to it one rainy afternoon, simply because Junkbuster seems to be abandoned nowadays.

In the meantime though, I did find a relatively new blocklist for Junkbuster, if anyone's interested.

Hmmmm?

[ihatewinXP]

Not in software update for me but it is right here:

http://www.apple.com/safari/download/

Now lets play with these CSS sheets!

by the way...

[gabe]

Apple released Safari beta 73 this morning via software update. Enjoy.

More stupid layout things

[@madeus]

Can't agree more! (Well, if you swore a bit more and were more insulting about the frigging muppets who do this kind of nonsense then I might ;).

Web designers who INSIST on using fixed width for news sites (while wasting screen real estate) should be bloody well fired.

It's really quite simply wank - C|net do it, CNN do it, the BBC do it - and Wired do it too (with the actual articles). It's MORONIC and the ONLY justification they have is that they are too lazy/stupid to work out how to make things scale properly.

I've talked to several designers about this, and it stems from a mixture of them coming from traditional (magazine layout) based media (this is still what is taught at college's too, so many new designers still have this mentality) but also because of a lack of understanding of tables and no idea about how to use them creatively.

The only thing more wank that that is The Register's nonsense front page with articles all over they place. AND they are fixed width too the twats. :/

Note to moron web desginers: If you ARE going to do this sort of crap, at least center the page like C|Net do. It's still wank of course, but less so. AND there is NO excuse not do to do that... (other than being a lazy twat).

Re:More stupid layout things

[greenhide]

Web designers who INSIST on using fixed width for news sites (while wasting screen real estate) should be bloody well fired.

Web designers who insist on making websites that are browser friendly WILL be bloody well fired.

As a web designer/developer -- and, let me clarify -- one who has to do it for a LIVING, and not by having a website that makes ME money, but rather making websites for OTHERS -- you have little to no control over how you design the website. The client wants to have blue columns on each side of the text? You put them in. They have some weird configuration in their browser that makes the website display funny? You recode the site so it looks good on *their* browser, even if you have to jump through hoops to do it.

There are a lot of people who design websites poorly because they are bad website developers. I would say, though, that there are at least as many who develop a website in a certain way because of the whims of their clients or lead designers.

I'd say, more than a web developer's familiarity with print design, clients' familiarity with print design, and with having print-based promotional materials made, leads them to believe that they can expect controlled widths and placement, and that the layout will have just one appearance.

I agree with your last point -- developers who purposefully don't center their websites in the browser should be taken out and shot. Again, though, it's difficult to say whether they have any control over even that.

Re:More stupid layout things

[Jobe_br]

Amen.

Privoxy

[mTor]

This CSS stylesheet doesn't really work that great. It only solves parts of the problem and doesn't really adress al of them. If you want a fairly complete privacy solution, take a look at Privoxy which some people have called : "junkbusters on speed". Yes, there is an OS X version and it works great with Safari.

http://www.privoxy.org/

Re:Privoxy

[PopeZaphod]

Yes it does. Thanks for the link!

Keep editing your HOSTS file

[Anonymous Coward]

Blocking via CSS still downloads the ads to you. You just aren't seeing them. Although blocking via CSS is a valuable tool, particularly in some corporate environments, it does not replace the HOSTS file.

Re:Keep editing your HOSTS file

[Anonymous Coward]

OK, dumb question, but this is Slash Dot: Where do I get at my HOSTS file? It's not just in /etc, is it?

Re:Keep editing your HOSTS file

[djcapelis]

[user@localhost etc]$ ls /etc | grep hosts hosts hosts.allow hosts.deny Yes, it is.

Ok, this works fairly well, but...

[Feztaa]

... what we really need is a way to block images with specific dimensions; most ads come in two specific sizes, the "wide narrow banner" and the "big fat box", both of which can be seen on Slashdot.

Try this:

[KnightStalker]

You could use something like Proxomitron to rewrite incoming HTML on the fly. Or create a bookmark with this as the location:

javascript:var tbls = document.getElementsByTagName("*"); for (var i=0; i<tbls.length; i++) { if(tbls[i].tagName && tbls[i].tagName.match(/^(td|table)$/i) && (tbls[i].getAttribute("width") > 300 && tbls[i].getAttribute("width") < 800)) { tbls[i].setAttribute("width","*"); } }

If you click on this bookmark in Mozilla, it will zoom through the currently loaded document tree and wipe out all TD and TABLE widths between 300 and 800. Edit the regex there in the middle to apply it to other tags. It doesn't work in Konqueror, but it might work in Opera or IE.

Blocks Flash ads!

[Jobe_br]

For those not aware of this, it is possible to use this CSS method of blocking ads to block Flash advertisements .. arguably, the most annoying. Try something like so:

embed[type="application/x-shockwave-flash"][width= "468"][height="60"]
{
display: none !important;
visibility: hidden !important;
}

As you find Flash ads that aren't blocked, just add another entry for the size of ad you're seeing ... in my CSS, I have at least 8-10 such entries. Common sizes are:

• 468x60
• 728x90
• 120x600
• 336x280
• 300x250
• 180x150
• 240x400
• 468x240
• 120x600
• 160x600
• 336x280

Re:Blocks Flash ads!

[chiller255]

This method seems to work well in Mozilla, but not in Safari. Anyone know a workaround...?

Looks like another thing we'll have to wait for in Safari...

hosts is still the easy way to go

[snuffdiddy23]

open Directory Access.app and enable BSD Configuration files, get a good hosts file and pico /etc/hosts usually does fine for most of my content blocking needs. if i knew how to use vi i could probably cut a good four and half seconds off that.

Re:hosts is still the easy way to go

[Mikey-San]

Actually, I find BBEdit is great for editing /etc/hosts--especially with the "bbedit" command-line tool.

% bbedit /etc/hosts

Also, I like the regex-like way you can block ads with style sheets, but since I still have to load them (they're just not displayed), this isn't going to be an option for me. I see banner ads as massive wastes of bandwidth.

-/-

OmniWeb blocks ads with no effort

[Anonymous Coward]

For people with more money than energy, buy OmniWeb. I am way too lazy to do anything suggested here, OmniWeb does all my ad-blocking for me. And it is smarter about pop-ups than Safari, I see the pop-ups I need and not the ones I don't.