Skip navigation.

Flashblock and iframe-block for Opera by CSS

Do you love Lex1's Flash-block script?

I certainly do.

I love the fact that, with that script, I was released from an enormous number of irritating "moving ads".

However, a while ago, I stopped using it, simply because I found an equivalent to it.

It's not a User JS, but it's a User CSS.


So here is the full source code and the author's explanation. It's only some 30 lines of CSS or so including iframe-block functionality.

Amazing, isn't it?

For those of you who can't read Japanese. I'm going to tell you how to use it.


  1. First, go to the above page and copy the code.
  2. Then create a file in your Local CSS Files Directory, paste the code, and save it.
  3. Restart Opera so that the style file appears as "Flash block by CSS" in your [View]->[Style] menu.
  4. Tick the above menu, and boon! All Flash is gone.


You'll notice you can still watch YouTube video even with the CSS turned on.

That's because YouTube Videos are whitelisted.

These parts of the code below are how you can whitelist certain kinds of Flash and/or iframes.

embed[src]:not(.ucContent):not([src*="nicovideo"]):not([src*="ytimg.com"])

iframe[src]:not(.ucContent)



If you want to unblock a Flash file that has "src" attribute containing "example.com", then just add :not([src*="example.com"]) at the end of the above line.


Note: each time you change. You have to restart Opera if you have followed the direction above. (or use "Reload stylesheets" action that Opera hasn't assigned to any key/menu by default...) If you are doing with "Site preferences" you don't need to restart Opera. Changes are reflected right away.

Can we change the replacement icon? Or remove the Flash/iframe source URLs shown? Yes we can!

Change the below part for example.

content: -o-skin("Window Document Icon") attr(src);


This -o-skin icons are listed here and you can change by putting another icon's name. Or set by a URL (you can even wirte a data: scheme URL just like Lex1's script does).

The "attr(src)" part is for the source URL, remove it if you like.


Of course you can just delete the Flashblock part or iframe-block part of the script, which should be quite obvious if you look at the source, to enable only one of the features.

The very good thing about it is that Opera does not load images, Flash, etc. in "display:none;" parts. So you can save some bandwidth! (It apparently still downloads source HTML files for the blocked iframes).

Improved Hit-a-Hint Bookmarklet With Your KeybindPixel-wise Manipulation of Canvas on Opera

Comments

Ledah 28. February 2009, 23:27

Very nice, thank you! :smile:

edvakf 1. March 2009, 10:38

You're welcome!

Hélder Matos Nogueira 14. August 2009, 15:32

i know there is a button where you can choose a css style on-the-fly. i need it 'cause i use other ccs styles on different web pages.

Ledah 22. August 2009, 16:37

Hi,
I'm currently using Opera 10 beta build 4546 and unfortunately only iframes are blocked. Flash animations are still there.
Anyone made the same experience?

Appendix: Well, my fault. Testing with youtube while it's whitelisted is stupid :wink:

edvakf 23. August 2009, 12:47

YouTube is whitelisted. Other Flash should be blocked.

Zoomer 25. October 2009, 15:31

Do you know what license it was relased as? I made some changes, imho, improve it but wasn't sure if that's ok.

Basically added:
overflow: hidden !important;
white-space: nowrap !important;

This ensures that the href text doesn't overflow into other parts of the page, and nowrap is a quick hack to (usually) show just the domain of the href, or at least not have it span multiple lines and spoil the look of pages. For iframes, it sometimes shrinks the size of ad, so that content that was previously pushed down gets more space before the fold.

I reduced the text size and color as well, but that boils down to personal taste.

edvakf 28. October 2009, 04:38

Just a moment. Let me ask the author on twitter. (Although I know he doesn't use the CSS nor Opera any more)

edvakf 28. October 2009, 05:55

The author said it's \(^o^)/ license, which is an alias to the Public Domain. lol
He said he is giving up any rights he owns on the piece of CSS above.

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies