Preparation code

<script>
  var escapeNonWordChars = function(text) {
   return text.replace(/\W/g, function(chr) {
    return '&#' + chr.charCodeAt(0) + ';';
   });
  };
  
  var escapePrimaryOffenders = function(text) {
   return text.replace(/[&<>"'`]/g, function(chr) {
    return '&#' + chr.charCodeAt(0) + ';';
   });
  };
  
  var escapeNonWordChars2 = (function() {
   function escapeChar(chr) {
    return '&#' + chr.charCodeAt(0) + ';';
   }
   return function(text) {
    return text.replace(/\W/g, escapeChar);
   };
  }());
  
  var escapePrimaryOffenders2 = (function() {
   function escapeChar(chr) {
    return '&#' + chr.charCodeAt(0) + ';';
   }
   return function(text) {
    return text.replace(/[&<>"'`]/g, escapeChar);
   };
  }());
  
  var text = "date: 13 April 2011\ntime: 5:30pm\nzone: America/Los_Angeles\ntags: CSS, meaningful markup\n\n\nChanging the colour of list bullets using CSS\n=============================================\n\nSo, you're about to style an unordered list of some sort...\n\n    <h1>TXJS 2011 Speakers</h1>\n    <ul>\n      <li>Brendan Eich</li>\n      <li>Alex Russell</li>\n      <li>Douglas Crockford</li>\n      <li>Paul Irish</li>\n    </ul>\n\nYou've decided upon hanging square bullets in a light grey – nothing too\ndistracting...\n\n    ul {\n      list-style: square outside;\n      color: #ccc;\n    }\n    \n    li {\n      color: #000;\n    }\n\nThis should do the trick, but doesn't for some reason! How the heck does one\ntarget the bullets and only the bullets? As far as I know it's not possible.\n\n### Conventional hack {#conventional-hack}\n\n    <h1>TXJS 2011 Speakers</h1>\n    <ul>\n      <li><span>Brendan Eich</span></li>\n      <li><span>Alex Russell</span></li>\n      <li><span>Douglas Crockford</span></li>\n      <li><span>Paul Irish</span></li>\n    </ul>\n\n    ul {\n      list-style: square outside;\n      color: #ccc;\n    }\n    \n    li>span {\n      color: #000;\n    }\n\nThis gets the job done, but those `span`s are ugly – there are ways to achieve\nthe desired visual effect without hacking the markup.\n\n### Background image technique {#background-image-technique}\n\n    ul {\n      list-style: none;\n    }\n    \n    li {\n      margin-left: -12px;\n      background: url(bullet.png) no-repeat 0;\n      text-indent: 12px;\n    }\n\nThis requires very little CSS. To avoid incurring the overhead of an extra\nHTTP request, one could Base64-encode the image in a [data URI][1].\n\n### Pseudo-element technique {#pseudo-element-technique}\n\n    ul {\n      list-style: none;\n    }\n    \n    li {\n      position: relative;\n    }\n    \n    li:before {\n      position: absolute;\n      top: 8px;\n      margin: 8px 0 0 -12px;\n        /* accommodate Camino */\n        vertical-align: middle;\n        display: inline-block;\n      width: 4px;\n      height: 4px;\n      background: #ccc;\n      content: \"\";\n    }\n\nSo it's possible to fashion square bullets of any colour with just a handful\nof straightforward declarations. Nice!\n\nPrefer round bullets? No problem. :)\n\n      ...\n      -webkit-border-radius: 2px;\n      -moz-border-radius: 2px;\n      border-radius: 2px;\n      ...\n\n\n[1]: http://en.wikipedia.org/wiki/Data_URI_scheme#CSS\n";
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

escapeNonWordChars(text);

escapePrimaryOffenders(text);

escapeNonWordChars2(text);

escapePrimaryOffenders2(text);

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments