ブラウザのHTML要素のデフォルトCSS

HTML要素のブラウザのデフォルトCSSはどこにありますか？

多くのHTML要素にはいくつかのデフォルトのCSSプロパティが付属しており、不明な動作や望ましくない動作が発生する場合があります。たとえば、入力ボックスはブラウザによって表示が異なります。新しいCSS3プロパティと新しいHTML5要素をカバーする場所を探しています。

CSSリセットの解決策を提案する他の（はるかに古い）質問（ブラウザーのデフォルトCSSスタイルシートなど）の回答を見てきました。この解決策は望ましくない場合があります。多くの場合、実際には基本的なプロパティの一部（Chromeの入力ボックスの強調表示など）を保持したいと思います。つまり、何をしているのか分からないからといって、取り除きたくないのです。

それで、私にこのすべての情報（またはおそらくほとんど）を与えることができるサイトはありますか？

すべてのW3C HTML仕様とベンダーのデフォルトのCSSスタイルシートのGitHubリポジトリは、こちらにあります

1. Firefoxのデフォルトスタイル

2. Internet Explorerのデフォルトスタイル

3. Chrome / Webkitのデフォルトスタイル

4. Operaのデフォルトスタイル

5. HTML4のデフォルトスタイル（W3C仕様）

6. HTML5のデフォルトスタイル（W3C仕様）

デフォルトのW3C HTML4仕様によるサンプル：

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

ブラウザごとに異なります。

• Firefox（Gecko）： https : //dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css。または、を参照しresource://gre-resources/て確認しhtml.cssます。
• Chrome / Safari（WebKit）： http : //trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
  • Chrome（点滅）： https : //chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
• Internet Explorer（Trident）、古いバージョン：http : //web.archive.org/web/20170122223926/http : //www.iecss.com/

HTML5ボイラープレートスタイルシートもご覧ください。これは、「従来の意味でリセットすることなく、多くのものの表示を正規化する」ものです。また、かなりの数のバグ/不整合を修正します。

これも一見の価値があります：https : //github.com/necolas/normalize.css/blob/master/normalize.css

EdgeのCSSデフォルトのソースについては誰も言及していません。私は見ましたが、信頼できるものは何も見つかりませんでしたが、もっともらしいこのスタイルシートを見つけました：https : //gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b

これは古いクロスブラウザーの問題ですが、各ブラウザーにはメディアや入力要素などのいくつかのhtml要素による独自のレンダリングと動作があるため、2017年には、CSS フィルタープロパティをそれらの上にかなり安全に使用できます。

これにより、色相回転フィルターを備えたカラーパレットに、ブラウザー間でかなりうまくレンダリングできるようになります。

次のスニペットは、入力タイプの色を使用して、JavaScriptでビデオ要素にこのエフェクトをリアルタイムでレンダリングする方法を示しています。

cssのみを使用するには、このフィルターの1つ1つを使用する必要があります。0でないセピア、高彩度、0のグレースケール、高コントラスト、そしてテストに従って色相回転プロパティを持つ色を指定します。反転フィルターは必須ではありませんが、いくつかの深い影響を与えています。

また、ドロップシャドウフィルターは、ブラウザー間で非常にうまく機能しています。このように使用するには：filter：drop-shadow（2px 20px 50px red）[X、Y、RADIUS、COLOR]

function styloElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  
  media.style.cssText += ";filter:sepia(100%) saturate(1000%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"

}
styloElem()

body {
  text-align:center;
  background:#001;
  color: white
}
video {
  width:500px;max-width:500px
}

Colors: 
<input 
       type="color"
       id="stylo"
       oninput="styloElem()"
       class="media"
       data-hue="0" />

<br><br> 

<video 
       controls
       id="media"        
       onplay="this.removeAttribute('controls');this.style.all='unset'"     
       onpause="this.controls='controls';styloElem()"
       src="https://ia600206.us.archive.org/7/items/MysteresDarchives-Saison04/1944%2c%20Dans%20le%20maquis%20du%20Vercors.ogv"></video>

CSSフィルターを使用できますか？

http://caniuse.com/#feat=css-filters

私がcssフィルターの周りに作成したツールバー。

https://github.com/webdev23/ponyFilters

より完全なコードペンの例：

http://codepen.io/Nico_KraZhtest/pen/bWExEB/