[SOURCE] Reset CSS

lotus · Mayo 26, 2015, 09:59:14 AM

Buenas a tod@s, muchas veces al empezar en diseño web vemos que las páginas webs que creamos se comportan diferentes dependiendo del navegador con el que lo abramos.

Os copio un trozo de la wikipedia explicando el problema con los navegadores y como se intenta minimizar las posibles diferencias que nos puede surgir.

DESCRIPCIÓN WIKIPEDIA

Los Reset CSS son unas hojas de estilo en cascada que se suelen incluir al comienzo de un documento HTML, y cuya función es la de minimizar, en la medida de lo posible, las múltiples diferencias visuales que se dan a la hora de mostrar una misma página web, en diferentes navegadores, causa de que cada navegador implementa su hoja de estilos propia e interna, con determinados valores por defecto, que no siempre siguen la recomendación de la organización W3C.

El consorcio W3C, junto con su especificación de CSS 2.11 del 23 de abril de 2009, publicó en su recomendación, un valor por defecto para cada propiedad de CSS que deberían adoptar los agentes de usuario. Debido a que algunos navegadores hicieron caso omiso a sus indicaciones, los diseñadores web se han visto obligados a recurrir al uso de este tipo de trucos para garantizar la correcta visualización en la mayoría de navegadores.

CÓDIGO CSS

Código: css


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

RECOMENDACIONES

Una forma fácil de implementar el código es crear un archivo con el nombre "reset.css" y despues solo tenemos que referenciarlo en el html. Así evitamos tener que copiarlo en cada archivo css. Por ejemplo:

Código: html5

<!DOCTYPE html>
	<head>
		<title>Mi Página</title>
		<meta charset="utf-8" />
		<link type="text/css" rel="stylesheet" href="reset.css" />
		<link type="text/css" rel="stylesheet" href="index.css" />
	</head>
	<body>
                 <!-- Vuestra web -->
	</body>
</html>

ATENCIÓN: Se recomienda ejecutar primero el código de reset, si se ejecuta despues de vuestro propios archivos css posiblemente se desconfigure toda la web.

Espero que os ayude, este código pertenece a Eric Meyer. Su web es: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Enlace del código: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Un saludo.

ANTRAX · Mayo 26, 2015, 10:29:36 AM

Muy buen post compañero!
Muchisimas gracias por compartirlo!

Saludos!
ANTRAX

arthusu · Mayo 26, 2015, 09:44:04 PM

Buen post bro, tambien hay una buena forma de realizar tus plantillas utilizando la base: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta con la cual ya viene con varias cosas que pueden ser utiles en el diseño web, solo resta crear el codigo, pondre un enlace donde explico de que trata mas o menos si lo consideran spam pueden eliminarlo: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta, saludos espero que te sea util

[SOURCE] Reset CSS

lotus

Mayo 26, 2015, 09:59:14 AM

ANTRAX

Mayo 26, 2015, 10:29:36 AM #1

arthusu

Mayo 26, 2015, 09:44:04 PM #2