Trabajar con CSS puede ser difícil; puede volverse voluminoso muy rápidamente sin una línea de base inicial. Afortunadamente, hay formas de comenzar a usar CSS para diseñar sus páginas de manera limpia y manejable. Un ejemplo es el uso de un archivo que crea un conjunto de estilos de línea de base, como un archivo CSS de normalización.
Esta publicación le enseñará sobre el archivo Normalizar CSS y cómo usarlo. Además, sabrá por qué algunos desarrolladores lo eligen sobre otros. También aprenderá cómo entender cómo funciona y cómo implementarlo. Finalmente, la publicación discutirá algunos ejemplos de código de Normalize.
Empecemos.
¿Qué hace la normalización de CSS?
Todos los navegadores asignan valores predeterminados a ciertas propiedades de CSS, y cada navegador establece unos diferentes. Para mitigar esta inconsistencia, puede usar el archivo Normalizar CSS para crear una línea de base para los navegadores de todo el mundo. Cada navegador tiene diferentes reglas de estilo predeterminadas; apuntan a diferentes elementos y aplican diferentes valores. Como resultado, la creación de estilos sin línea de base significa que es probable que sus páginas se muestren de manera inconsistente en todos los navegadores.
Para muchos desarrolladores, esto los ha llevado a darse cuenta de que necesitan depurar su CSS. Obtenerlo tarde en el desarrollo puede conducir a un código que es inmanejable y difícil de resolver. La normalización tiene como objetivo solucionar este problema al enfocarse en las reglas predeterminadas de diferentes navegadores. File Normalize establece valores predeterminados para estas reglas para crear una línea de base.
Al colocarlo primero en las declaraciones de su archivo CSS, su CSS comenzará con las mismas reglas para cada navegador. El archivo Normalizar es solo un archivo que se usa para admitir esta función y otro archivo similar se llama Restablecer CSS. Si bien ambos tienen el mismo propósito, lo hacen de manera diferente. Ahora echemos un vistazo a las diferencias entre ellos.
La siguiente imagen muestra la configuración predeterminada del navegador para el primer sitio web.
La siguiente imagen muestra la misma página pero con el archivo de normalización en la parte superior del código CSS.
Restablecimiento y normalización de CSS
Los archivos Normalizar y Restablecer se utilizan para crear estilos de línea de base para garantizar la coherencia entre navegadores al crear páginas web. La principal diferencia es que Normalize tiene como objetivo identificar diferentes estilos en otros navegadores, comenzando con estilos que los desarrolladores no pueden cambiar. Si el estilo no se puede reparar o actualizar, se aplicará a la página en todos los navegadores. Mire el video a continuación para obtener más información sobre la diferencia entre los dos archivos.
Para el archivo Restablecer CSS, los estilos de navegador predeterminados se manejan de manera diferente. El restablecimiento de CSS tiene como objetivo corregir la inconsistencia eliminando todos los estilos predeterminados. Este proceso cambia las reglas con los valores a cero o el valor mínimo. Entonces, cuando borra los valores predeterminados, establece los valores al mínimo absoluto.
Normalizar el ejemplo de CSS
Ahora que tiene una comprensión básica de cómo funciona un archivo Normalizar, veamos un ejemplo del código a partir de ahí. El siguiente código admite la normalización de alturas de línea en los navegadores para mantener la coherencia.
/**
* 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 */
}
El código anterior también permite cambiar el tamaño de fuente de iOS cuando cambia la orientación del teléfono. Este código es un pequeño ejemplo de las diferentes reglas de estilo de orientación en el archivo Normalizar CSS. Por el contrario, el archivo Restablecer solo cambia los valores al mínimo.
Primeros pasos con la normalización de archivos CSS
Hay muchas versiones del archivo Normalize hechas por desarrolladores que prefieren diferentes configuraciones predeterminadas. La mejor manera de entender cómo usar un archivo Normalize es descargar una de sus muchas versiones y profundizar en el código. Al explorar el código y aprender cómo se configura cada archivo Normalize, puede comprender mejor cómo cada uno puede ayudar con el desarrollo web.
Analizar las experiencias y los conocimientos de los desarrolladores que los usaron también puede llevar a una mejor comprensión del nivel de comodidad de usar diferentes tipos de archivos Normalize.
