css tinker

Bookmarklets are links that modify a webpage--they do not take you to a new document as traditional hyperlinks would. These links can be added to your bookmarks so that you can access them anytime and have greater control over the pages you visit. Control over elements on the page like its visual appearance, or to highlight patterns, hide advertisements, etc.

To test a bookmarklet just click the link. To save it for your use just right-click and select 'add to bookmarks' (or equivalent). All/most are based on the prior work of Jesse Ruderman and use they use the technologies JavaScript and CSS.

fix legibility Most web designers either do not emphasize legibility, or client-side developers rarely test on the commonly available platforms: this fixes their mistakes with typeface choice, leading, and contrast. In Mozilla I've set this up with keyword 'fix' so I just type 'fix' in the location bar to use. (In Mozilla for the PC I can adjust the type-size with key combinations Ctrl + or Ctrl - so no need to include it in my bookmarklet.)
Build your own bookmarklet: check the items you would like and then 'generate' the bookmarklet to test and add to your bookmarks.

*recommended


typeface:
no change
verdana, geneva*
tahoma
georgia
sans-serif
serif
type size:
no change
1em
10px
11px*
12px
14px
leading:
no change
1em
1.2em
1.5em*
1.8em
2em
color:
no color change
no background change
type is black
background is white
type is white
background is black
generated bookmarklet area
samples of poor legibility, as viewed in Mozilla 1.7
Sample from Jeffrey Zeldman
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Sample from the International Herald Tribune
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Sample from Google News
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Sample from the Wall Street Journal
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Firefox bookmarklet for NYTimes slideshows: javascript:void((function(){var loc=location.href,div=document.querySelectorAll('#slideList');if(div=div.item(0))document.body.appendChild(div),div.style.display='block';div=document.querySelectorAll('#abColumns .buttons p');if(!(div=div.item(0)))return;div=div.textContent.replace(/[^of0-9]/g,'');var i,re=/[0-9]\s+of\s+[1-9]/;var l=div=div.match(/(\d+)of(\d+)/);i=parseInt(div[1],10)+1,l=parseInt(div[2],10);var curl=function(n){var req=new XMLHttpRequest();req.onreadystatechange=function(){if(req.readyState!=4||req.status!=200)return;var img=new Image();img.src=req.responseText.replace(/(\n|\r)/g,' ').match(/id=\"abColumns\".+?<img.*?src=\"(.*?)\"/i)[1];document.body.appendChild(img);img.style.border='1px solid black';};var my=loc.replace(/_(index|[0-9]+).html/,'_'.concat(n,'.html'));req.open('GET',my,true);req.send(null);};while(i<=l){curl(i++);}})());
bookmarklet to fix apple.com/trailers when you are watching one of their trailers: javascript:document.getElementById('tabs').style.visibility = 'hidden';document.body.style.background='#333333';void 0;. I'm using Mozilla and have the keyword 'trailer' assigned so just need to type 'trailer' in the location bar once I'm at the desired trailer.
simple counter to test cpu speed 1ghz intel:Moz1.7 (js.options.strict =true)~=400ms/IE6~=210ms; 1.73GHz Pentium M: Moz1.7=281ms/IE6=200ms; OSX10.3 PPCG3,350MHz IE5.2=562+ms/Safari1.3.1 1338+ms/Moz1.7=1304+ms