上書きでCSSをデフォルトのブラウザスタイルに戻す

質問

設定済みのCSSを削除、もしくは読み込まない方法ではなく、
上書きによってデフォルトのブラウザスタイルに戻す方法はございますでしょうか。

例えば、リセットで下記を設定しているとします、
input{border:none; background:transparent;}

これを上書きによって、なにも設定していない状態に戻す方法はございますでしょうか。

CSS3でも構いません。ちなみに、
input{border:initial; background:initial;}
を使ってみましたが、うまくいきませんでした。

よろしくお願いいたします。

回答No.2

naokita · ベストアンサー

全部削除したいなら、当然削除すれば良いし、
記述を一時的に残してデフォルトにしたいなら、
/* input{border:none; background:transparent;} */
とコメントアウトしておけばよいでしょう。後で戻す場合に有効。

他と区別化したいなら、他の方を個別に（transparent）設定する。

逆に、１個だけ（下記でいう class="inp" ）をデフォルトっぽく見せたいなら、
デフォルトCSSは、各ブラウザによって違うから上書きで新規設定：
<input type="submit" value="送信" />
<input type="submit" value="送信" class="inp" />

input{ border: none; background: transparent;}
input.inp{ border:1px solid gray; border-radius: 3px;
background: ButtonFace;
background: -moz-linear-gradient(top,
rgba(255,255,255,0) 0%,
rgba(0,0,0,0.25)), #FFF;
background: -webkit-gradient(
linear, left top, left bottom,
from(rgba(255,255,255,0)),
to(rgba(0,0,0,0.25))), #FFF;}

お礼

ご回答ありがとうございます。

input系を再設定でデフォルトっぽく戻すのが面倒くさいので、一気に戻す方法はないかなと思いましたが、やはり無理そうですね。

回答No.3

ORUKA1951

＞しかしCSS3のinitialという値は、「元に戻す」という考え方を取り入れようとしている証拠ではないでしょうか。

　いえ、CSSにはデフォルト値がinitialです。例えば
displayのinitial値は、inlineですから、display:initial;とすれば、inlineに戻る。
nav ol {dispaly:block;}
section nav ol{display:initial;}
で、display:block;に戻るだけです。marginやpaddinもinputの初期値に戻るのではないです。
input{border:initial; background:initial;}
は
input{border:none; background:transparent;}
と同値

＞デザイン面から考えますと、リセットを一切しないのは多分無理ですね。
　ありえないです。多分オーサリングツールの仕様をそのまま流用している？
　通称使用される要素ってせいぜい数十個です。そのうちデフォルトでよいものが大多数だと思います。
　リセットをなくするだけで、スタイルシートは数分の一になっちゃいます。

他の部分で指定してなければ、わざわざimportant!を使わなくても良いです。
単純に
input{border:inherit;border-radius:0.5em;background-color:white;******}
input:active{*************}
と書けば、これらは詳細度[0 0 0 1]です。
　他で設定してあれば
form table input{border:inherit;border-radius:0.5em;background-color:white;******}
とか詳細度を上げればよい。

　inputなどユーザーインターフェースに関わる部分は、アクセシビリティの観点からデフォルトのスタイルシートを弄るべきではありません。

お礼

> nav ol {dispaly:block;}
> section nav ol{display:initial;}
> で、display:block;に戻るだけです。marginやpaddinもinputの初期値に戻るのではないです。

「display:block;に戻るだけ」では「display:inline;に戻るだけ」です。

> 多分オーサリングツールの仕様をそのまま流用している？

そんなものは使いません。ORUKA1951さんがどれだけ素晴らしいデザインのサイトをお作りになっているのか知りませんが、私がデザインが素晴らしいと思ったサイトではほぼすべてリセットもしくはそれに相当することをやっています。大体bodyのマージンを無くすだけでもリセットだと思いますけど。

> 他の部分で指定してなければ、わざわざimportant!を使わなくても良いです。

だから「important!」では「!important」ですけど。
自分の間違いを指摘されても頑に認めないタイプですか？

回答No.1

ORUKA1951

不可能です。
CSSのカスケーディングの項をしっかり理解してください。
CSSを利用する限り必須です。というかカスケーディングスタイルシートの命なのですから。
　⇒値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
それには、
　⇒セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
も必要です。
　ごく簡単に言うと、出所による優先順位
ユーザー指定の最重要宣言＞著者指定の最重要宣言＞著者の宣言＞ユーザーの宣言＞ブラウザのスタイルシート

　その上で、詳細度を比較します。*(全称セレクタ)は詳細度が0です。
^^^^^^^^^^^
　ブラウザのスタイルシートの詳細度は0ですが、どんなに逆立ちしても［出所］の順番は変えられません。

　あらためて、
　⇒HTML 4.0におけるスタイルシートの例( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html )
　を参考にして、important!をつけて再設定するしかないでしょう。

　この様な問題が出るため、リセットしないほうが良いです。
　私は一切していません。必要なとき必要な場所で設定していて、それ以外はユーザーエージェントやユーザーの設定を生かすようにしています。

お礼

ご回答ありがとうございます。

CSS3になってからできるようなってないかなと思いましたが、やはり無理なんですかね。

しかしCSS3のinitialという値は、「元に戻す」という考え方を取り入れようとしている証拠ではないでしょうか。

デザイン面から考えますと、リセットを一切しないのは多分無理ですね。しかしinput系はしなくてもいいかもしれません。今回はすでに他人がリセットしたものに手を加えるケースなので、どうしようもありませんが。

ちなみ!importantだと思いますが？