「サイト作成の時に、ブラウザ間の見た目の違いを少なくするCSSを適用する」を「CSSをリセットする」って言ったりする。とりあえず「*{margin:0px;padding:0px}」ってやったりするあれのこと。
GreasemonkeyでDOMを操作してElementを追加する時はこの方法じゃうまくいかない。もとのsiteで使われているCSSが邪魔をして、追加したdivやspanの表示が意図した通りにならなかったりする。この場合、CSSを全部上書きして既定値にしなくちゃならない。ただ、完全に既定値にするためにはElement別にやらなくてはならないので非常に面倒であったりする。なのでとりあえずspan要素を基準にして全てのCSSを上書きすることを考える。その時、一部の既定値の指定が不明瞭なものは一番無難と思われる物を適応する。
で、こんなCSSが必要になったんだけど、若干簡素化したと言ってもやっぱり書くのが面倒すぎる。過去に一度書いた記憶があったのでハードディスクの中を探してみたら見つける事ができた。Spotlight++。参考にしたのはオライリージャパンの「CSS完全ガイド」という本。これの巻末の付録を参考にしている。リンクは後述する。
用途としてはこのCSSを追加するspanに適応した後、Greasemonkeyで必要な部分を書き変えるとか、そんな感じ。
GreasemonkeyでDOMを操作してElementを追加する時はこの方法じゃうまくいかない。もとのsiteで使われているCSSが邪魔をして、追加したdivやspanの表示が意図した通りにならなかったりする。この場合、CSSを全部上書きして既定値にしなくちゃならない。ただ、完全に既定値にするためにはElement別にやらなくてはならないので非常に面倒であったりする。なのでとりあえずspan要素を基準にして全てのCSSを上書きすることを考える。その時、一部の既定値の指定が不明瞭なものは一番無難と思われる物を適応する。
で、こんなCSSが必要になったんだけど、若干簡素化したと言ってもやっぱり書くのが面倒すぎる。過去に一度書いた記憶があったのでハードディスクの中を探してみたら見つける事ができた。Spotlight++。参考にしたのはオライリージャパンの「CSS完全ガイド」という本。これの巻末の付録を参考にしている。リンクは後述する。
用途としてはこのCSSを追加するspanに適応した後、Greasemonkeyで必要な部分を書き変えるとか、そんな感じ。
var OVERWRITE_CSS="(略)";
var tips=document.createElement("span");
tips.cssText=OVERWRITE_CSS;
tips.style.color="#000000";
tips.style.backgroundColor="#ffffff";
tips.style.border="#ffcccc solid none";
tips.textContent="hogehoge";
var tips=document.createElement("span");
tips.cssText=OVERWRITE_CSS;
tips.style.color="#000000";
tips.style.backgroundColor="#ffffff";
tips.style.border="#ffcccc solid none";
tips.textContent="hogehoge";
で、以下探し出してきたCSS。適当に使ってください。
/*any*/
background:transparent none repeat scroll 0% 0% !important;
border:medium none transparent !important;
display:inline !important;
visibility:visible !important;
margin:0 !important;
padding:0 !important;
float:none !important;
direction:ltr !important;
font:normal normal normal medium/normal sans-serif !important;
color:#000000 !important;
text-decoration:none !important;
text-transform:none !important;
quotes:none !important;
content:normal !important;
white-space:normal !important;
word-spacing:normal !important;
letter-spacing:normal !important;
outline:invert none medium !important;
unicode-bidi:normal !important;
cursor:auto !important;
counter-increment:none !important;
counter-reset:none !important;
position:static !important;
/*position*/
top:auto !important;
right:auto !important;
bottom:auto !important;
left:auto !important;
z-index:auto !important;
/*block*/
height:auto !important;
width:auto !important;
max-height:none !important;
max-width:none !important;
min-height:0 !important;
min-width:0 !important;
text-align:center !important;
text-indent:0 !important;
overflow:visible !important;
clear:none !important;
clip:auto !important;
/*inline*/
vertical-align:baseline !important;
/*table*/
border-collapse:separate !important;
border-spacing:0 !important;
caption-side:top !important;
empty-cells:show !important;
table-layout:auto !important;
/*list*/
list-style:disc none outside !important;
/*page*/
orphans:2 !important;
page-break-after:auto !important;
page-break-before:auto !important;
page-break-inside:auto !important;
widows:2 !important;
background:transparent none repeat scroll 0% 0% !important;
border:medium none transparent !important;
display:inline !important;
visibility:visible !important;
margin:0 !important;
padding:0 !important;
float:none !important;
direction:ltr !important;
font:normal normal normal medium/normal sans-serif !important;
color:#000000 !important;
text-decoration:none !important;
text-transform:none !important;
quotes:none !important;
content:normal !important;
white-space:normal !important;
word-spacing:normal !important;
letter-spacing:normal !important;
outline:invert none medium !important;
unicode-bidi:normal !important;
cursor:auto !important;
counter-increment:none !important;
counter-reset:none !important;
position:static !important;
/*position*/
top:auto !important;
right:auto !important;
bottom:auto !important;
left:auto !important;
z-index:auto !important;
/*block*/
height:auto !important;
width:auto !important;
max-height:none !important;
max-width:none !important;
min-height:0 !important;
min-width:0 !important;
text-align:center !important;
text-indent:0 !important;
overflow:visible !important;
clear:none !important;
clip:auto !important;
/*inline*/
vertical-align:baseline !important;
/*table*/
border-collapse:separate !important;
border-spacing:0 !important;
caption-side:top !important;
empty-cells:show !important;
table-layout:auto !important;
/*list*/
list-style:disc none outside !important;
/*page*/
orphans:2 !important;
page-break-after:auto !important;
page-break-before:auto !important;
page-break-inside:auto !important;
widows:2 !important;
「GreasemonkeyをWidget化するGreasemonkey」を作った時にこれを使えばよかったんだよね。すっかり存在を忘れてた。