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
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
<link rel= "stylesheet" href="normalize.css"> <link rel="stylesheet" href="estilo.css">
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
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
Selecciona las opciones que deseas compatibilizar
Añadimos el siguiente código a la sección Head de nuestro HTML
<script src="modernizr-custom.js"></script>
Prefijos
CSS tiene funciones nuevas que no todos los navegadores entienden a la primera. Por ejemplo, un gradiente se maneja asi:
background: linear-gradient( top, #000 0%, #fff 100%);
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:
background: -webkit-linear-gradient( top, #000 0%, #fff 100%);
Y vemos que funciona correctamente:
Un gradiente usando el prefijo -webkit-
Sugerencia de recurso: https://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.
Tu comentario
