Tarayıcıların HTML öğeleri için varsayılan CSS'si

HTML öğeleri için tarayıcının varsayılan CSS'sini nerede bulabilirim?

Çoğu HTML öğesi, bazen bilinmeyen / istenmeyen davranışlarla sonuçlanabilen bazı varsayılan CSS özellikleriyle birlikte gelir. Örneğin Giriş kutuları, farklı tarayıcılarda farklı şekilde görüntülenir. Yeni CSS3 özelliklerini ve yeni HTML5 öğelerini kapsayan bir yer arıyorum.

CSS sıfırlama çözümünü öneren diğer (çok daha eski) sorularda ( Tarayıcıların varsayılan CSS stil sayfaları gibi ) yanıtları gördüm . Bu çözüm bazen istenmez, çoğu zaman aslında bazı temel özellikleri (Chrome'da giriş kutularının vurgulanması gibi) korumak isterim. Başka bir deyişle: Ne yaptıklarını bilmediğim için şeylerden kurtulmak istemiyorum .

Peki, bana tüm bu bilgileri (veya belki de çoğunu) verebilecek bir site var mı?

Tüm W3C HTML spesifikasyonlarının ve satıcı varsayılan CSS stil sayfalarının bir GitHub deposu burada bulunabilir

1. Firefox için Varsayılan Stiller

2. Internet Explorer için Varsayılan Stiller

3. Chrome / Webkit için Varsayılan Stiller

4. Opera için Varsayılan Stiller

5. HTML4 için Varsayılan Stiller (W3C özelliği)

6. HTML5 için Varsayılan Stiller (W3C özelliği)

Varsayılan W3C HTML4 spesifikasyonuna göre örnek:

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

Her tarayıcı için farklıdır, dolayısıyla:

• Firefox (Gecko): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css . Veya göz atın resource://gre-resources/ve bakın html.css.
• Chrome / Safari (WebKit): http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
  • Chrome (Yanıp Sönme): https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
• Internet Explorer (Trident) , eski sürümler: http://web.archive.org/web/20170122223926/http://www.iecss.com/

Ayrıca , "geleneksel anlamda sıfırlama yapmadan pek çok şeyin görüntüsünü normalleştiren" HTML5 Boilerplate stil sayfasına da bakabilirsiniz . Ayrıca epeyce hatayı / tutarsızlığı da giderir.

Ayrıca bakmaya değer: https://github.com/necolas/normalize.css/blob/master/normalize.css

Edge'deki CSS varsayılanları için hiç kimse herhangi bir kaynaktan bahsetmedi. Baktım ve yetkili bir şey bulamadım, ancak bu stil sayfasını mantıklı buldum: https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b

Bu eski bir tarayıcılar arası sorun olsa da, her tarayıcının kendi oluşturma ve davranışı medyalar ve giriş öğeleri gibi bazı html öğeleriyle olduğundan, şimdi 2017'de bunların üzerinde css filtrelerini oldukça güvenli bir şekilde kullanabiliriz .

Bu, çapraz tarayıcıları oldukça iyi işleyecek ton döndürme filtreli bir renk paleti vermeyi sağlar .

Aşağıdaki parçacıklar, bu efekti javascript ile bir video öğesinde gerçek zamanlı olarak oluşturmak için bir girdi türü rengi kullanmanın bir yolunu gösterir .

Yalnızca css kullanmak için, bu filtrelerin her birini kullanmak zorunludur: 0'da sepya, 0'da yüksek doygunluk, 0'da gri tonlama, yüksek kontrast ve ardından testlerimi takiben hue-rotate özelliği ile bir renk verin. Ters çevirme filtresi zorunlu değildir, ancak bazı derin etkiler sağlar.

Ayrıca, alt gölge filtresi tarayıcılar arasında oldukça iyi çalışıyor. Bunun gibi kullanmak için: filtre: alt gölge (2px 20px 50px kırmızı) [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 filtreleri kullanabilir miyim:

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

CSS filtreleri etrafında yaptığım bir araç çubuğu, bu notların nereden geliyor:

https://github.com/webdev23/ponyFilters

Daha eksiksiz bir codepen örneği:

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