ユーザースタイルシートでサイトCSSを上書きする !important属性を思い出した

ユーザースタイルシートを使って広告を消す方法。
ちょっとまえのユーザースタイルシートによるアドブロックの続き

すっかり忘れてたimportant属性

広告消しには、以下のどれかの手段で殆どの場合はうまく行く。

1. display
2. absolute+position -100px,
3. visibility
4. width/height
5. innerHTML(user.js)

これだけ有ればユーザーCSSとサイトCSSで属性を被らないモノが見つかる。だけど気になって。
あらためて、CSSの読込＋適用順について調べてみました。importantで上書き拒否できることを思い出した。

作成者モードとユーザーCSSの優先度について

ブラウザは、通常Author Mode で動作する。つまりサイト作成者のデザインで動作する。
この場合、CSSは次の順番で読み込まれる

1. ブラウザ・デフォルトスタイル
2. ユーザースタイルシート
3. 作成者のスタイルシート
4. インラインスタイルシート

１から順に読み込まれ、２，３，４の順で上書きしていく。
つまり、ユーザースタイルシートで定義しても、３、４で上書きされるのですね。

サイトのCSSに上書きされないようには、どうするか

サイトCSSの上書きを防ぐ方法があります。!importantを使う方法です。

ユーザーCSSを優先させるのに!importantが使えます。

!importantの使い方。

ユーザースタイルシート

div#ad{ display:none !important;}

サイトCSS

div#ad{ }

制作者が全部に!importantつけたらどうなるか知らないがね。気が向いたら調べてみたい。

実際にやってみる。

Vectorのサイトがヒドイのでちょっと見た目だけスッキリさせる。

ダウンロードボタンが微妙に下で押しにくい。
http://www.vector.co.jp/soft/dl/win95/util/se317859.html
押しにくいので何とかしようと思って見てみたら・・・あぁぁもう。これはひどい。

#v_inwrap { 
padding-top: 275px;/*パディングで上を開けて*/
position: relative;
}
#v_grade { 
left: 16px;
position: absolute; /*開いたパディングにこのdivを入れてる。*/
top: -15px;
width: 556px;
}

つっこみ所満載。

つっこみ所満載なCSS、パディングで要素の上を開けてるし、
開いた要素にAbsoluteで要素突っ込んでるし、
元要素はRelativeだし。

CSSを作る。

/**Vectorの気持ち悪いCSSファイル・・・*/
@charset "UTF-8";
#v_inwrap { 
	padding-top: 0px !important ;
}

#v_grade{
position: relative !important ;
}

Vectorの仕事が。。。

自分のところだけうまく行ったらいいという仕事スタイルの典型ですね。
もしくは、HTML構造をやりたくても部署が違いすぎてコミュニケーションとるより自己最適化した方が楽という制度弊害。

どちらにしても、Vectorに取って良くない未来が見える。。。。

ユーザースタイルシート

ユーザースタイルシートは視覚障害者などが、CSSをつかって見やすいコントラストを使うように考えられたものと習いました。実際は広告消し以外の用途にはつかえないですねｗ

参考

ユーザースタイルシート - Opera Wiki
スタイルシート［CSS］/CSSの基本/スタイルの優先順位 - TAG index Webサイト