CSS predeterminado de los navegadores para elementos HTML


146

¿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)?


3
No es un sitio, pero en las herramientas de desarrollo de Chrome muestra las reglas CSS heredadas y las marcadas como "hoja de estilo de agente de usuario" mostrarán las reglas de Chrome. Lo siento, no podría ser más ayuda. también: dowebsitesneedtolookexactlythesameineverybrowser.com
James Khoury

2
Gran pregunta! Estoy de acuerdo, debe haber un lugar donde toda esta información esté disponible.

Solo una nota, el reset.css no detiene las cosas básicas. Sus cuadros de entrada seguirán resaltados en Chrome. Simplemente perderá las diferencias de relleno al azar en los navegadores. Por lo tanto, puede comenzar con el mismo comportamiento en todos los navegadores (relleno / margen / ... sabio).
Julio

1
@ James Khoury - También es cierto de Firebug.
Rob

@Rob por supuesto! Me olvidé de Firebug
James Khoury

Respuestas:


93

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

En una nota al margen, es interesante ver cosas como la infame nobretiqueta en la hoja de estilo HTML5 del W3C.
tomasz86

¿Todavía actualizado?
Webwoman

El enlace para Firefox no contiene todos los valores predeterminados. Por ejemplo, no contiene el CSS predeterminado para textarea. Puede encontrar eso en resource: //gre-resources/forms.css. En general, explore los archivos en resource: // gre-resources para encontrar toda la información predeterminada. O para todos los navegadores, consulte html.spec.whatwg.org/multipage/rendering.html .
David Spector

117

Es diferente para cada navegador, así que:

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


2
Lo cual, curiosamente, es en su mayoría las mismas cosas a las que me uní en mi respuesta a la pregunta vinculada anteriormente, que aparentemente está "desactualizada". Aunque solo agregué el enlace de IE a eso hace 2 días.
robertc

1
@nayish ¿Qué más crees que hay aparte de los valores predeterminados del navegador?
robertc

1
@nayish No hay una definición separada del CSS predeterminado para los elementos HTML fuera de lo que los navegadores han implementado en sus hojas de estilo predeterminadas
robertc

1
@nayish Eso se especifica para cada propiedad individual en la especificación , aunque tenga en cuenta que la opacidad no se hereda en el sentido CSS
robertc

2
Solo una nota, HTML5 repetitivo es mucho más que normalizar CSS. Para normalizar CSS, usan la herramienta Normalizar: necolas.github.com/normalize.css
Waiting for Dev ...


0

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/


Parece estar un poco aparte, ¡tienes razón! Este fue mi trabajo duro en esta fecha. Como esto es solo CSS, esto no cambiará el comportamiento del elemento del navegador, pero puede proporcionar una forma de representar este tipo de elementos con un color / brillo idéntico, en cualquier navegador, sin escribir un código especial para cada uno de ellos. Esto no era factible en el momento de la pregunta. Gracias.
NVRM
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.