Skip to content

Instantly share code, notes, and snippets.

@gruber
Created December 4, 2012 02:45
Show Gist options
  • Save gruber/4200065 to your computer and use it in GitHub Desktop.
Save gruber/4200065 to your computer and use it in GitHub Desktop.
Fix Antialiasing
// 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);
@pberry
Copy link

pberry commented Dec 4, 2012

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

@bradchoate
Copy link

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);
})()

@gu3st
Copy link

gu3st commented Dec 4, 2012

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.

@gu3st
Copy link

gu3st commented Dec 4, 2012

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.

@jordw
Copy link

jordw commented Dec 4, 2012

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.

@thecrypticace
Copy link

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)

@potch
Copy link

potch commented Dec 4, 2012

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??

@thecrypticace
Copy link

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 . ;)

@thecrypticace
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment