Cette section est close pour le moment.
Mais je n'arrête pas la veille, loin de là. Retrouvez mes projets sur Github et sur cette page qui sera à jour plus régulierement


Ressources

Définition de ressource : (nom féminin) Qui peut fournir ce dont on a besoin.
Vous l'aurez compris, sur cette page ce ne sont pas vraiment des tutoriels, c'est plutôt des penses-bêtes plus ou moins fournis mais qui vous permettront d'avoir des bases concernant la programmation.
Recherche par tag

Pourquoi faire un reset.css sur son site internet ?

Pourquoi faire un reset.css sur son site internet ?
Publication : Le 29/09/2012 à 18:05:06

Introduction

Quand on commence à coder un site internet et que l'on attaque la charte graphique on peut avoir de mauvaise surprise: Une marge qui traîne, un font-size trop grande.

C'est dû au fait que les différents éléments HTML ont un style par défaut. Par exemple la balise h1 est par défaut en gras, de 18px et avec une marge de 15px.

Il est donc nécessaire dans certains cas de remettre tout à 0 ou mieux, de mettre tout au goût du développeur.

La mauvaise solution

La solution radicale c'est que par défaut, on mets tout en 12px, sans marge ni padding.

Franchement c'est pas très fin comme solution, on ne garde plus le côté "identitaire" de chaque balise. Si c'est pour qu'une balise EM fasse pareil que U ça n'a pas d'intérêt.
*{
font-size:12px;
margin:0;
padding:0;
font-weight:normal;
}

Feuille de style reset.css

Avec l'exemple ci-dessous on voit que l'on garde bien l'identité de chaque balise.

Cette solution est assez légère (encore plus si le fichier est compressé). Il suffit d'appeler cette feuille de style avec celles représentant la charte graphique du site.
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;
}

Conclusion

Ce qui est bien avec ces feuilles de style reset.css, c'est que vous pouvez personnaliser votre reset comme vous le souhaiter.

Je conseille quand même vivement de faire en sorte que chaque balise garde en partie son identité.

Sur le même thème

Pourquoi faire un reset.css sur son site internet ?
Publication : Le 29/09/2012 à 18:05:06

Tags

Tags : hack / CSS

Suggestion :

Changer sa police avec le service Google web fonts

Changer sa police avec le service Google web fonts