it-swarm.com.de

Browser-Standard-CSS für HTML-Elemente

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

Viele HTML-Elemente enthalten einige Standard-CSS-Eigenschaften, die manchmal zu einem unbekannten/unerwünschten Verhalten führen können. Beispielsweise werden Eingabefelder in verschiedenen Browsern unterschiedlich angezeigt. Ich suche nach einem Ort, der die neuen CSS3-Eigenschaften und die neuen HTML5-Elemente abdeckt.

Ich habe in anderen (viel älteren) Fragen (wie z. B. Browsers Standard-CSS-Stylesheets ) 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 einige grundlegende Eigenschaften beibehalten (z. B. die Hervorhebung von Eingabefeldern in Chrome). Mit anderen Worten: Ich möchte keine Dinge loswerden, nur weil ich nicht weiß, was sie tun.

Also, Gibt es eine Site, die mir all diese Informationen geben kann (oder vielleicht die meisten)?

121
Nayish

Ein GitHub-Repository mit allen W3C-HTML-Spezifikationen und Standard-CSS-Stylesheets von Herstellern kann gefunden werden here

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

Es ist für jeden Browser anders, also:

Sie können sich auch das HTML5 Boilerplate Stylesheet anschauen, das "die Anzeige einer Vielzahl von Dingen normalisiert, ohne im traditionellen Sinne zurückgesetzt zu werden". Es behebt auch einige Fehler/Inkonsistenzen.

Es lohnt sich auch unter: https://github.com/necolas/normalize.css/blob/master/normalize.css

106
thirtydot

Während dies ein altes Cross-Browser-Problem ist, da jeder Browser sein eigenes Rendering und Verhalten mit einigen HTML-Elementen wie Medien und Eingabeelementen hat, können wir 2017 die css filters -Eigenschaft darüber hinaus ziemlich sicher verwenden.

Dies ermöglicht es, eine Farbpalette mit dem hue-rotate -Filter zu erzeugen, der Browser gut rendern kann.

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

Um nur css zu verwenden, müssen Sie jeden dieser Filter verwenden: Sepia nicht bei 0, hohe Sättigung, Graustufen bei 0, hoher Kontrast und anschließend eine Farbe mit der Farbton-Rotation-Eigenschaft. Der Inverter-Filter ist nicht obligatorisch, wirkt jedoch tiefgreifend.

Der Schattenfilter funktioniert auch sehr gut über den Browser hinweg. Um so zu verwenden: filter: Schattenwurf (2px 20px 50px rot) [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>

Kann ich CSS-Filter verwenden:

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

Eine Symbolleiste, die ich um Css-Filter herum erstellt habe, von wo kommen diese Notizen:

https://github.com/webdev23/ponyFilters

Ein vollständigeres Codepen-Beispiel:

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

0
Cryptopat