Por que y como usar la normalización CSS
La hoja de estilo predeterminada del navegador es el conjunto de reglas que el navegador tiene para aplicar un estilo mínimo a los elementos.
La mayoría de las veces esos estilos son muy útiles.
Dado que cada navegador tiene su propio conjunto, es común encontrar un terreno común.
En lugar de eliminar todos los valores predeterminados, como uno de losReinicio de CSSenfoques, el proceso de normalización elimina las inconsistencias del navegador, mientras mantiene un conjunto básico de reglas en las que puede confiar.
Normalizar.csshttp://necolas.github.io/normalize.csses la solución más utilizada para este problema. Aquí está, muy bien comentado, para que pueda ver todo el trabajo que hace por usted, corrigiendo errores que tal vez nunca sepan:
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 /
-webkit-text-size-adjust: 100%; / 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the main
element consistently in IE.
*/
main {
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;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 /
height: 0; / 1 /
overflow: visible; / 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd em
font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 /
font-size: 1em; / 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 /
text-decoration: underline; / 2 /
text-decoration: underline dotted; / 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd em
font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 /
font-size: 1em; / 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent sub
and sup
elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 /
font-size: 100%; / 1 /
line-height: 1.15; / 1 /
margin: 0; / 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=“button”],
[type=“reset”],
[type=“submit”] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=“button”]::-moz-focus-inner,
[type=“reset”]::-moz-focus-inner,
[type=“submit”]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=“button”]:-moz-focusring,
[type=“reset”]:-moz-focusring,
[type=“submit”]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from fieldset
elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* fieldset
elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 /
color: inherit; / 2 /
display: table; / 1 /
max-width: 100%; / 1 /
padding: 0; / 3 /
white-space: normal; / 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=“checkbox”],
[type=“radio”] {
box-sizing: border-box; /* 1 /
padding: 0; / 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=“number”]::-webkit-inner-spin-button,
[type=“number”]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=“search”] {
-webkit-appearance: textfield; /* 1 /
outline-offset: -2px; / 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=“search”]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to inherit
in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 /
font: inherit; / 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
Debe cargar el archivo CSS de normalización antes que cualquier otro CSS.
Descarga mi gratisManual de CSS
Más tutoriales de CSS:
- La guía de Flexbox
- Tutorial de cuadrícula CSS
- Variables CSS (propiedades personalizadas)
- Introducción a PostCSS
- La propiedad de margen CSS
- Cómo centrar un elemento con CSS
- Fuentes del sistema CSS
- Cómo imprimir tu HTML con estilo
- Una guía introductoria a las transiciones CSS
- Un tutorial de animaciones CSS
- Introducción a CSS
- La guía CSS
- Cómo configurar Tailwind con PurgeCSS y PostCSS
- La hoja de trucos de Tailwind
- Cómo rotar continuamente una imagen usando CSS
- Hacer que una tabla responda usando CSS
- Cómo depurar CSS biseccionando
- Selectores CSS
- Cascada CSS
- Especificidad CSS
- Selectores de atributos CSS
- Colores CSS
- Unidades CSS
- URL de CSS ()
- Tipografía CSS
- El modelo de caja CSS
- La propiedad de posición CSS
- Consultas de medios CSS y diseño receptivo
- Consultas de funciones CSS
- Transformaciones CSS
- Cómo diseñar listas usando CSS
- Prefijos de proveedores de CSS
- Herencia CSS
- Pseudoclases CSS
- Pseudoelementos CSS
- Diseñar tablas HTML con CSS
- La propiedad de visualización de CSS
- La función CSS calc ()
- Bordes CSS
- Importando un archivo CSS usando @import
- Manejo de errores CSS
- Filtros CSS
- Tamaño de caja CSS
- Fondos CSS
- Comentarios CSS
- Fuentes CSS
- Relleno CSS
- La propiedad flotante de CSS y su compensación
- Normalización de CSS
- La propiedad de índice z de CSS
- Cómo deshabilitar la selección de texto usando CSS
- Cómo poner un elemento en la parte inferior de su contenedor usando CSS
- Cómo invertir colores usando CSS
- Etiquetas previas receptivas en CSS
- Incrustaciones de video de YouTube receptivas
- ¿Cuáles son los buenos valores de CSS Breakpoint para Responsive Design?
- Cómo alinear el centro en flexbox