CSS predeterminado de los navegadores para elementos HTML

¿Dónde puedo encontrar el CSS predeterminado de un navegador para elementos HTML?

Muchos elementos HTML vienen con algunas propiedades CSS predeterminadas que a veces pueden dar lugar a un comportamiento desconocido / no deseado. Por ejemplo, los cuadros de entrada se muestran de manera diferente en diferentes navegadores. Estoy buscando un lugar que cubra las nuevas propiedades CSS3 y los nuevos elementos HTML5.

He visto en otras preguntas (mucho más antiguas) (como las hojas de estilo CSS predeterminadas de los navegadores ) respuestas que sugieren una solución para restablecer CSS. Esta solución a veces no es deseable, a menudo me gustaría conservar algunas de las propiedades básicas (como el resaltado de cuadros de entrada en Chrome). En otras palabras: no quiero deshacerme de las cosas solo porque no sé lo que hacen .

Entonces, ¿hay un sitio que pueda darme toda esta información (o tal vez la mayoría)?

Aquí puede encontrar un repositorio de GitHub de todas las especificaciones HTML W3C y las hojas de estilo CSS predeterminadas del proveedor

1. Estilos predeterminados para Firefox

2. Estilos predeterminados para Internet Explorer

3. Estilos predeterminados para Chrome / Webkit

4. Estilos predeterminados para Opera

5. Estilos predeterminados para HTML4 (especificación W3C)

6. Estilos predeterminados para HTML5 (especificación W3C)

Muestra, según la especificación W4C HTML4 predeterminada:

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 diferente para cada navegador, así que:

• Firefox (Gecko): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css . O navegue resource://gre-resources/y mire html.css.
• Chrome / Safari (WebKit): http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
  • Chrome (parpadeo): https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
• Internet Explorer (Trident) , versiones anteriores: http://web.archive.org/web/20170122223926/http://www.iecss.com/

También puede ver la hoja de estilo HTML5 Boilerplate , que "normaliza la visualización de muchas cosas sin ser un reinicio en el sentido tradicional". También corrige bastantes errores / inconsistencias.

También vale la pena mirar: https://github.com/necolas/normalize.css/blob/master/normalize.css

Nadie ha mencionado ninguna fuente para los valores predeterminados de CSS en Edge. Miré y no pude encontrar nada autoritario, pero encontré esta hoja de estilo que parece plausible: https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b

Si bien este es un viejo problema de navegador cruzado, ya que cada navegador tiene su propia representación y comportamiento con algunos elementos html como medios y elementos de entrada, ahora en 2017 podemos usar con bastante seguridad la propiedad de los filtros CSS encima de ellos.

Esto permite dar una paleta de colores con el filtro de rotación de tono que hará que los navegadores crucen bastante bien.

Los siguientes fragmentos muestran una forma de usar un color de tipo de entrada para representar este efecto en tiempo real en un elemento de video con javascript.

Para usar solo css, es obligatorio usar cada uno de estos filtros: sepia no en 0, alta saturación, escala de grises en 0, alto contraste, y luego dar un color con la propiedad de rotación de tono, siguiendo mis pruebas. El filtro invertido no es obligatorio, pero está dando algunos efectos profundos.

Además, el filtro de sombra paralela funciona bastante bien en todos los navegadores. Para usar así: filtro: sombra paralela (2px 20px 50px rojo) [X, Y, RADIO, 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>

¿Puedo usar filtros CSS:

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

Una barra de herramientas que hice alrededor de los filtros CSS, de donde vienen estas notas:

https://github.com/webdev23/ponyFilters

Un ejemplo más completo de codepen:

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