浏览器HTML 元素的默认 CSS

Question

在哪里可以找到浏览器的 HTML 元素的默认 CSS？

许多 HTML 元素都带有一些默认 CSS 属性，这些属性有时会导致未知/不需要的行为。例如，输入框在不同的浏览器中显示不同。我正在寻找一个涵盖新 CSS3 属性和新 HTML5 元素的地方。

我在其他（更老的）问题（例如 浏览器的默认 CSS 样式表）中看到了这样的答案建议CSS重置的解决方案。有时不需要这个解决方案，通常我实际上想保留一些基本属性（例如Chrome中输入框的突出显示）。换句话说：我不想仅仅因为我不知道它们是做什么就扔掉它们。

那么，是否有一个网站可以为我提供所有这些信息（或者可能是大部分信息）？

Answer 1

每个浏览器都不同，因此：

• Firefox (Gecko)： https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css。或者，浏览到 resource://gre-resources/ 并查看 html.css。
• Safari (WebKit)： https ://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/html.css
• Chrome（闪烁）： https://github.com/chromium /chromium/blob/main/third_party/blink/renderer/core/html/resources/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

Answer 2

所有 W3C HTML 规范和供应商默认 CSS 样式表的 GitHub 存储库可以在恢复浏览器/规范默认值中找到CSS 样式

1. 默认样式壁虎/火狐
   --
2. Internet Explorer 的默认样式
   --
3. Webkit / Safari 的默认样式
   --
4. 默认样式适用于 Blink / Chrome
   --
5. Opera 的默认样式
   --
6. HTML4 的默认样式（W3C 规范）
   --
7. 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 }
}

Answer 3

没有人提到 Edge 中 CSS 默认值的任何来源。我看了看，找不到任何权威的东西，但我发现这个样式表看起来似乎合理： https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b

Answer 4

虽然这是一个古老的跨浏览器问题，因为每个浏览器都有自己的渲染和某些 HTML 元素（如媒体和输入元素）的行为，我们现在可以在 2017 年相当安全地使用 CSS filters 属性他们。

这允许提供带有 hue-rotate 过滤器的调色板，可以很好地跨浏览器渲染。

以下代码片段展示了一种使用输入类型颜色通过 JavaScript 在视频元素上实时渲染此效果的方法。

要仅使用 CSS，必须使用每个过滤器：棕褐色不为 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

更完整的 codepen 示例：

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