Cristalab
http://www.cristalab.com/tutoriales/resetea-tu-css-con-normalize.css-c108701l/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%253A+clab+%2528Cristalab%2529
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.
En el mismo sitio de Normalize lo definen como:
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.
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.
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>:
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.
Luego de haber puesto normalize.css en tu web, podemos empezar a trabajar. Suenaidiota, pero es así. Ahora lo que simplemente debemos hacer, es tomar nuestro genérico style.css y ponernos a codear nuestra web.
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.
[nota:0b5a038dfe]Recuerda no editar el archivo normalize.css[/nota:0b5a038dfe]
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.
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.
http://www.cristalab.com/tutoriales/resetea-tu-css-con-normalize.css-c108701l/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%253A+clab+%2528Cristalab%2529
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.
[nota:0b5a038dfe]Recuerda no editar el archivo normalize.css[/nota:0b5a038dfe]
¿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.
