CSS => Normalizar los estilos del navegador

Introducción

Cada navegador tiene un conjunto predeterminado de estilos CSS que utiliza para representar elementos. Es posible que estos estilos predeterminados no sean consistentes en todos los navegadores porque: las especificaciones de idioma no son claras, por lo que los estilos de base son fáciles de interpretar, los navegadores pueden no seguir las especificaciones que se proporcionan o los navegadores pueden no tener estilos predeterminados para los elementos HTML más nuevos. Como resultado, las personas pueden desear normalizar los estilos predeterminados en tantos navegadores como sea posible.

Observaciones

El Restablecimiento de Meyer, aunque es efectivo, realiza los mismos cambios en casi todos los elementos de uso común. Esto tiene el resultado de la contaminación de las ventanas del inspector del navegador web con los mismos estilos aplicados una y otra vez, y crea más trabajo para el navegador (más reglas para aplicar a más elementos). La técnica Normalizar, por otro lado, es mucho más enfocada y menos técnica de pincel ancho. Esto simplifica el trabajo en la parte del navegador y da como resultado menos desorden en las herramientas de inspección del navegador.

normalize.css

Los navegadores tienen un conjunto predeterminado de estilos CSS que utilizan para representar elementos. Algunos de estos estilos pueden incluso personalizarse utilizando la configuración del navegador para cambiar las definiciones de tamaño y cara de fuente predeterminadas, por ejemplo. Los estilos contienen la definición de qué elementos se supone que son a nivel de bloque o en línea, entre otras cosas.

Debido a que estos estilos predeterminados tienen un margen de maniobra por las especificaciones de idioma y debido a que los navegadores pueden no seguir las especificaciones correctamente, pueden diferir de un navegador a otro.

Aquí es donde normalize.css entra en juego. Anula las inconsistencias más comunes y corrige errores conocidos.

Qué hace

Conserva valores predeterminados útiles, a diferencia de muchos restablecimientos de CSS.
Normaliza los estilos para una amplia gama de elementos.
Corrige errores e inconsistencias comunes del navegador.
Mejora la usabilidad con modificaciones sutiles.
Explica qué código hace usando comentarios detallados.

Por lo tanto, al incluir normalize.css en su proyecto, su diseño se verá más parecido y consistente en diferentes navegadores.

Diferencia a reset.css

Es posible que haya oído hablar de reset.css . ¿Cuál es la diferencia entre los dos?

Mientras que normalize.css proporciona consistencia al establecer diferentes propiedades a valores predeterminados unificados, reset.css logra consistencia al eliminar todo el estilo básico que puede aplicar un navegador. Si bien esto puede parecer una buena idea al principio, en realidad esto significa que debe escribir todas las reglas, lo que va en contra de tener un estándar sólido.

Enfoques y ejemplos

Los restablecimientos de CSS toman enfoques separados para los valores predeterminados del navegador. El restablecimiento de CSS de Eric Meyer ha existido por un tiempo. Su enfoque anula muchos de los elementos del navegador que se sabe que causan problemas desde el principio. Lo siguiente es de su versión (v2.0 | 20110126) CSS Reset.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Restablecer CSS de Eric Meyer

Normaliza CSS en el otro y trata muchos de estos por separado. La siguiente es una muestra de la versión (v4.2.0) del código.

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

/* Document
   ========================================================================== */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

Normalizar CSS

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

CSS
Normalizar los estilos del navegador

Buscar..