Hola a todos/as, ¿que tal? espero que todo bien. Hoy les traigo un tutorial con un poco de información respecto a una “librería” (no es el término más correcto) que ayudará a todo front-end para trabajar con sus hojas de estilos, me refiero a normalize.css.
¿Qué es normalize?
En el mismo sitio de Normalize lo definen como:
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.
Pero esta definición no nos sirve mucho, porque no entendemos bien qué es. Por lo cual se los explicaré yo.
En términos simples Normalize.css es un archivo .css que pone en cero todas las etiquetas HTML. Todo esto con el fin de que tu sitio web se vea igual en todos los navegadores.
¿Cómo funciona?
Normalize.css funciona como una hoja de estilo más en tu sitio web, que tiene todas las etiquetas básicas de HTML con el valor 0 (etiquetas como <a><h1><span> etc, y también incluyen las etiquetas de HTML5 como <section><article> etc.)
Al ser una hoja de estilo, debe ser tratado como tal, osea, con una extensión .css, y linkeado en el <head> de tu sitio web. No tiene nada que ver con Javascript, o cualquier otra sintaxis alejada de CSS o HTML. Osea, no hay que instalar nada, configurar nada, solamente descargar el archivo e introducirlo como explicaré más adelante.
¿Como lo "instalo"?
Hablar de instalar normalize.css está incorrecto, lo que realmente haremos es introducir el archivo en nuestra web. Lo cual es muy sencillo. Lo primero que haremos es “descargarnos” normalize.css desde su página oficial.
Luego de habernos descargado nuestro archivo, lo debemos guardar, y recomiendo (no es obligación) guardarlo con el nombre normalize.css. Lo guardaremos en la carpeta de nuestra web.
Fácil ¿no?, bueno, esto sigue siendo fácil. Ahora lo que haremos es linkearlo a nuestro sitio web, para que normalice nuestra web a todo navegador. Para eso lo linkeamos como una hoja de estilo más que es. Osea agregamos el siguente comando entre las etiquetas <head> </head>:
Código :
<html> <head> <title></title> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="normalize.css" /> </head> <body>
Y listo! tenemos normalizada nuestra web. Osea, lo que hicimos básicamente es obtener el archivo normalize.css, ponerlo en la carpeta de nuestra web, y linkearlo vía HTML.
Y ahora... ¿que hago?
Luego de haber puesto normalize.css en tu web, podemos empezar a trabajar. Suena
En caso (obviamente lo harás) de querer re escribir una etiqueta HTML que ya está definida con el valor 0 en normalize, lo haces sin editar el normalize.css, tu hoja de estilo tiene más prioridad que normalize.
Recuerda no editar el archivo normalize.css
¿Qué fin tiene todo esto?
El objetivo de todo esto es uno solo, que tu sitio web se vea igual en todos los navegadores.
Todo los navegadores tienen algo así como su hoja de estilo propia, lo que hacen es que cuando tú no tienes definida una etiqueta, le ponen automáticamente un valor, lo cual cambia según navegador. Para asegurarnos que nuestro sitio web se vea igual en todos lados, usamos normalize.css.
Links de ayuda
- Sitio web oficial de normalize.css, aquí (inglés).
- Normalize.css en Github, aquí.
- Información oficial, aquí (inglés).
- Demo online de como deja los elementos, aquí.
Ha sido un post corto, y simple. Claro, el tema no da mucho para hablar, pero es sumamente útil para todo front-end. Si les queda otra duda, simplemente me dicen en un comentario y la responderé apenas la vea/pueda. También estoy en Twitter (@semasad) por si tienen alguna duda/comentario/queja/etc, así se pueden comunicar fácilmente conmigo. Nos vemos, un saludo desde Chile.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Carlos el 22 de Noviembre de 2012
Por Dalaiman el 22 de Noviembre de 2012
Carlos-blog :
Que bueno que te haya servido. Cualquier cosa me dices.
Dalaiman-blog :
No es lo mismo, son proyectos (o "librerías") separados. Pero cumplen la misma función, del mismo método. Es mejor normalize.css básicamente porque es más moderno, se actualiza más seguido, va a la par con las nuevas tecnologías de HTML, y tiene menos bugs. Aquí (el sitio de Normalize.css) más abajo explican la diferencia entre Reset.css y Normalize.css (donde dice Normalize vs Reset). Espero que te haya resuelto tu duda, si no me escribes de nuevo y te lo explico.
Por Alivan el 22 de Noviembre de 2012
Dalaiman-blog :
La diferencia fundamental con normalize es que los "reset" resetean todos los valores a 0. Normalize sin embargo aplica a todas las etiquetas un estilo por defecto de manera que si no defines un estilo para cierta etiqueta, si necesitas hacer alguna modificación para añadirla esta tendrá un estilo por defecto sin necesidad de redefinirlo en tu código css. Con un reset directamente no poseerá un estilo.
Por HtrMancera el 22 de Noviembre de 2012
Por Japso el 22 de Noviembre de 2012
Japso-blog :
No, se debe vincular en tu HTML, porque no es algo que se le agrega a tu style.css principal, solo da valores secundarios, para ello lo debes vincular en tu .html, para que sea leído como una stylesheet secundaria. Y tampoco tengo claro si se puede poner desde CSS vía @import.
adhara web :
Que bueno! ese era uno de los objetivos del post, que vieran que hay más alternativas, y más modernas. Aparte, con normalize.css, tus valores no quedan "feos" con un 0 absoluto, si no quedan más ordenados, en comparación a reset.css.
Por Renzo el 23 de Noviembre de 2012
Pregunta: ¿Usando Normalize.css obtendré mejores resultados?
Renzo-blog :
Pregunta: ¿Usando Normalize.css obtendré mejores resultados?
Entonces la pregunta que haces será obvia para ti.
Por Guitarrero el 23 de Noviembre de 2012
Una cosa no tiene nada que ver con la otra, osea, ¿porque normalize.css afectaría tu framework?. Osea, tu framework no debería ni tener contacto con normalize.css, ¿porque debería cambiar? Ahora, no se, si tu framework hace no se, lo que hace normalize.css o reset.css, tal vez te de complicaciones. En resumen, para responder tu pregunta directamente, y la entendí bien, puedes utilizar normalize.css, y si tienes un framework que hace lo que hace normalize, bueno, no utilices normalize y utiliza tu framework, pero obviamente es más recomendable usar normalize que algo así de invasivo. Espero haber respondido tu pregunta
No me gusta cuando hacen que ese css sea "sagrado" y no "recomienden" modificarlo... esta ahi para jugar con él y desarmarlo.
Por ejemplo, Normalize/Reset definen una tipografia (tipografia, tamaño, color, etc) para el body y el documento ¿xq' redefinirla luego cuando podemos hacerlo ahi?
Dientuki :
No me gusta cuando hacen que ese css sea "sagrado" y no "recomienden" modificarlo... esta ahi para jugar con él y desarmarlo.
Por ejemplo, Normalize/Reset definen una tipografia (tipografia, tamaño, color, etc) para el body y el documento ¿xq' redefinirla luego cuando podemos hacerlo ahi?
Eso mismo estaba pensando hoy, porque no crear algo así como tus propios parámetros default, de como te gustaría que quedara tu web en todos los navegadores. Para mi normalize.css, es la base para empezar a crear tu, tu propia normalización estándar de tus web. En el post puse de una forma muy cerrada no editar Normalize, por el hecho para todos los que recién lo están conociendo, no lo editen por error y no les funcione, pero a medida que vamos aprendiendo, solos nos vamos a dar cuenta y a entusiasmar de crear nosotros nuestros parámetros estándar.
Por mismo estaba pensand el 27 de Noviembre de 2012
Por DAROX el 28 de Noviembre de 2012
Con firefox siempre se vió bien en todas sus versiones y solo pasa con este espacio.
http://www.redcamelot.com/william_sanmartin/links.html
esta es la página que más se nota y no se porque
Gracias por cualquier ayuda o data
DaroX
Por DAROX el 28 de Noviembre de 2012
Por carlos el 29 de Noviembre de 2012
Por Juan el 07 de Diciembre de 2012
<head>
<title></title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="normalize.css" />
</head>
<body>
Has puesto mal el orden de los link. Tal y como lo tienes se aplicarán tus estilos personalizados y después se normalizan.
<link rel="stylesheet" href="normalize.css" />
<link rel="stylesheet" href="style.css" />
Así funcionará.
Por Miguel el 30 de Enero de 2013
Miguel-blog :
Primero debe ir Normalize.css y luego todos tus CSS. Así carga normalize y luego los CSS que se van a sobreponer sobre el normalize.
Por CaballeroDeLaEspuela el 03 de Febrero de 2013
Por el 20 de Mayo de 2013
Por Rodolfons el 20 de Mayo de 2013
Por Juanchi el 12 de Septiembre de 2013
Por Felipe el 26 de Septiembre de 2013
Por Hector Cañedo el 07 de Octubre de 2013
Gracias por este buen post!
Por Abner el 20 de Marzo de 2014