Want to read Slashdot from your mobile device? Point it at m.slashdot.org and keep reading!

 



Forgot your password?
typodupeerror
×
OS X Businesses Operating Systems Apple

Content Blocking by CSS in Safari 44

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."
This discussion has been archived. No new comments can be posted.

Content Blocking by CSS in Safari

Comments Filter:
  • 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 (Score:4, Insightful)

    by jasoncart ( 573937 ) on Monday April 14, 2003 @06:32AM (#5726774) Homepage
    I'd prefer to see the ads if it keeps the sites I enjoy reading in business.
    • 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 (Score:5, Insightful)

      by metamatic ( 202216 ) on Monday April 14, 2003 @06:36AM (#5726785) Homepage Journal
      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.
      • Stupid layout (Score:5, Insightful)

        by wowbagger ( 69688 ) on Monday April 14, 2003 @07:17AM (#5726924) Homepage Journal
        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.
        • 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 w

          • 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 (Score:3, Insightful)

            by docwhat ( 3582 )
            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!
          • 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).
        • Actually, my screen's generally 1024x768. However, my browser window never is.
        • 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%;
          }
        • 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 p
          • 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 s
        • 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 [w3.org]?

          --Dan
          • 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 containin

        • 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

    • by 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.
  • by crow ( 16139 ) on Monday April 14, 2003 @07:19AM (#5726930) Homepage Journal
    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 [schooner.com] 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.

    • 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; }.

    • 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* (Score:3, Informative)

    by Fweeky ( 41046 ) on Monday April 14, 2003 @07:37AM (#5727014) Homepage
    anti-banner.css [aagh.net], 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.
  • by shippo ( 166521 ) on Monday April 14, 2003 @07:41AM (#5727030)
    Do you mean the one that has just appeared in Software Update - 1.0 Beta 2 (v73)?
  • Junkbuster? (Score:3, Interesting)

    by bedouin ( 248624 ) on Monday April 14, 2003 @08:10AM (#5727193)
    I've been using Junkbuster to block ads for the past two years, but it's becoming pretty much ineffective since the blocklist [waldherr.org] 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.
    • 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 j
      • 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 [neilvandyke.org] blocklist for Junkbuster, if anyone's interested.
  • by the way... (Score:2, Informative)

    by gabe ( 6734 )
    Apple released Safari beta 73 this morning via software update. Enjoy.
  • by mTor ( 18585 )
    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/ [privoxy.org]

  • ... 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.
  • Blocks Flash ads! (Score:3, Informative)

    by Jobe_br ( 27348 ) <bdruth&gmail,com> on Monday April 14, 2003 @01:54PM (#5729907)

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

      -/-
  • by 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.

"The great question... which I have not been able to answer... is, `What does woman want?'" -- Sigmund Freud

Working...