web-dev-qa-db-ja.com

CSS表示プロパティをデフォルト値にリセット

Displayプロパティをデフォルト値でオーバーライドすることは可能ですか？たとえば、あるスタイルでnoneに設定し、デフォルトで別のスタイルでオーバーライドしたい場合。

または、その要素のデフォルトが何であるかを見つけて、それに設定する唯一の方法ですか？要素が通常ブロックであるか、インラインであるか、どちらであるかを知る必要はありません...

cssdefault
158
Svish

ブラウザのデフォルトのスタイルは、ユーザーエージェントのスタイルシートで定義されています。ソースは here です。残念ながら、 Cascading and Inheritance level 3 spec は、スタイルプロパティをブラウザのデフォルトにリセットする方法を提案していないようです。ただし、このキーワードを Cascading and Inheritance level 4 で再導入する計画があります—ワーキンググループは、このキーワードの名前にまだ決着していないだけです（リンクには現在revertと書かれていますが、最後の）。 revertのブラウザサポートに関する情報は、 caniuse.com にあります。

レベル3の仕様では initialキーワード が導入されていますが、プロパティをその初期値に設定すると、デフォルト値CSSで定義されているとおり、ブラウザで定義されているとおりではありません。 displayの初期値はinlineです。これは here と指定されています。 initialキーワードは、ブラウザーのデフォルトではなく、その値を参照します。仕様自体は all property でこの注記を作成しています：

たとえば、作成者が要素にall: initialを指定すると、カスケードの作成者、ユーザー、またはユーザーエージェントレベルにルールが表示されないかのように、すべての継承がブロックされ、すべてのプロパティがリセットされます。

これは、外部ページのスタイルを継承したくないページに含まれる「ウィジェット」のルート要素に役立ちます。ただし、その要素に適用される「デフォルト」スタイル（たとえば、display: blockなどのブロック要素のUAスタイルシートの<div>など）も吹き飛ばされることに注意してください。

ですから、現在、純粋なCSSを使用する唯一の方法は、ブラウザーのデフォルト値を検索し、それを手動で設定することです。

div.foo { display: inline-block; }
div.foo.bar { display: block; }

（上記の代替はdiv.foo:not(.bar) { display: inline-block; }になりますが、オーバーライドではなく元のセレクターを変更する必要があります。）

147
BoltClock

javascriptの使用が許可されている場合、displayプロパティを空の文字列に設定できます。これにより、その特定の要素のデフォルトが使用されます。

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

jsbin へのリンクです。

戻るのにさまざまな種類の表示（block、inline、inline-block、table-cellなど）を心配する必要がないため、これは素晴らしいことです。

ただし、javascriptが必要なので、cssのみのソリューションを探している場合、これはあなたのためのソリューションではありません。

注：これはインラインスタイルをオーバーライドしますが、cssで設定されたスタイルはオーバーライドしません

27
thetallweeks

displayの設定を解除します：

FirefoxとChrome の両方で機能する値unsetを使用できます。

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }
9
Sheharyar

いいえ、通常は不可能です。何らかのCSS（またはHTML）コードが要素のプロパティの値を設定すると、それを元に戻し、ブラウザにデフォルト値を使用するよう指示する方法はありません。

もちろん、プロパティに値expectをデフォルト値に設定することもできます。 HTML5 CRの Rendering セクションをチェックすると、これはかなり広く機能します。主にブラウザが実際に行うことを反映しています。

それでも、答えは「いいえ」です。なぜなら、ブラウザは好きなデフォルト値を持っているかもしれないからです。デフォルトにリセットしたい理由を分析する必要があります。 original問題はまだ解決可能です。

6
Jukka K. Korpela

IfにアクセスできるJavaScriptを使用すると、要素を作成し、その計算されたスタイルを読み取ることができます。

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'
4
Frederik Krautwald

BoltClockとJohnの回答に関して、私は個人的にIE11を使用するときに最初のキーワードに問題がありました。 Chromeでは正常に動作しますが、IEでは効果がないようです。

この回答によると、IEは初期キーワードをサポートしていません： Div display：initialはie10およびchrome 29 で意図したとおりに機能しません

ここで提案されているように、代わりに空白に設定しようとしました： ディスプレイの後に正常に戻す方法：テーブル行のなし

これは機能し、私のシナリオには十分でした。もちろん、実際の初期値を設定するには、上記の答えが私が見つけることができる唯一の良いものです。

3
Søren Ullidtz