A la hora de empezar con un website el navegador debe suponer un par de cosas. Él debe darle sentido a las etiquetas que hemos declarado y a esto le llamamos “estilos por defecto”
De esta forma las etiquetas de encabezados <hx> o cualquier etiqueta hasta <body> llevan estilos auspiciados por el navegador de nuestra preferencia.
Y si quieres referencias de tales estilos te dejo un par de enlaces interesantes:
- http://lists.w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.htm
- http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css
- http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Son viejos pero nos ayudan a dar una buena idea de lo que estamos hablando
Código :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Default styles</title> </head> <body> <h1>Titulo de mi website</h1> <h2>Subtitulo de mi website</h2> <nav> <ul> <li><a href="">quien soy?</a></li> <li><a href="">como me llamo?</a></li> <li><a href="">para donde voy?</a></li> </ul> </nav> <hr> <section> <article> <h3>Titulo de post</h3> <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</p> </article> </section> <div> <form action=""> <label for="">Suscribete</label> <p> <input type="text" placeholder="Nombre"> </p> </form> </div> <footer> <ol> <li><a href="">@LeonidasEsteban</a></li> <li><a href="">leonidasesteban.com</a></li> </ol> </footer> </body> </html>
Gracias a esto somos capaces de sin escribir una línea de CSS tener muy diferenciados todos los elementos pero a la hora de empezar con nuestros propio código no vamos a estar tan contentos con lo que nuestro navegador nos ha impuesto, por ejemplo <body> tiene un margen y siendo el padre de todo nuestro contenido no nos va a gustar tal idea y más importante que esto es que cada navegador decide que valor asignar a estilos estilos predefinidos.
Esto no tiene porque ser tan complicado y solo basta con reasignar el valor por ejemplo en el <body> margin:0; pero he aquí una tarea repetitiva que podríamos optimizar y mejorar.
Para esto en los viejo tiempos de las web hechas en dreamweaver y tablas un buen hombre “Eric Meyer” creó la que para ese entonces suponía la solución a nuestros problemas: “reset.css”.
Una hoja de estilos que tenía por funcion resetear todos estos estilos asignados por el navegador para empezar nuestra maquetación con un documento virgen sin alteraciones de ningún tipo
Aquí se encuentran las lineas
-Este es mi website ahora.-
Tengo sentimientos encontrados, no diferencio el título del website con el del post y todo parece lo mismo, simplemente no estoy contento con este resultado
Para la gente que ha pensado como yo se encontró una mejor solución: normalizar estilos en todos los navegadores.
Esta opción también nos ofrece una hoja de estilo normalize.css que enlazaremos antes de nuestros propios estilos como base del proyecto.
Este es mi website ahora.
La diferencias con el inicio de artículo no son muchas ante nuestros ojos pero se que no hay márgenes en el <body> y la fuente es una más linda.
¿Cuál es el beneficio de usar normalize.css?
Que tal como vimos los estilos en nuevo navegador favorito se van a ver en los demás. Sin sorpresas, sin desalineaciones ni deformaciones de fuente, además de tener soporte a HTML5.
Tiene multiples formas de instalarse:
- Bajar el archivo normalize.css y agregarlo como una hoja de estilos
- Puedes usar npm, component o bower para que sea en requerimiento de tu aplicación si eres de los más osados desarrolladores
Normalize está a la orden si usas preprocesadores gracias a su genial comunidad
Stylus
https://github.com/bymathias/normalize.styl
SASS
https://github.com/JohnAlbin/normalize-scss
Less
https://github.com/additiveinverse/normalize.less
Ahora cuéntame en los comentarios o en Twitter a @LeonidasEsteban si usas normalize.css o reset.css.
“Aún puedes ser parte del mejor curso de HTML5 y CSS3 de @mejorandola donde te acompañaré como profesor para enseñarte TODO lo que necesitas para construir interfaces envidiables en la web. Accede desde mejorando.la/online”
¿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 oscar el 31 de Julio de 2014
Por Alivan el 31 de Julio de 2014
Sabiendo qué elementos son los que queremos normalizar, podemos crearnos nuestro propio 'reset' o 'normalizador'. Puede ser que yo no quiera soportar IE viejos, por lo que los estilos que tenga Normalize sobran en mi CSS. Igualmente puede haber elementos que sepa que no voy a utilizar y podría eliminar.
También puede ocurrir que haya estilos que quiera aplicar por defecto y que no vienen incluidos en Normalize. Una de las cosas que más me gusta es la siguiente:
Código :
html { box-sizing: border-box; } *,:before,:after { box-sizing: inherit; }Quiero que el tamaño de todos mis elementos incluya al padding y al borde, pues considero que es lo más normal. Si una casa mide 20 menos de ancho, esos 20 metros incluyen la pared, ¿no? En CSS debería ser igual.
A veces queremos aplicar estilos de ese tipo. Por eso mismo creo que, para algunas personas, es mejor hacerse su propio 'reseteador' o 'normalizador', en lugar de incluir directamente Normalize.
Con esto no quiero decir que usar Normalize sea malo, sino que depende de cada desarrollador. Al fin y al cabo sería algo similar, pero hecho en base a nuestras necesidades o las de nuestra empresa.
Por suerte la próxima ve el 31 de Julio de 2014
Por Roberto Banda el 31 de Julio de 2014
En mi experiencia he teniedo inconvenientes con espaciados reset lo soluciono nomalize no.
Como usted lo menciono reset.css no deja diseño alguno ("no diferencio el título del website con el del post y todo parece lo mismo") y me parece bien pues le da un total control del diseño de tu pagina sin embargo sacrifica.
Respecto a la forma de instalarse agregaria a yeoman (esta por defecto normalize.css)
Y por favor podrian acomodar esta caja de texto es estresante querer escribir y se te mueva la caja al querer posicionar el cursos a la derecha con click (la seccion que se extiende) o querer usar el scroll
Por Roberto Banda el 31 de Julio de 2014
Alivan :
Sabiendo qué elementos son los que queremos normalizar, podemos crearnos nuestro propio 'reset' o 'normalizador'. Puede ser que yo no quiera soportar IE viejos, por lo que los estilos que tenga Normalize sobran en mi CSS. Igualmente puede haber elementos que sepa que no voy a utilizar y podría eliminar.
También puede ocurrir que haya estilos que quiera aplicar por defecto y que no vienen incluidos en Normalize. Una de las cosas que más me gusta es la siguiente:
Código :
html { box-sizing: border-box; } *,:before,:after { box-sizing: inherit; }Quiero que el tamaño de todos mis elementos incluya al padding y al borde, pues considero que es lo más normal. Si una casa mide 20 menos de ancho, esos 20 metros incluyen la pared, ¿no? En CSS debería ser igual.
A veces queremos aplicar estilos de ese tipo. Por eso mismo creo que, para algunas personas, es mejor hacerse su propio 'reseteador' o 'normalizador', en lugar de incluir directamente Normalize.
Con esto no quiero decir que usar Normalize sea malo, sino que depende de cada desarrollador. Al fin y al cabo sería algo similar, pero hecho en base a nuestras necesidades o las de nuestra empresa.
Siempre puedes crear tus propias herramientas y eso es genial, lo aplaudo y porfa compartenos tu github con las convenciones y patrones que usas para que sean compartidos
Roberto Banda-blog :
En mi experiencia he teniedo inconvenientes con espaciados reset lo soluciono nomalize no.
Como usted lo menciono reset.css no deja diseño alguno ("no diferencio el título del website con el del post y todo parece lo mismo") y me parece bien pues le da un total control del diseño de tu pagina sin embargo sacrifica.
Respecto a la forma de instalarse agregaria a yeoman (esta por defecto normalize.css)
Y por favor podrian acomodar esta caja de texto es estresante querer escribir y se te mueva la caja al querer posicionar el cursos a la derecha con click (la seccion que se extiende) o querer usar el scroll
Siempre debes tener una base para que cualquiera al escribir un tag pueda integrar contenido en el website sin frustrarse.
Puedes crear módulos que asignaras con clases y se seguirá viendo perfecto. tener todo en ceros siempre será una mala idea para un proyecto que piense escalar o en el que no serás el único desarrollador.
Aunque si, hay cosas que sobran o no dependiendo del proyecto de cada uno.
Por Juangemelo01 el 15 de Septiembre de 2014
gracias y espero su respuesta
por si quieren ver a lo que me refiero, revicenlo con otros navegadores http://codepen.io/elestudiantefantasma/pen/qnjAf
Por roy surjano el 21 de Febrero de 2016