浏览器的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（壁虎）： 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 Boilerplate样式表，该样式表 “使很多内容的显示正常化，而无需重新设置传统意义上的内容”。它还修复了许多错误/不一致。

也值得一看：https : //github.com/necolas/normalize.css/blob/master/normalize.css

没有人提到Edge中CSS默认设置的任何来源。我看了一下，找不到任何权威的书，但是我发现这个看起来很合理的样式表：https : //gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b

尽管这是一个古老的跨浏览器问题，但由于每个浏览器都有自己的呈现和行为，并带有一些html元素（如medias和input元素），所以我们现在可以在2017年非常安全地在它们之上使用css 过滤器属性。

这样就可以提供带有色相-旋转滤镜的调色板，从而可以很好地呈现跨浏览器的效果。

以下代码片段展示了一种使用输入类型的颜色在具有javascript的视频元素上实时呈现此效果的方法。

要仅使用css，必须使用以下每个滤镜都是强制性的：棕褐色不为0，高饱和度，灰度为0，高对比度，然后按照我的测试给出具有hue-rotate属性的颜色。反向滤波器不是强制性的，但会产生一些深远的影响。

同样，阴影过滤器在跨浏览器中也能很好地工作。像这样使用：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

一个更完整的Codepen示例：

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