Normalizar CSS con normalize y compatibilizar navegadores con modernizr

Normalizar CSS con normalize y compatibilizar navegadores con modernizr

¿Qué es normalizar CSS? ¿Por qué es importante? En esta entrada aprenderemos a descargar y utilizar Normalize. Además veremos su diferencia con Modernizr.

El CSS del diseñador no es el único CSS que se está ejecutando, el navegador incluye sus propios estilos CSS. Lo puedes ver cuando escribes una etiqueta H1 y otra H2. El H1 tendrá un tamaño más grande, ¿verdad? ¿Quién determinó ese cambio de tamaños? El navegador aplicó automáticamente estilos CSS. Ahora bien, no todos los navegadores tienen los mismos estilos CSS entre ellos.  Incluso el usuario del sitio puede cambiar el CSS de una página, pueden, por ejemplo, cambiar el tamaño de la letra o los colores de los vínculos a través de la configuración de su propio navegador. 

Esto crea algunos conflictos, pues una página pudiera llegar a verse de una forma en un navegador y de otra forma en otro, aunque tengan el mismo CSS y el mismo HTML.

Normalizar CSS

Los normalizadores regulan las caracteristicas que pueden verse afectadas por las diferencias entre navegadores. Existen varias formas de normalizar CSS, como es Reset y como es Normalize.

Nosotros vamos a utilizar Normalize. Vamos a la página del autor de Normalize y damos clic en Download

https://necolas.github.io/normalize.css/

Normalize para normalizar CSS

Normalize para normalizar CSS

Al darle en Descargar veremos código CSS, los guardamos en un archivo al que nombraremos normalize.css.

Ahora enlazamos el archivo normalize.css en el HTML. El enlace a normalize.css se debe colocar antes del enlace a mi estilo.css para que se cargue antes.

Vamos a utilizar el ejemplo visto en la entrada anterior: CSS en 1 minuto: introducción a las hojas de estilo en cascada

 

Es muy importante antes de utilizar cualquier CSS propio normalizar CSS usando normalize o cualquier otro normalizador.

Veamos la demostración de uso de normalize: En la primera imágen vemos nuestro archivo original sin normalize (el que hicimos en la entrada anterior). Observamos que el navegador automáticamente asigna unos pequeños bordes blancos alrededor de nuestro header oscuro.  En la segunda imagen vemos el archivo utilizando normalize y esos bordes han desaparecido. Hemos logrado normalizar CSS. 

Sin utilizar normalize

Sin utilizar normalize

Compatibilizar navegadores usando Modernizr

No todas las propiedades CSS se implementan del mismo modo en diferentes versiones de los navegadores. Cada navegador tiene un motor interno diferente. Actualmente la versión de CSS es la 3 que tiene algunas funciones que versiones anteriores de navegadores no soportan (por ejemplo, algunas animaciones). 

Para resolver esos problemas estan los compatibilizadores como modernizr.

Modernizr se encarga de resolver cualquier incompatibilidad entre las diferentes versiones de navegadores. 

La dirección para descargar es la siguiente: https://modernizr.com

Si vas a la sección de Download verás una lista muy larga de opciones que modernizr puede compatibilizar. No únicamente CSS sino cualquier otro código de HTML5 y otras funciones que son modernas. Marcamos las opciones que deseamos asegurarnos que vayan a funcionar, por ejemplo, transiciones, gradientes, opacidad, etc. Marcamos y pulsamos en Build y nos descargará un JS con esas características compatibilizadas.

Luego, vamos a enlazar ese archivo a nuestro HTML

Uso de modernizr

Selecciona las opciones que deseas compatibilizar

Añadimos el siguiente código a la sección Head de nuestro HTML

Prefijos

CSS tiene funciones nuevas que no todos los navegadores entienden a la primera. Por ejemplo, un gradiente se maneja asi:

Le estamos indicando que el background o color de fondo del header será un gradiente que irá de negro a blanco de arriba hacia abajo.

Sin embargo, si ejecutas ese estilo verás que no aparece el gradiente. Esto es porque mi navegador (en este caso Safari) no reconoce la instrucción linear-gradient. Algo similar ocurrirá con Chrome. Para estos casos se requiere el uso de los prefijos. Los prefijos son los siguientes:

webkit  se usa en Chrome, Safari, Navegador Android

moz  se usa en Firefox

o    se usa en Opera

ms se usa en Internet Explorer, Edge

khtml  se usa en konqueror

En nuestro caso, para probarlo en Safari (o Chrome) la linea quedaría asi:

 

Y vemos que funciona correctamente:

Un gradiente usando el prefijo -webkit-

Un gradiente usando el prefijo -webkit-

Sugerencia de recursohttps://caniuse.com ¿Puedo usarlo? Es un sitio donde escribimos una instrucción (por ejemplo, gradient) y nos indica qué navegadores y en qué versiones es soportado o no es soportado.

¿Qué te pareció este artículo?
  • Poco informativo 
  • No era lo que buscaba 
  • Regular 
  • Interesante 
  • Excelente 
(Visto 5.414 veces)
Facebooktwitterlinkedinmail

Tu comentario

opiniones

Comments are closed