Fix Antialiasing

fix-antialiasing.js

// javascript:var%20style%20=%20%27*%20{-webkit-font-smoothing:%20auto%20!important}%27;var%20link_element%20=%20document.createElement(%27link%27);link_element.rel%20=%20%27stylesheet%27;link_element.href%20=%20%27data:text/css,%27%20+%20escape(style);document.getElementsByTagName(%22head%22)[0].appendChild(link_element);

var style = '* {-webkit-font-smoothing: auto !important}';
var link_element = document.createElement('link');
link_element.rel = 'stylesheet';
link_element.href = 'data:text/css,' + escape(style);
document.getElementsByTagName("head")[0].appendChild(link_element);

Bookmarklet to force the page to render with default font smoothing.

• You could always use document.querySelector('head') for a shorter access.
• I like the data: URL approach! That said, you could always build a string and append it to head's innerHTML property instead of DOM munging. This is super clean though.

Any reason not to create it as an extension, or is this to facilitate comparisons?

I'd probably go with a straightup style tag, but it probably doesn't make much difference:

// javascript:(function(){var%20s=document.createElement(%27style%27);s.type=%27text/css%27;s.innerText=%27*{-webkit-font-smoothing:auto%20!important}%27;document.querySelector(%27head%27).appendChild(s);})()
(function() {
    var s = document.createElement('style');
    s.type = 'text/css';
    s.innerText = '* {-webkit-font-smoothing: auto !important}';
    document.querySelector('head').appendChild(s);
})()

A few things:

@potch: Can't use querySelector. IE7/8 don't have it, and if you use it (even for non-relevant code).. it will throw an exception.
Also, Not that it's really relevant as IE7 isn't being targetted, but it doesn't support data url's either (in CSS at least, haven't tried inline HTML.. but assume it's the same).

You'd be better off doing a document.getElementsByTagName('head'][0] to select the head, so that non-query selector browsers won't cry.. or you could wrap it in a try/catch, but why bother for something that doing it the "normal" way isn't hard.

Edit: QSA is in IE8... Some reason I thought IE9 was the minimum. Regardless.. QSA is probably not a great idea until IE7 support is killed off.

I would go with @bradchoate's solution, personally. Seems a bit easier to read, and non-WebKit compatibility is a moot point with this bookmarklet.

Just putting in my two-cents to help save bytes here. You can use document.head to get the head element, pass a renamed document variable into the function, the type isn't necessary for style tags to work so it may be omitted

// document.querySelector("head") --> document.head
// nix s.type=%27text/css%27;
// function() … () --> (function(a) … (document)
// document --> a
// snippet size: 156 bytes

javascript:(function(a){var%20b=a.createElement(%27style%27);b.innerText=%27*{-webkit-font-smoothing:auto%20!important}%27,a.head.appendChild(b)})(document)

I did some research, and there's an awesome API called insertAdjacentHTML that works in Safari 4+. Using that API, this is as easy as:

document.head.insertAdjacentHTML('beforeend', '<style> * { -webkit-font-smoothing: auto !important } </style>');

How cool is that??

Wow, nicely done potch! I've never even seen that API before. O_o. That totally bests my snippet. bows to the leader of the people-who–actually–lookup–API–goodies

That snippet is completely . ;)

Oops, forgot to wrap the tag… the joke was: That snippet is completely <meta>