ユーザーエージェントスタイルシートとは

499

Google Chromeのウェブページで作業しています。以下のスタイルで正しく表示されます。

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

これらのスタイルを定義していないことに注意してください。Chromeデベロッパーツールでは、CSSファイル名の代わりにユーザーエージェントスタイルシートと表示されます。

フォームを送信したときに検証エラーが発生した場合、次のスタイルシートが表示されます。

table {
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-variant: normal;
    font-style: normal;
    color: -webkit-text;
    text-align: -webkit-auto;
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

font-sizeこれらの新しいスタイルからは、私のデザインを邪魔されます。スタイルシートを強制し、可能であればChromeのデフォルトのスタイルシートを完全に上書きする方法はありますか？

css  google-chrome 
— カピルシャルマ
ソース
2
— givanse 2014
7
Chrome（51）では、doctype宣言がない場合、これらの2つのテーブルエントリしか取得できないことにも注意してください。それ以外の場合は、2番目のみを取得します。
— John
その他のツールで
— Chrome
2
関連記事はこちら。ユーザーエージェント（またはブラウザー）のスタイルシートがユーザーおよび作成者のスタイルシートとどのように異なるかを理解すると、概念を簡単に概念化するのに役立ちます。
— RBT 2017年

回答:

251

対象のブラウザは何ですか？ブラウザーによって、デフォルトのCSSルールは異なります。それらのデフォルトを削除するには、meyerweb CSSリセットやnormalize.cssなどのCSSリセットを含めてみてください。Googleの「CSSリセットと正規化」の違いを確認してください。

— オリバーミリントン
ソース
19
私は常にすべてのプロジェクトの前にCSSをリセット/正規化します。これにより、ブラウザー間で「ほぼ」レベルのフィールドができます。そのような否定的な「副作用」について聞いたことがありません。Googleをざっと見てみると、それが推奨されていることがわかると思います。
— Oliver Millington 2012
2
スタイルをリセットすると、特にフィールドの境界線やtype = "file"のようなマルチパート要素の周りで、フォームフィールドに奇妙な結果が生じる可能性があります。
— うまく処理する
7
リセット/正規化は役立つかもしれませんが、ユーザーエージェントのスタイルシートが変更される理由についての質問には実際には答えませんか？私はSEOに使用する事前レンダリングされたページでUAスタイルが異なるという同じ問題があります。それが変わる理由について何か考えはありますか？
— Yaron
5
ChromeがデフォルトでWebページに設定するものを確認してください：trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
— Santosh Kumar
10
これは答えではありません...追加<!DOCTYPE>は@Sebasによる正しいものです
— Amit Shah
141

<!DOCTYPE>HTMLコンテンツに欠落している場合、ブラウザがカスタムスタイルシートよりも「ユーザーエージェントスタイルシート」を優先するようになる可能性があります。doctypeを追加すると、これが修正されます。

— ジェスパー・ミギンド
ソース
6
それは素晴らしいヒントです。研究の時間を節約してくれました。ワースは、私の場合、そのdoctype宣言があったが、以前にスクリプトがあったことを指摘しました。DOCTYPEを考慮に入れるには、ページの最初に発生する必要があるようです。
— Sebas 2015年
3
<！DOCTYPE>を追加すると、私が抱えていた非常に奇妙なtr / td垂直配置の問題が解決されました。この回答をありがとう。
— Ralph Tee 2017年
3
これはごまかしですが、<！DOCTYPE html>で問題が解決しました。
— スティーブゼラズニク2018
8
<！DOCTYPE html>を有効にしましたが、まだ正規化する必要がありました。
— antikbd 2018年
1
リンクした仕様からの@ChrisMorgan引用：「従来の理由からDOCTYPEが必要です。省略した場合、ブラウザは一部の仕様と互換性のない異なるレンダリングモードを使用する傾向があります。ドキュメントにDOCTYPEを含めると、ブラウザで確実に関連する仕様に従うためのベストエフォートの試み」。理想的な世界では、DOCTYPEは必要ありません。しかし、答えが「真実ではない」と主張することは、特に賛成票の数を考慮すると、かなり大胆なIMHOです。
— Jesper Mygind
104

「ユーザーエージェントスタイルシート」の概念については、CSS 2.1仕様のセクションCascadeを参照してください。

ユーザーエージェントのスタイルシートは、独自のスタイルシートで設定したもので上書きされます。それらはまさに底辺です。ページまたはユーザーによって提供されたスタイルシートがない場合でも、ブラウザーはコンテンツを何らかの方法でレンダリングする必要があり、ユーザーエージェントのスタイルシートはこれを説明するだけです。

したがって、ユーザーエージェントのスタイルシートに問題があると思われる場合は、実際にはマークアップまたはスタイルシート、あるいはその両方（何も記述していない）に問題があります。

— ユッカ・K・コルペラ
ソース
@givanse、いいえ、ユーザーエージェントスタイルシートの効果は、それらを上書きしない場合に表示されます。サンプルマークアップも例外ではありません。テキストコンテンツのみのli2 つの要素を含む1つの要素として解析されulます。これらはユーザーエージェントのスタイルシートによってスタイル設定されますが、このスタイルはオーバーライドできます。（マークアップが無効かどうかは、コンテキストとHTMLバージョンに依存しますが、これはスタイリングには影響しません。）
— Jukka K. Korpela
@givanse、その問題は「ユーザースタイルシートとは」という質問には関係ありません。問題が重要だと思われる場合は、十分な詳細を含めて、新しい質問として投稿してください。ただし、jsfiddleの箇条書きはli要素の簡単な箇条書きであり、スタイルシートはそれをオーバーライドしません。
— Jukka K. Korpela 14
47

最初の行の適切なdoctypeでドキュメントをHTML5としてマークすると、問題が解決しました。

<!DOCTYPE html>
<html>...
— ダニエル
ソース
8
それがどのように機能するのか正確に説明できますか？HTML 5は未定義のスタイルとどのように関連付けられていますか？確認しますが、確認する準備ができていますか？
— Kapil Sharma、2015
28

ユーザーエージェントスタイルシートは、「一般的なプレゼンテーションの期待」を満たす方法でページを表示するためにブラウザー（Chrome、Firefox、Edgeなど）によって提供される「デフォルトのスタイルシート」です。たとえば、デフォルトのスタイルシートは、フォントサイズ、境界線、要素間の間隔などの基本スタイルを提供します。ブラウザ間の不整合に対処するために、リセットスタイルシートを採用するのが一般的です。

仕様から...

ユーザーエージェントのデフォルトスタイルシートは、ドキュメント言語の一般的なプレゼンテーションの期待を満たす方法でドキュメント言語の要素を提示する必要があります。〜カスケード。

ユーザーエージェント全般の詳細については、ユーザーエージェントをご覧ください。

— ケネス・ストッダード
ソース
15

タイトルの質問に答える、ユーザーエージェントスタイルシートとは何か、ブラウザーのデフォルトスタイルのセット：これらのいくつか（および今日のWebでも最も関連性の高いもの）を次に示します。

個人的な意見：彼らと戦ってはいけません。たとえば、rtl / bidiの場合など、デフォルト値は適切であり、現在は一貫しています。一度にすべてではなく、自分に関係のないものをリセットします。

— エブラヒム・ビャゴウィ
ソース
12

独自のCSSコンテンツで、Chromeのユーザーエージェントスタイルから使用したくない値を定義します。

— BenM
ソース
4

一部のブラウザは、独自の方法で.cssファイルを読み取ります。つまり、これを打つ正しい方法：.htmlソースコードにコマンドラインを直接入力すると、これは.cssファイルを打つことになります。そのようにして、ブラウザに何をすべきかを直接指示し、ブラウザは読まない位置にいます.cssファイルからのコマンド。.htmlファイルに書き込まれたコマンドは、.cssのコマンドよりも強力であることを覚えておいてください。

— rollin_jeksun
ソース
1

私の<div>の1つがブラウザーによってマージンが設定されているのと同じ問題がありました。それは非常に迷惑でしたが、ほとんどの人が言っているように、それはマークアップエラーだとわかりました。

戻って<head>セクションを確認したところ、CSSリンクは次のようになりました。

<link rel="stylesheet" href="ex.css">

私typeはそれに含め、以下のようにしました：

<link rel="stylesheet" type="text/css" href="ex.css">

私の問題は解決しました。

— Appy Sharma
ソース
0

各ブラウザは、HTMLファイルで指定されていない場合に備えて、ユーザーエージェントスタイルシートと呼ばれるデフォルトのスタイルシートを提供します。指定したスタイルはデフォルトを上書きします。

テーブル要素のボックスに値を指定していないため、デフォルトのスタイルが適用されています。

— 最初の投稿者
ソース
0

Ider Aderinokunからここで読んだ内容に基づいて、@ BenMからの応答をさらに拡張したかっただけです。user-agentスタイルシートは便利なデフォルトのスタイルを提供するため、オーバーライドする前によく考えてください。

Chromeでボタン要素が正しく表示されないというおかしなエラーが発生しました。従来のボタンのように見せたくなかったため、部分的にスタイルを設定しました。ただし、border、border-colorなどのスタイル要素は省略しました。そのため、Chromeは欠けていると思われるパーツを提供するために介入していました。

border: noneなどのスタイルを追加すると、問題はなくなりました。

そのため、他の誰かがこの問題を抱えている場合、特にユーザーエージェントスタイルを完全にリセットしたくない場合は、要素に適用可能なすべてのデフォルトのユーザーエージェントスタイルが不安定に見える場合は、明示的にオーバーライドしていることを確認してください。それは私のために働いた。

— ブレントミラー
ソース
これは答えではなくコメントであるべきではありませんか？
— Peter Mortensen
@PeterMortensenはい、しかし私はコメントを残すことができません-十分な評判がありません。
— ブレントミラー
-1

私には解決策があります。これをチェックして：

エラー

<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">

正しい 

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
— ヴィンカルシャンデル
ソース
2
これがどのように機能し、なぜ役立つかを説明するために編集してください。
— ユンノシュ
-6

次のコードをCSSファイルに追加します。

table {
    font-size: inherit;
}
— スリカンス
ソース
2
これにより、この投稿に新しいものが追加されることはありません。すでに承認された回答と他の5つの回答がありますので、遅い回答を投稿しないでください。
— Kaspar Lee
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.