WebページにCSSを書きなぐって適用するブックマークレット

読みにくいWebページがあったときに。

javascript:(function(d){var i='UCSS',b=d.body,c=d.createElement('div'),t=d.createElement('textarea'),a=d.createElement('button'),x=d.createElement('button'),s=d.getElementById(i);if(!s){s=d.createElement('style');b.appendChild(s);}a.innerHTML='Apply';x.innerHTML='x';with(c.style){position='fixed';right=top=0;background='#444';}t.style.display=a.style.display=x.style.display='block';a.onclick=function(){while(s.childNodes.length)s.removeChild(s.firstChild);s.appendChild(d.createTextNode(t.value));};x.onclick=function(){b.removeChild(c);};c.appendChild(t);c.appendChild(a);c.appendChild(x);b.appendChild(c);a.style.float='right';})(document)

たとえば

• 行間が狭い！
  → body{line-height:1.75}
• 字が小さい！
  → body{font-size:141%}
• 黒地は見にくい！
  → body{background:#fefefe;color:#222}
• 1行の文字数が多すぎて読みにくい！ (eg. http://www.moj.go.jp/hisho/kouhou/hisho08_00052.html)
  →div{max-width:40em}

などなど。

使用前

使用後

もとの。

javascript:(function(d){
	var 
		i='UCSS',
		b=d.body,
		c=d.createElement('div'),
		t=d.createElement('textarea'),
		a=d.createElement('button'),
		x=d.createElement('button'),
		s=d.getElementById(i);
	if(!s){
		s=d.createElement('style');
		b.appendChild(s);
	}
	
	a.innerHTML='Apply';
	x.innerHTML='x';
	
	with(c.style){
		position='fixed';
		right=top=0;
		background='#444';
	}
	t.style.display=
	a.style.display=
	x.style.display=
		'block';
	
	a.onclick=function(){
		while(s.childNodes.length)s.removeChild(s.firstChild);
		s.appendChild(d.createTextNode(t.value));
	};
	x.onclick=function(){
		b.removeChild(c);
	};
	c.appendChild(t);
	c.appendChild(a);
	c.appendChild(x);
	b.appendChild(c);
	a.style.float='right';
})(document)