Restablecimiento de estilos CSS, ejemplos de soluciones de trabajo. ¿Debo usar CSS Reset?Restablecer archivo css

Muchos diseñadores de diseño utilizan el llamado Restablecer CSS, que sirve para eliminar las peculiaridades de los diferentes navegadores. De hecho, este archivo de estilo restablece todas las propiedades CSS a sus valores predeterminados. En este artículo demostraré el código de este archivo y le diré cómo ¿Debo usar CSS Reset o no?.

He visto muchos diferentes Restablecer CSS, son todos más o menos iguales. Puedes usar este:

HTML, cuerpo, div, span, subprograma, objeto, iframe,
h1, h2, h3, h4, h5, h6, p, cita en bloque, pre,
a, abbr, acrónimo, aislados, citar, código postal,
del, dfn, em, fuente, img, ins, kbd, q, s, samp,
pequeño, huelga, fuerte, sub, sup, tt, var,
b, u, yo, centro,
dl, dt, dd, ol, ul, li,
conjunto de campos, formulario, etiqueta, leyenda,
tabla, título, tbody, tfoot, thead, tr, th, td (
fondo: transparente;
borde: 0;
tamaño de fuente: 100%;
margen: 0;
contorno: 0;
relleno: 0;
alineación vertical: línea de base;
}
cuerpo (
altura de línea: 1;
}
ol, ul (
estilo de lista: ninguno;
}
cita en bloque, q (
comillas: ninguna;
}
cita en bloque: antes, cita en bloque: después,
q:antes, q:después (
contenido: "";
contenido: ninguno;
}
:enfocar (
contorno: 0;
}
mesa (
colapso fronterizo: colapso;
espaciado de bordes: 0;
}

Creo que las razones de su uso ya están claras, pero vale la pena hablar de por qué, por ejemplo, no lo uso, como muchos otros maquetadores. En primer lugar, esto archivo extra, En segundo lugar, tiempo extra para procesar, pero lo más importante es que me gustan las propiedades predeterminadas. Por ejemplo, los mismos campos en la tabla. Después de todo, todas las propiedades predeterminadas no se crearon por una razón, sino como la opción más óptima para mostrar varios elementos. Te lo aseguro, habiendo reseteado relleno para las celdas de la tabla, lo más probable es que las devuelva en el archivo principal. Y está lejos de ser un hecho que el valor será diferente del que tenía por defecto. Entonces resulta que primero lo retiramos y luego lo devolvemos. Y junto con los primeros inconvenientes (un archivo extra y un código extra), muchos maquetadores no utilizan Restablecer CSS.

De todos modos, usar el restablecimiento de estilo no es algo malo, por lo que puedes usarlo con seguridad si crees que simplificar la adaptación del sitio a diferentes navegadores realmente simplificará tu diseño en su conjunto.

Del autor: La creación de sitios web en Internet puede ser como construir sobre arenas movedizas. Los navegadores hacen lo mismo, pero de vez en cuando introducen diferencias molestamente impredecibles. Por ejemplo, todos los navegadores tienen "hojas de estilo de agente de usuario": un conjunto predeterminado de estilos CSS para que el encabezado parezca un encabezado, etc., incluso antes de asignar estilos a la página1. Por supuesto, cada motor de navegador utiliza conjuntos predeterminados ligeramente diferentes.

Un ejemplo fueron los estilos de lista predeterminados, donde las hojas de estilo predeterminadas de los navegadores Internet Explorer y Opera inicialmente tenían un margen de relleno de lista izquierdo: 30 pt;, mientras que Firefox y KHTML venían con un margen de relleno izquierdo: 40 px;. Si quisiera cambiar el relleno predeterminado definiendo ul (padding-left: 0;), esto produciría resultados muy diferentes en los navegadores.

RESTABLECER LA CONFIGURACIÓN DE CSS

Para lograr un poco de estabilidad, algunos desarrolladores restablecen todos los márgenes y el relleno usando un selector universal:

* (margen: 0; relleno: 0;)

Al definir la sangría de la lista y comenzar su hoja de estilo allí, obtendrá lo que espera. Sin embargo, usar * significaba que el margen y el relleno predeterminados fallaban para todos los elementos, y tan pronto como agregabas un elemento de formulario, las cosas se ponían realmente mal.

El propósito de un reinicio es restablecer todo lo que puedas... [y] servir como punto de partida para tus propios estilos básicos.-Eric Meyer

html, cuerpo, div, span, subprograma, objeto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo, dirección, grande, citar, código, del, dfn, em, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, centrar, dl, dt, dd, ol, ul, li, fieldset, formar, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, artículo, a un lado, lienzo, detalles, incrustar, figura, figcaption, pie de página, encabezado, hgroup, menú, navegación, salida, ruby, sección, resumen, tiempo, marca, audio, video (margen: 0; relleno: 0; borde: 0; tamaño de fuente: 100%; fuente: heredar; alineación vertical: línea de base;)

Restablece algunas propiedades de muchos (pero no todos) elementos al equivalente en texto plano. Dado que solo se restablecen los elementos coincidentes, esto evita algunos problemas * (margen: 0; relleno: 0;). Luego podemos definir estilos para estas propiedades "sin estilo" descartadas, confiando en que estamos construyendo sobre una base estable para todos los navegadores. Esta asignación de estilo también actúa como una señal de la necesidad de establecer conscientemente estilos apropiados para estos elementos.

PROBLEMAS AL RESTABLECER LA CONFIGURACIÓN DE CSS

Los restablecimientos de CSS fueron un salvavidas, pero ahora, especialmente con el aumento de los wireframes, a menudo se usan tal cual. Por ejemplo, Eric asumió que otros desarrolladores comenzarían a construir sitios alrededor de sus estilos de reinicio propuestos, anulándolos en consecuencia, y la primera versión de Meyer Reset incluyó temporalmente esta regla:

/* ¡recuerda definir estilos de enfoque! */ :enfoque ( esquema: 0; )

Desafortunadamente, no todos definieron los estilos de enfoque y Eric los eliminó de la segunda versión.

Usar reinicios te hace sentir un poco pervertido. Restablecer los estilos predeterminados del navegador lo obliga a pensar en cómo se debe mostrar cada elemento, lo que ayuda a garantizar que los elementos se apliquen en función de la semántica en lugar de los estilos predeterminados. Pero para elementos como i y em casi siempre existe un estilo de navegador predeterminado. Otros estilos predeterminados del navegador, como el tamaño del texto del encabezado que alguna vez fue ridículamente grande, han cambiado y ahora son bastante tolerables de forma predeterminada. Los problemas comienzan cuando alguien quiere pasar posteriormente un elemento HTML restablecido con solo los estilos de restablecimiento "sin estilo" asignados.

Para mí, el mayor problema con los restablecimientos es la herencia, lo que genera spam en las herramientas del navegador. Al intentar localizar un problema de CSS de un elemento profundamente anidado en el código de otra persona, esto no ayudará:

Reglas de restablecimiento de CSS repetidas debido a herencia

NORMALIZAR.CSS

Nicholas Gallagher y Jonathan Neal adoptaron un enfoque diferente con Normalize.css, "un pequeño archivo CSS que garantiza una mejor coherencia entre navegadores en el estilo predeterminado de los elementos HTML". Al igual que con los restablecimientos de CSS, nos brinda un sólido punto de partida para todos los navegadores (la razón principal para usar un restablecimiento en primer lugar), pero los dos enfoques son filosóficamente diferentes.

Los restablecimientos de CSS anulan los estilos de los agentes de usuario y devuelven muchos elementos a su estado "sin estilo", un terreno nivelado sobre el cual construir de forma segura. Sin embargo, luego necesitamos diseñar la mayoría de los elementos antes de poder construir con ellos. En cambio, Normalize.css solo aborda las inconsistencias de estilo del agente de usuario, eligiendo la configuración predeterminada más adecuada para marcar la diferencia. Aquí también obtenemos una base segura para todos los navegadores, pero que incluye estilos de agentes de usuario normalizados como componentes básicos listos para usar. Básicamente es algo así como una versión idealizada para varios navegadores de la hoja de estilos CSS 2.1 predeterminada. En ambos casos, luego tenemos que agregar nuestros propios estilos dominantes para crear la imagen, pero debido a que la configuración predeterminada del navegador en Normalize.css permanece, hay menos estilos para agregar en general.

Debido a que los cambios en Normalize.css son más específicos, no hay una herencia en cascada de las reglas reescritas en las herramientas de desarrollo de su navegador. Aquí hay un ul simple: modificado con Meyer Reset y Normalize.css versiones 1 y 2:

Elemento "sin estilo" de una lista desordenada

Aplicar el reinicio de Meyer

Aplicar Normalize.css v1

Aplicando Normalize.css v2

Hay una clara diferencia en filosofía cuando el ejemplo de Meyer Reset aparece como un par de líneas de texto sin formato sin márgenes, sangrías ni viñetas, mientras que los ejemplos de Normalize.css parecen estilos predeterminados. La diferencia en los estilos aplicados a este ul también es fácilmente perceptible.

Sin embargo, estos no son todos los estilos aplicados a ul. A modo de comparación, aquí está la misma captura de pantalla "sin estilo", pero con estilos de agente de usuario visibles, en Firefox 21 y Opera Next 15.

Todos los elementos de la página HTML tienen sus propios valores predeterminados. Y, lamentablemente, los diferentes navegadores no los interpretan de la misma manera. Como resultado, el diseño del sitio sufre, su diseño cambia al cambiar el navegador (navegador de Internet). El propósito del procedimiento de restablecimiento de estilo es reducir la inconsistencia del navegador en cosas como alturas de línea, márgenes, tamaños de fuente de encabezado, etc.

Ejemplos de scripts de restablecimiento de estilo CSS

Existe la opinión de que todo webmaster que se precie debería escribir su propio código de restablecimiento de CSS. Pero soy partidario de un enfoque diferente: tomar una solución ya preparada, comprenderla y ajustarla si es necesario.

Restablecimiento de CSS de Eric Meyer

El guión de reinicio de Eric Meyer, según el propio autor, es intencionadamente muy general. Por ejemplo, el elemento del cuerpo no tiene ningún color de fondo predeterminado establecido. Por lo tanto, debe modificarse, editarse, ampliarse y personalizarse para satisfacer sus necesidades. Agregue los colores que desee para páginas, enlaces, etc.

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licencia: ninguna (dominio público) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo, dirección, grande, citar, código, del, dfn, em, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, centrar, dl, dt, dd, ol, ul, li, conjunto de campos, formulario, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, artículo, a un lado, lienzo, detalles, incrustar, figura, figcaption, pie de página, encabezado, hgroup, menú, navegación, salida, ruby, sección, resumen, tiempo, marca, audio, video (margen: 0; relleno: 0; borde: 0; tamaño de fuente: 100%; fuente: heredar; alineación vertical: línea de base ; ) /* Restablecimiento de la función de visualización HTML5 para navegadores antiguos */ artículo, aparte, detalles, figcaption, figura, pie de página, encabezado, hgroup, menú, navegación, sección ( display: block; ) cuerpo ( line-height: 1; ) ol, ul (estilo de lista: ninguno;) blockquote, q (comillas: ninguno;) blockquote:antes, blockquote:después, q:antes, q:después (contenido: ""; contenido: ninguno;) tabla (borde- colapso: colapso; espaciado de bordes: 0; )

Yahoo! (YUI 3) Restablecer CSS

CSS Reset YUI 3 mitiga el estilo inconsistente de los elementos HTML por parte de los navegadores, al igual que cualquier otro script de restablecimiento de CSS, para crear una base sólida para crear sitios web y aplicaciones web.

/* YUI 3.18.1 Copyright 2014 Yahoo! Cª Reservados todos los derechos. Licenciado bajo la Licencia BSD. http://yuilibrary.com/license/ */ /* TODO necesitará eliminar la configuración en HTML ya que no podemos asignarle espacios de nombre. TODO con el prefijo, ¿debería agruparlo por selector o propiedad para ahorrar peso? */ html( color:#000; background:#FFF; ) /* TODO elimina la configuración en BODY ya que no podemos asignarle un espacio de nombre. */ /* Prueba TODO poniendo una clase en HEAD. - Falla en FF. */ cuerpo, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, código, formulario, conjunto de campos, leyenda, entrada, área de texto, p, blockquote, th, td ( margin:0; padding:0; ) table ( border-collapse:collapse; border-spacing:0; ) fieldset, img ( border:0; ) /* TODO piensa en manejar la herencia de manera diferente, tal vez dejando que IE6 falle un poco ... */ dirección, título, cita, código, dfn, em, fuerte, th, var (estilo de fuente: normal; peso de fuente: normal;) ol, ul (estilo de lista: ninguno;) título, th ( alineación de texto: izquierda; ) h1, h2, h3, h4, h5, h6 ( tamaño de fuente: 100%; peso de fuente: normal; ) q: antes, q: después ( contenido:""; ) abbr, acrónimo ( border:0; font-variant:normal; ) /* para preservar la altura de la línea y la apariencia del selector */ sup ( vertical-align:text-top; ) sub ( vertical-align:text-bottom; ) input, textarea , seleccione ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*para habilitar el cambio de tamaño para IE*/ ) /*porque la leyenda no se hereda en IE * / legend ( color:#000; ) /* Sello de detección de CSS YUI */ #yui3-css-stamp.cssreset ( display: none; )

Restablecer estilos normalize.css

Normalize.css es un archivo CSS personalizado que permite a los navegadores representar todos los elementos de manera más consistente y de acuerdo con los estándares modernos. Sus autores examinaron las diferencias entre los estilos predeterminados de diferentes navegadores para ajustar solo aquellos estilos que necesitaban normalización.

/*! normalizar.css v6.0.0 | Licencia MIT | github.com/necolas/normalize.css */ /* Documento ===================================== = ====================================== */ /** * 1. Corrija la línea altura en todos los navegadores. * 2. Evite ajustes de tamaño de fuente después de cambios de orientación en * IE en Windows Phone y en iOS. */ html ( altura de línea: 1,15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Secciones ================================================ =========================== */ /** * Agregue la pantalla correcta en IE 9-. */ artículo, aparte, pie de página, encabezado, navegación, sección ( display: block; ) /** * Corrija el tamaño de fuente y el margen en los elementos `h1` dentro de los contextos `sección` y * `artículo` en Chrome, Firefox y Safari. */ h1 ( tamaño de fuente: 2em; margen: 0.67em 0; ) /* Agrupación de contenido ============================= = ==================================================== ========= */ /** *Agregue la pantalla correcta en IE 9-. * 1. Agregue la visualización correcta en IE. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * Agregue el margen correcto en IE 8. */ figure ( margin: 1em 40px; ) /** * 1. Agregue el cuadro correcto dimensionamiento en Firefox. * 2. Mostrar el desbordamiento en Edge e IE. */ hr ( box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ ) /** * 1. Corrija la herencia y la escala del tamaño de fuente en todos los navegadores. * 2. Corrija el tamaño impar de fuente `em` en todos los navegadores. */ pre ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Semántica a nivel de texto =============== ==================================================== === ========= */ /** * 1. Elimine el fondo gris en los enlaces activos en IE 10. * 2. Elimine los espacios en los enlaces subrayados en iOS 8+ y Safari 8+. */ a ( color de fondo: transparente; /* 1 */ -webkit-text-decoration-skip: objetos; /* 2 */ ) /** * 1. Elimina el borde inferior en Chrome 57- y Firefox 39- . * 2. Agregue la decoración de texto correcta en Chrome, Edge, IE, Opera y Safari. */ abbr ( border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ ) /** * Evitar la aplicación duplicada de `bolder ` según la siguiente regla en Safari 6. */ b, strong ( font-weight: heredar; ) /** * Agregue el peso de fuente correcto en Chrome, Edge y Safari. */ b, strong ( font-weight: negrita; ) /** * 1. Corrija la herencia y la escala del tamaño de fuente en todos los navegadores. * 2. Corrija el tamaño impar de fuente `em` en todos los navegadores. */ code, kbd, samp ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /** * Agregue el estilo de fuente correcto en Android 4.3-. */ dfn (estilo de fuente: cursiva;) /** * Agregue el fondo y el color correctos en IE 9-. */ mark ( background-color: #ff0; color: #000; ) /** * Agregue el tamaño de fuente correcto en todos los navegadores. */ pequeño (tamaño de fuente: 80%;) /** * Evita que los elementos `sub` y `sup` afecten la altura de la línea en * todos los navegadores. */ sub, sup ( tamaño de fuente: 75%; altura de línea: 0; posición: relativa; alineación vertical: línea de base; ) sub ( inferior: -0,25 em; ) sup ( superior: -0,5 em; ) /* Contenido incrustado =================================================== ================ ========================== */ /** * Agregue el visualización correcta en IE 9-. */ audio, video ( display: inline-block; ) /** * Agregue la pantalla correcta en iOS 4-7. */ audio:not() ( display: none; height: 0; ) /** * Elimina el borde de las imágenes dentro de los enlaces en IE 10-. */ img ( border-style: none; ) /** * Ocultar el desbordamiento en IE. */ svg:not(:root) ( overflow: oculto; ) /* Formularios ================================= = =================================================== ====== */ /** * Elimina el margen en Firefox y Safari. */ botón, entrada, grupo de opciones, selección, área de texto (margen: 0;) /** * Muestra el desbordamiento en IE. * 1. Mostrar el desbordamiento en Edge. */ botón, entrada ( /* 1 */ overflow: visible; ) /** * Elimina la herencia de la transformación de texto en Edge, Firefox e IE. * 1. Eliminar la herencia de transformación de texto en Firefox. */ botón, seleccione ( /* 1 */ text-transform: none; ) /** * 1. Evite un error de WebKit donde (2) destruye los controles nativos de `audio` y `video` * en Android 4. * 2. Corrija la discapacidad para diseñar tipos en los que se puede hacer clic en iOS y Safari. */ botón, html , /* 1 */ , ( -webkit-appearance: botón; /* 2 */ ) /** * Elimina el borde interior y el relleno en Firefox. */ botón::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner (estilo de borde: ninguno; relleno: 0; ) /** * Restaura los estilos de enfoque no establecidos por la regla anterior. */ button:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( contorno: 1px Dotted ButtonText; ) /** * 1. Corrija el ajuste del texto en Edge e IE. * 2. Corregir la herencia de color de los elementos "fieldset" en IE. * 3. Elimine el relleno para que los desarrolladores no se vean sorprendidos cuando pongan a cero * elementos `fieldset` en todos los navegadores. */ leyenda ( box-sizing: border-box; /* 1 */ color: heredar; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0 ; /* 3 */ espacio en blanco: normal; /* 1 */ ) /** * 1. Agregue la pantalla correcta en IE 9-. * 2. Agregue la alineación vertical correcta en Chrome, Firefox y Opera. */ progreso ( display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ ) /** * Elimina la barra de desplazamiento vertical predeterminada en IE. */ textarea ( overflow: auto; ) /** * 1. Agregue el tamaño de cuadro correcto en IE 10-. * 2. Retire el acolchado en IE 10-. */ , ( box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Corrija el estilo del cursor de los botones de incrementar y disminuir en Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( height: auto; ) /** * 1. Corrija la apariencia extraña en Chrome y Safari. * 2. Corrija el estilo del contorno en Safari. */ ( -webkit-appearance: textfield; /* 1 */ esquema-offset: -2px; /* 2 */ ) /** * Elimina el relleno interior y los botones de cancelación en Chrome y Safari en macOS. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Corrija la imposibilidad de aplicar estilos a los tipos en los que se puede hacer clic en iOS y Safari. * 2. Cambie las propiedades de fuente a "heredar" en Safari. */ ::-webkit-file-upload-button ( -webkit-apariencia: botón; /* 1 */ fuente: heredar; /* 2 */ ) /* Interactivo ============ ==================================================== === ============ */ /* * Agregue la pantalla correcta en IE 9-. * 1. Agregue la visualización correcta en Edge, IE y Firefox. */ detalles, /* 1 */ menu ( display: block; ) /* * Agregue la visualización correcta en todos los navegadores. */ resumen ( display: list-item; ) /* Scripting ===================================== = ====================================== */ /** * Agregue la pantalla correcta en Es decir, 9-. */ canvas ( display: inline-block; ) /** * Agregue la visualización correcta en IE. */ plantilla ( mostrar: ninguno; ) /* Oculto ======================================= ===================================== */ /** * Agregue la pantalla correcta en IE 10 - . */ ( mostrar: ninguno; )

Restablecer mediante selector universal * (asterisco)

A primera vista, esta puede parecer la solución más simple y exitosa; ¿por qué describir todos los elementos HTML y asignarles valores cuando puedes usar el selector *, porque su efecto se aplica a todo HTML?

* ( margen: 0; relleno: 0; )

Pero lamentablemente esta no es una buena práctica. Es muy difícil (lleva mucho tiempo en comparación con otros procedimientos de restablecimiento de CSS) para el navegador aplicar reglas a cada elemento del documento, especialmente en páginas web grandes, y también puede arruinar muchos buenos estilos predeterminados.

Restablecer estilos y WordPress

Si desea utilizar uno de los métodos descritos anteriormente para restablecer los estilos CSS de un sitio de WordPress, puede hacerlo de dos maneras.

La primera es que necesitas copiar el código de reinicio al principio del archivo style.css de tu tema de WordPress (después de las líneas sobre el autor y el nombre del tema, es decir, después del texto rodeado por una fracción y un asterisco /* ... */.

En este artículo hablaremos sobre restablecer estilos y veremos un ejemplo de cómo crear dicho archivo reset.css.

La idea de lanzar estilos apareció hace unos 10 años. Que en realidad consistía en hacer que la página se viera igual en todos los navegadores usando un pequeño conjunto de estilos CSS. Por supuesto, esto no siempre funciona, pero algunas cosas se pueden corregir; por ejemplo, el borde no está claro de dónde viene en algunas versiones de IE. O un contorno azul (contorno) cerca de los campos.

Para ningún desarrollador front-end no es ningún secreto que los navegadores son muy exigentes y cada uno procesa elementos HTML a su manera, agregando sus propios estilos estándar.

Dado que esta idea existe desde hace mucho tiempo, no es sorprendente que ya existan archivos de reinicio listos para usar, generalmente llamados reset.css, y conectados a todos los proyectos.

¿Por qué en un archivo separado? Sí, simplemente porque es más cómodo transferirlos de un proyecto a otro.

Aquí hay un ejemplo de reset.css de 2007:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licencia: ninguna (dominio público) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo, dirección, grande, citar, código, del, dfn, em, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, centrar, dl, dt, dd, ol, ul, li, conjunto de campos, formulario, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, artículo, a un lado, lienzo, detalles, incrustar, figura, figcaption, pie de página, encabezado, hgroup, menú, navegación, salida, ruby, sección, resumen, tiempo, marca, audio, video (margen: 0; relleno: 0; borde: 0; tamaño de fuente: 100%; fuente: heredar; alineación vertical: línea de base ; ) /* Restablecimiento de la función de visualización HTML5 para navegadores antiguos */ artículo, aparte, detalles, figcaption, figura, pie de página, encabezado, hgroup, menú, navegación, sección ( display: block; ) cuerpo ( line-height: 1; ) ol, ul (estilo de lista: ninguno;) blockquote, q (comillas: ninguno;) blockquote:antes, blockquote:después, q:antes, q:después (contenido: ""; contenido: ninguno;) tabla (borde- colapso: colapso; espaciado de bordes: 0; )

Este es solo un estándar para este archivo adoptado por un cierto círculo de desarrolladores web.

Le aconsejo, ya sea un programador experimentado o recién comenzando, que desarrolle su propio archivo de reinicio. Puede tomar como base el estándar descrito anteriormente, complementarlo con sus propios selectores o cambiar los existentes. Aquí hay un ejemplo de un archivo que desarrollé por mí mismo:

entrada, área de texto,a, botón, seleccionar(esquema:ninguno) img (borde:ninguno;) hr (borrar:ambos; borde:ninguno; fondo:ninguno; ) * (repetición de fondo:no-repetir; ) /* HTML5 restablecimiento de la función de visualización para navegadores más antiguos */ artículo, aparte, detalles, figcaption, figura, pie de página, encabezado, hgroup, menú, navegación, sección ( display: block; ) body ( line-height: 1; ) ol, ul ( list -estilo: ninguno; margen:0; relleno:0; ) blockquote, q ( comillas: none; ) blockquote:antes, blockquote:después, q:antes, q:después ( contenido: ""; contenido: ninguno; ) tabla ( colapso de borde: colapso; espaciado de borde: 0; )

Puede copiar cualquiera de los códigos anteriores para uso personal, pero si lo utiliza en sus artículos, proporcione un enlace a la fuente.

Excluidas las familias IE y Opera Mini.

Dado que la falta de soporte de IE puede causar el problema, estas son algunas de las formas de restablecer algunas propiedades CSS a sus valores iniciales:

Restablecer esto (animación: ninguna; retardo de animación: 0; dirección de animación: normal; duración de la animación: 0; modo de relleno de animación: ninguna; recuento de iteraciones de animación: 1; nombre de la animación: ninguna; animación- estado de reproducción: en ejecución; función de sincronización de animación: facilidad; visibilidad de la cara posterior: visible; fondo: 0; archivo adjunto de fondo: desplazamiento; clip de fondo: cuadro de borde; color de fondo: transparente; imagen de fondo: ninguna; origen-fondo: cuadro-de-relleno; posición-fondo: 0 0; posición-fondo-x: 0; posición-fondo-y: 0; repetición-fondo: repetir; tamaño-fondo: auto auto; borde: 0; borde- estilo: ninguno; ancho de borde: medio; color de borde: heredar; borde-inferior: 0; color de borde-inferior: heredar; radio-borde-inferior-izquierdo: 0; radio-borde-inferior-derecho: 0; estilo de borde inferior: ninguno; ancho de borde inferior: medio; colapso de borde: separado; imagen de borde: ninguno; borde izquierdo: 0; color de borde izquierdo: heredar; estilo de borde izquierdo: ninguno; ancho-izquierdo-borde: medio;radio-borde: 0; borde derecho: 0; color-derecho-borde: heredar; estilo de borde derecho: ninguno; ancho de borde derecho: medio; espaciado de bordes: 0; borde superior: 0; color superior del borde: heredar; radio del borde superior izquierdo: 0; borde-arriba-derecha-radio: 0; estilo de borde superior: ninguno; ancho del borde superior: medio; abajo: automático; sombra de cuadro: ninguna; tamaño de caja: caja de contenido; lado del título: arriba; claro: ninguno; clip:automático; color: heredar; columnas: automático; recuento de columnas: automático; relleno de columna: saldo; espacio entre columnas: normal; regla de columna: medio ninguno currentColor; color-regla-columna: color actual; estilo de regla de columna: ninguno; ancho de regla de columna: ninguno; tramo de columna: 1; ancho de columna: automático; contenido: normal; contraincremento: ninguno; reinicio del contador: ninguno; cursor: automático; dirección: litros; pantalla: en línea; celdas vacías: mostrar; flotador: ninguno; fuente: normal; familia de fuentes: heredar; tamaño de fuente: mediano; estilo de fuente: normal; variante de fuente: normal; peso de fuente: normal; altura: automático; guiones: ninguno; izquierda: automático; espaciado entre letras: normal; altura de línea: normal; estilo de lista: ninguno; imagen-estilo-lista: ninguna; posición-estilo-lista: afuera; tipo de estilo de lista: disco; margen: 0; margen inferior: 0; margen izquierdo: 0; margen derecho: 0; margen superior: 0; altura máxima: ninguna; ancho máximo: ninguno; altura mínima: 0; ancho mínimo: 0; opacidad: 1; huérfanos: 0; contorno: 0; color de contorno: invertido; estilo de esquema: ninguno; ancho del contorno: medio; desbordamiento: visible; desbordamiento-x: visible; desbordamiento-y: visible; relleno: 0; fondo de relleno: 0; relleno-izquierda: 0; relleno-derecha: 0; parte superior acolchada: 0; salto de página después: automático; salto de página antes: automático; salto de página dentro: automático; perspectiva: ninguna; origen-perspectiva: 50% 50%; posición: estática; /* Es posible que sea necesario modificar las comillas para diferentes configuraciones regionales (por ejemplo, fr) */ quotes: "\201C" "\201D" "\2018" "\2019"; derecha: automático; tamaño de pestaña: 8; diseño de tabla: automático; alineación de texto: heredar; alineación de texto-último: automático; decoración de texto: ninguna; color-decoración-texto: heredar; línea-decoración-texto: ninguna; estilo-decoración-texto: sólido; sangría de texto: 0; sombra de texto: ninguna; transformación de texto: ninguna; arriba:automático; transformar: ninguno; estilo transformado: plano; transición: ninguna; retraso de transición: 0 s; duración de la transición: 0 s; propiedad de transición: ninguna; función de sincronización de transición: facilidad; Unicode-bidi: normal; alineación vertical: línea de base; visibilidad: visible; espacio en blanco: normal; viudas: 0; ancho: automático; espaciado entre palabras: normal; índice z: automático; /* parche moderno básico */ all: inicial; todo: desarmado; ) /* parche moderno básico */ #reset-this-root ( todo: inicial; * ( todo: sin configurar; ) )

• Lista más convincente del repositorio de github relevante de diciembre de 2017

Como se menciona en un comentario de @user566245:

Esto es cierto en principio, pero el kilometraje individual puede variar. Por ejemplo, algunos elementos, como el área de texto predeterminada, tienen un borde; al aplicar este restablecimiento se reducirán los bordes del área de texto.

Comprado para convertirse en la norma moderna por parte del usuario de Joost

#reset-this-parent (todos: inicial; * (todos: sin configurar;))

EJEMPLO DE W3

Esto puede resultar útil para un elemento "widget" raíz incluido en una página que no desea heredar los estilos de la página externa. Sin embargo, tenga en cuenta que cualquier estilo "predeterminado" aplicado a ese elemento (por ejemplo, display:block de la hoja de estilo UA en elementos de bloque, por ejemplo) también se eliminará.

¿Alguien ha pensado en algo más que CSS para restablecer el CSS? ¿Sí?

Existe tal utilidad de emergencia:

getElementsByTagName("*") devolverá todos los elementos del DOM. Luego puedes establecer estilos para cada elemento de la colección:

Var todos los elementos = document.getElementsByTagName("*"); para (var i = 0, len = allElements.length; i< len; i++) { var element = allElements[i]; // element.style.border = ... }

Dicho todo esto; No creo que restablecer el CSS sea algo factible a menos que terminemos con un solo navegador web. Si al final "navegador" se configura como "predeterminado".

A modo de comparación, aquí hay una lista de valores de Firefox 40.0 para

donde font-style: oblique inicia la operación DOM.

Alinear contenido: desarmado; alinear elementos: desarmado; autoalinearse: desarmado; animación: desarmada; apariencia: desarmado; visibilidad de la cara posterior: sin configurar; modo de fusión de fondo: sin configurar; fondo: desarmado; encuadernación: sin armar; tamaño de bloque: sin configurar; final del bloque fronterizo: desarmado; inicio-bloque-frontera: desarmado; colapso de fronteras: desarmado; borde-en-línea-fin: desarmado; border-inline-start: desarmado; radio de borde: sin configurar; espaciado de bordes: sin configurar; borde: desarmado; abajo: desarmado; alineación de caja: desarmado; box-decoration-break: desarmado; dirección del cuadro: desarmado; box-flex: desarmado; grupo-ordinal-cuadro: sin configurar; orientación de caja: desarmado; paquete de caja: sin armar; sombra de cuadro: desarmado; tamaño de caja: sin configurar; lado del título: sin configurar; claro: desarmado; ruta de clip: sin configurar; regla de clip: desarmado; clip: desarmado; ajuste de color: desarmado; filtros-de-interpolación-de-color: sin configurar; interpolación de color: sin configurar; color: sin armar; relleno de columna: sin configurar; espacio entre columnas: sin configurar; regla de columna: sin configurar; columnas: sin configurar; contenido: desarmado; control-carácter-visibilidad: desarmado; contraincremento: desarmado; contador-reinicio: desarmado; cursor: desarmado; pantalla: desarmado; línea de base dominante: sin establecer; celdas vacías: sin configurar; opacidad de relleno: sin configurar; regla de relleno: sin configurar; llenar: desarmado; filtro: desarmado; flujo flexible: desarmado; flexionar: desarmado; borde flotante: desarmado; flotante: desarmado; color de inundación: sin configurar; opacidad de inundación: sin configurar; familia de fuentes: sin configurar; configuración-de-características-de-fuente: sin configurar; interletraje de fuente: sin configurar; anulación de idioma de fuente: sin configurar; ajuste de tamaño de fuente: sin configurar; tamaño de fuente: sin configurar; estiramiento de fuente: sin configurar; estilo de fuente: oblicuo; síntesis de fuentes: sin configurar; variante de fuente: sin configurar; peso de fuente: sin configurar; fuente: ; icono de imagen rota por la fuerza: desarmado; altura: sin armar; guiones: sin configurar; orientación de la imagen: sin configurar; región de imagen: sin configurar; representación de imágenes: sin configurar; modo ime: desarmado; tamaño en línea: desarmado; aislamiento: desarmado; justificar contenido: desarmado; justificar elementos: sin configurar; justificarse a sí mismo: desarmado; izquierda: desarmado; espaciado entre letras: sin configurar; color de iluminación: desarmado; altura de línea: desarmado; estilo de lista: desarmado; margen-bloque-fin: sin configurar; inicio-bloque-margen: desarmado; margen-en-línea-fin: sin configurar; margen-inicio-en línea: sin configurar; margen: sin configurar; desplazamiento del marcador: desarmado; marcador: desarmado; tipo de máscara: desarmado; máscara: desarmada; tamaño de bloque máximo: desarmado; altura máxima: desarmado; tamaño máximo en línea: desarmado; ancho máximo: desarmado; tamaño de bloque mínimo: desarmado; altura mínima: desarmado; tamaño mínimo en línea: desarmado; ancho mínimo: desarmado; modo de mezcla-mezcla: desarmado; ajuste de objeto: desarmado; posición del objeto: desarmado; final del bloque desplazado: desarmado; inicio-bloque-desplazado: desarmado; offset-inline-end: desarmado; offset-inline-start: desarmado; opacidad: sin fijar; orden: desarmado; orientar: desarmado; desplazamiento de contorno: desarmado; radio de contorno: sin configurar; esquema: desarmado; desbordamiento: desarmado; extremo del bloque de relleno: desarmado; padding-block-start: desarmado; padding-inline-end: desarmado; padding-inline-start: desarmado; relleno: desarmado; salto de página después: desarmado; salto de página antes: desarmado; salto de página dentro: desarmado; orden de pintura: sin configurar; origen-perspectiva: desarmado; perspectiva: desarmada; eventos de puntero: desarmado; posición: desarmado; comillas: sin configurar; cambiar el tamaño: desarmado; derecha: desarmado; ruby-align: desarmado; posición rubí: sin armar; comportamiento de desplazamiento: desarmado; coordenadas de ajuste de desplazamiento: desarmado; destino de ajuste de desplazamiento: desarmado; puntos de ajuste de desplazamiento-x: desarmado; puntos de ajuste de desplazamiento-y: desarmado; tipo de ajuste de desplazamiento: desarmado; representación de formas: sin configurar; tamaño de pila: sin configurar; color de parada: desarmado; parada-opacidad: sin configurar; trazo-dasharray: desarmado; desplazamiento de trazo: desarmado; trazo-linecap: sin configurar; unión de línea de trazo: sin configurar; límite de carrera-inglete: no establecido; opacidad del trazo: sin configurar; ancho de trazo: sin configurar; trazo: desarmado; tamaño de pestaña: sin configurar; diseño de tabla: desarmado; alineación de texto último: desarmado; alineación de texto: desarmado; ancla de texto: desarmado; combinación de texto en posición vertical: desarmado; decoración de texto: desarmado; posición-énfasis-texto: sin establecer; énfasis de texto: sin configurar; sangría de texto: sin configurar; orientación del texto: sin configurar; desbordamiento de texto: desarmado; representación de texto: sin configurar; sombra de texto: desarmado; ajuste de tamaño de texto: desarmado; transformación de texto: desarmado; arriba: desarmado; origen-transformación: desarmado; estilo de transformación: desarmado; transformar: desarmar; transición: desarmado; enfoque en el usuario: desarmado; entrada del usuario: desarmado; modificación de usuario: desarmado; selección de usuario: desarmado; efecto vectorial: sin configurar; alineación vertical: desarmado; visibilidad: desarmado; espacio en blanco: desarmado; ancho: sin configurar; cambiará: desarmado; arrastrar ventana: desarmar; salto de palabra: desarmado; espaciado entre palabras: sin configurar; ajuste de palabras: sin configurar; modo de escritura: desarmado; índice z: desarmado;