-webkit-font-smoothing rendering strategies demo

Gives you a quick way to see the different rendering strategies for anti-aliased fonts.

HTML

<h1>-webkit-font-smoothing Interactive Demo</h1>
<p>
    Webkit-based browsers only (Safari, Chrome): type in text and see it rendered in 3 different rendering strategies. <span class="mozilla-warning">This may not work for you---are you using Firefox?</span>
</p>
<p>
    <input type="text" class="text" value="Type something you will.">
<p>
<table>
    <tr>
        <th>none</th>
        <td class="none-smoothing blues"></td>
    </tr>
    <tr>
        <th>antialiased</th>
        <td class="antialiased-smoothing blues"></td>
    </tr>
    <tr>
        <th>subpixel-antialiased</th>
        <td class="subpixel-smoothing blues"></td>
    </tr>
    <tr>
        <th>none</th>
        <td class="none-smoothing reds"></td>
    </tr>
    <tr>
        <th>antialiased</th>
        <td class="antialiased-smoothing reds"></td>
    </tr>
    <tr>
        <th>subpixel-antialiased</th>
        <td class="subpixel-smoothing reds"></td>
    </tr>
    <tr>
        <th>none</th>
        <td class="none-smoothing grays"></td>
    </tr>
    <tr>
        <th>antialiased</th>
        <td class="antialiased-smoothing grays"></td>
    </tr>
    <tr>
        <th>subpixel-antialiased</th>
        <td class="subpixel-smoothing grays"></td>
    </tr>
</table>
<p class="note">
  As was pointed out to me by a colleague, there has been a very long
  discussion about the <a href="http://code.google.com/p/chromium/issues/detail?id=152304#c10" target="_blank">webkit-font-smoothing bug</a>.
</p>

CSS

body {
    padding: 40px;
}
h1 {
    font-size: 1.5em;
}
p {
    font-family: sans-serif;
    margin: 10px 0;
}
.mozilla-warning {
    font-weight: bold;
}
.note {
    color: #777;
    font-size: 0.75em;
}
.text {
    font-family: sans-serif;
    font-size: 0.8em;
    padding: 10px 20px;
    color: #16d;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 2px;
    border: 1px solid #ccc;
    box-shadow: inset 0px 1px 4px 0px rgba(0,0,0,0.2)
}
table td, table th {
    font-family: sans-serif;
    border: 1px solid #ccc;
    padding: 10px 20px;
    font-size: 0.75em;
}
.blues {
    color: #27d;
}
.reds {
    color: #b21;
}
.grays {
    color: #555;
}
.none-smoothing {
    -webkit-font-smoothing: none;
}
.antialiased-smoothing {
    -webkit-font-smoothing: antialiased;
}
.subpixel-smoothing {
    -webkit-font-smoothing: subpixel-antialiased;
}

JavaScript

var $text = $(".text"),
    $td = $("td");
function detectWebkit() {
  if ($.browser.webkit) {
    $('.mozilla-warning').hide();
  }
}
function update() {
  $td.text($text.val());
}
$text.on("keyup", update);

update();
detectWebkit();