Blocking Animated GIF Images with User CSS (Updated)

Warning: The instructions here are obsolete in that Blink (the engine underneath Chrome) does not support user style sheets. If you find animations a problem, the single best solution is to use Slimjet, an alternative browser built on Blink/Chrome. In the configuration options for Slimjet is a toggle to disable animations as a built-in function. So far as I have tested, all of the Chrome extensions work in Slimjet.

Original post:

This basically applies to Google Chrome. Since I am not a CSS expert, this took a lot of digging. Why it is so very many tutorials leave this out, I don’t know.

You cannot selectively block animated GIFs. You can only block all GIFs, but even that is a little complicated. Since Internet Explorer, Firefox and Opera all include switches in the configurations for turning off animated images, this is an issue only with Webkit browsers, such as Chrome and Safari. For the latter, see this. For Chrome, you have to use a secret incantation.

First, start Chrome from the command line with the proper switch:

google-chrome --enable-user-stylesheet

This creates a folder in the config system where you can add a User CSS:

~/.config/google-chrome/Default/User StyleSheets/Custom.css

Open this in your favorite editor. You should add this one line to block all GIF images:

img[src*="gif"] { display: none !important; }

It took some digging to find out how to set the selector. Adding that asterisk before the equal sign indicates any item on the displayed webpage where the img tag defines a src which includes the sequence “gif” in any portion of the URL. This line tells your browser not to display it regardless. That “!important” makes it imperative, and the power of CSS is to honor the user’s style sheet over that of any webserver instructions.

Granted, it makes some pages look funny, but at least in Chrome I can read without fighting the animations. Since the “Pause! Pause! Pause!” extension is broken, causing a race condition on many pages, there really is little else you can do. Maybe someday the Webkit developers will listen, since this has been a rather noisy demand on the Chrome discussion boards, but I am dubious.

Oh, and if you want to remove that broken extension from Chrome, just delete the entire folder at:

~/.config/google-chrome/Default/Extensions/gpgcolmilkcnccpllfdleobpflemehec

Update: Better yet, there is a greasemonkey script which simply removes only the animated GIFs, allowing the others to remain when you press the ESC key. Here’s how.

Go here and copy the JScript from the display box, and save to a file. I named it stop-animation.user.js and left it in my Home directory. Then I opened Chrome, hit CTRL+O for “open” and found my JScript file and clicked on it. Chrome asked if I was sure I wanted to install this “extension” and I clicked “Continue.” Now when I visit a page with animated GIFs, I hit ESC and they all disappear.

About Ed Hurst

Disabled Veteran, prophet of God's Laws, Bible History teacher, wannabe writer, volunteer computer technician, cyclist, Social Science researcher
This entry was posted in computers and tagged , , . Bookmark the permalink.

3 Responses to Blocking Animated GIF Images with User CSS (Updated)

  1. Pingback: Don’t Use Google Chrome Browser on Linux (Updated) « Do What's Right

  2. Josef says:

    I found this page looking for a way to block animated GIFs on Chrome. Unfortunately, Google turned off User Stylesheet support in Chrome version 32 or 33. Your tactic looked like the answer to my prayers, but I can’t even give it a shot. You should probably update this post.

    As for the GIFs, they are still the curse of Chrome. I’ll try one of the GIF blocking extensions next, but, per the reviews, none of them work very well. With all of the updates they do on Chrome, and Google’s resources, you’d think they would have solved this problem by now.

    Like

  3. Ed Hurst says:

    Thanks for the update, Josef. To be honest, I never use Chrome or Chromium. I’ve become a fan of Slimjet because they have built-in a simple toggle to turn off animations. I’ll update the post.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s