Standard-CSS von Browsern für HTML-Elemente

Wo finde ich das Standard-CSS eines Browsers für HTML-Elemente?

Viele HTML-Elemente verfügen über einige Standard-CSS-Eigenschaften, die manchmal zu unbekanntem / unerwünschtem Verhalten führen können. Beispielsweise werden Eingabefelder in verschiedenen Browsern unterschiedlich angezeigt. Ich suche einen Ort, der die neuen CSS3-Eigenschaften und die neuen HTML5-Elemente abdeckt.

Ich habe in anderen (viel älteren) Fragen (wie den Standard-CSS-Stylesheets von Browsern ) Antworten gesehen, die eine Lösung für das Zurücksetzen von CSS vorschlagen. Diese Lösung ist manchmal nicht erwünscht, oft möchte ich tatsächlich einige der grundlegenden Eigenschaften beibehalten (z. B. das Hervorheben von Eingabefeldern in Chrome). Mit anderen Worten: Ich möchte Dinge nicht loswerden, nur weil ich nicht weiß, was sie tun .

So, Gibt es eine Website , die mir alle diese Informationen geben können (oder vielleicht die meisten)?

Ein GitHub-Repository aller W3C-HTML-Spezifikationen und Hersteller-Standard-CSS-Stylesheets finden Sie hier

1. Standardstile für Firefox

2. Standardstile für Internet Explorer

3. Standardstile für Chrome / Webkit

4. Standardstile für Opera

5. Standardstile für HTML4 (W3C-Spezifikation)

6. Standardstile für HTML5 (W3C-Spezifikation)

Beispiel gemäß der Standard-W3C-HTML4-Spezifikation:

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 }
}

Es ist für jeden Browser anders, also:

• Firefox (Gecko): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css . Oder resource://gre-resources/suchen Sie nach html.css.
• Chrome / Safari (WebKit): http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
  • Chrome (Blink): https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
• Internet Explorer (Trident) , ältere Versionen: http://web.archive.org/web/20170122223926/http://www.iecss.com/

Sie können sich auch das HTML5 Boilerplate-Stylesheet ansehen , das "die Anzeige vieler Dinge normalisiert, ohne im herkömmlichen Sinne zurückgesetzt zu werden". Es behebt auch einige Fehler / Inkonsistenzen.

Es lohnt sich auch einen Blick darauf zu werfen : https://github.com/necolas/normalize.css/blob/master/normalize.css

Niemand hat eine Quelle für die CSS-Standardeinstellungen in Edge erwähnt. Ich habe nachgesehen und konnte nichts Autorisierendes finden, aber ich fand dieses Stylesheet plausibel: https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b

Während dies ein altes browserübergreifendes Problem ist, da jeder Browser sein eigenes Rendering und Verhalten mit einigen HTML-Elementen wie Medien und Eingabeelementen hat , können wir 2017 die darüber liegenden CSS- Filter ziemlich sicher verwenden .

Dies ermöglicht es, eine Farbpalette mit dem Farbton-Dreh- Filter zu erstellen, die Browser-übergreifend gut wiedergibt.

Die folgenden Ausschnitte zeigen eine Möglichkeit, eine Farbe vom Typ Eingabe zu verwenden , um diesen Effekt in Echtzeit auf einem Videoelement mit Javascript zu rendern.

Um nur CSS zu verwenden, ist es obligatorisch, jeden dieser Filter zu verwenden: Sepia nicht bei 0, hohe Sättigung, Graustufen bei 0, hoher Kontrast, und dann nach meinen Tests eine Farbe mit der Eigenschaft "Farbton drehen" zu geben. Der Invertierungsfilter ist nicht obligatorisch, bietet jedoch einige tiefe Effekte.

Auch der Schlagschattenfilter funktioniert im Browser ziemlich gut. So zu verwenden: Filter: Schlagschatten (2 x 20 x 50 Pixel rot) [X, Y, RADIUS, FARBE]

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>

Kann ich CSS-Filter verwenden:

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

Eine Symbolleiste, die ich um CSS-Filter erstellt habe. Woher kommen diese Hinweise:

https://github.com/webdev23/ponyFilters

Ein vollständigeres Codepen-Beispiel:

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