web-dev-qa-db-ja.com

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

私はGoogle ChromeでWebページに取り組んでいます。以下のスタイルで正しく表示されます。

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のデフォルトスタイルシートを完全に上書きしますか？

cssgoogle-chrome
423
Kapil Sharma

対象ブラウザは何ですか？ブラウザが異なれば、デフォルトのCSSルールも異なります。これらのデフォルトを削除するには、 reset.css または normalise.css （違いを確認するにはGoogleまたは「resetとnormalize」のどちらかに）を含めてみてください。または自分で style.cssを設定する

218
Oliver Millington

HTMLに<!DOCTYPE>がない場合は、ブラウザがカスタムスタイルシートよりも「ユーザーエージェントスタイルシート」を優先することがあります。 Doctypeを追加することでこれが修正されます。

102
Jesper Mygind

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

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

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

94
Jukka K. Korpela

最初の行で適切な文書型によって文書をHTML 5としてマークすることで私の問題は解決しました。

<!DOCTYPE html>
<html>...
40
Daniel

ユーザエージェントのスタイルシートは、「一般的な表示の期待」を満たすようにページを表示するためにブラウザ（Chrome、Firefox、Edgeなど）によって提供される「デフォルトのスタイルシート」です。スタイルシートは、フォントサイズ、ボーダー、要素間の間隔などの基本スタイルを提供します。ブラウザ間の矛盾に対処するには、 reset スタイルシートを使用するのが一般的です。

スペックから...

ユーザーエージェントのデフォルトスタイルシートは、文書言語の一般的な表現の期待を満たす方法で文書言語の要素を提示するべきです。 〜 カスケード 。

一般的なユーザーエージェントの詳細については...

https://www.w3.org/TR/UAAG20/#def-user-agent

20
Kenneth Stoddard

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

11
BenM

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

3
rollin_jeksun

タイトルに質問に答える、何が便利なスタイルシート、ブラウザのCSSスタイルのデフォルトのセット、これはブラウザによって定義されたものです、

Mozilla： https://dxr.mozilla.org/mozilla-central/source/browser/base/content/browser.css

Chromium/Chromium： https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/html/resources/html.css?q=html.css&sq=package:chromium&dr

Webキット： https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

1
Ebrahim Byagowi

私は私の1人がブラウザによって設定されたマージンを持っていたのと同じ問題を抱えていました。

私は戻って自分のセクションをチェックしましたが、私のCSSリンクは以下のようでした。

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

私はそれにタイプを含めて、それを以下のようにしました：

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

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

それがuのいくつかに役立つことを願っています。

1
Appy Sharma

HTMLファイルで指定されていない場合に備えて、各ブラウザには、ユーザーエージェントスタイルシートと呼ばれるデフォルトスタイルシートが用意されています。指定したスタイルはデフォルトを上書きします。テーブル要素のボックスに値を指定していないため、デフォルトのスタイルが適用されています。

0
firstpostcommenter