CSS default browser untuk elemen HTML

Di mana saya dapat menemukan CSS default browser untuk elemen HTML?

Banyak elemen HTML datang dengan beberapa properti CSS default yang terkadang dapat mengakibatkan perilaku yang tidak diketahui / tidak diinginkan. Misalnya kotak Input ditampilkan secara berbeda di berbagai browser. Saya mencari tempat yang mencakup properti CSS3 baru dan elemen HTML5 baru.

Saya telah melihat jawaban lain (jauh lebih tua) (seperti stylesheet CSS default Browser ) jawaban yang menyarankan solusi reset CSS. Solusi ini terkadang tidak diinginkan, seringkali saya sebenarnya ingin menyimpan beberapa properti dasar (seperti penyorotan kotak input di Chrome). Dengan kata lain: Saya tidak ingin menyingkirkan sesuatu hanya karena saya tidak tahu apa yang mereka lakukan .

Jadi, apakah ada situs yang dapat memberi saya semua informasi ini (atau mungkin sebagian besar)?

Repositori GitHub untuk semua W3C HTML spec dan stylesheet default CSS vendor dapat ditemukan di sini

1. Gaya Default untuk Firefox

2. Gaya Default untuk Internet Explorer

3. Gaya Default untuk Chrome / Webkit

4. Gaya Default untuk Opera

5. Gaya Default untuk HTML4 (spesifikasi W3C)

6. Gaya Default untuk HTML5 (spesifikasi W3C)

Sampel, per spesifikasi W3C HTML4 default:

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

Ini berbeda untuk setiap browser, jadi:

• Firefox (Gecko): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css . Atau, telusuri resource://gre-resources/dan lihat 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) , versi yang lebih lama: http://web.archive.org/web/20170122223926/http://www.iecss.com/

Anda juga dapat melihat stylesheet HTML5 Boilerplate , yang "menormalkan tampilan banyak hal tanpa harus diatur ulang dalam arti tradisional". Ini juga memperbaiki beberapa bug / inkonsistensi.

Ada baiknya juga melihat: https://github.com/necolas/normalize.css/blob/master/normalize.css

Tidak ada yang menyebutkan sumber apa pun untuk default CSS di Edge. Saya melihat, dan saya tidak dapat menemukan sesuatu yang berwibawa, tetapi saya menemukan stylesheet ini yang terlihat masuk akal: https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b

Meskipun ini merupakan masalah lintas browser lama, karena setiap browser memiliki rendering dan perilaku sendiri dengan beberapa elemen html seperti media dan elemen input, kita sekarang dapat menggunakan dengan cukup aman filter css mendukung properti di atasnya.

Ini memungkinkan untuk memberikan palet warna dengan hue-rotate filter yang akan membuat browser lintas cukup baik.

Cuplikan berikut ini menunjukkan cara untuk menggunakan warna tipe input untuk membuat efek ini secara realtime pada elemen video dengan javascript.

Untuk hanya menggunakan css, ini wajib untuk menggunakan setiap filter ini: sepia tidak pada 0, saturasi tinggi, skala abu-abu pada 0, kontras tinggi, dan kemudian memberi warna dengan properti hue-rotate, mengikuti pengujian saya. Filter balik tidak wajib, tetapi memberikan beberapa efek mendalam.

Selain itu, filter drop-shadow berfungsi dengan baik lintas browser. Untuk digunakan seperti ini: 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>

Bisakah saya menggunakan filter css:

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

Toolbar yang saya buat di sekitar filter css, dari mana datang catatan ini:

https://github.com/webdev23/ponyFilters

Contoh codepen yang lebih lengkap:

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