Avec cette astuce, je vous propose un outil et une méthodologie pour partir du bon pied lorsque vous attaquez les styles CSS d'un nouveau projet.
-
Un outil? → une feuille de styles CSS qui corrige ou définit les styles des principaux éléments de vos pages. (Yay, du code à copier-coller!)
-
Une méthodologie? → explorer ce code, se l'approprier, le modifier pour son projet. (Oh… du coup il faut réfléchir quand même?)
Quels objectifs?
Utiliser une feuille de styles de base, quelle qu'elle soit, répond à deux objectifs principaux:
-
Gommer certaines différences entre les styles par défaut des navigateurs. On pourra le faire en utilisant un Reset CSS, mais ici l'approche est légèrement différente: plutôt que de remettre à zéro (reset) les styles par défaut des navigateurs, on va se contenter de les corriger ou de les préciser quand ils divergent légèrement.
-
Fournir un canevas avec des sélecteurs CSS pour les principaux éléments d'une page web. Cela permettra s'occuper dès le départ de choses que l'on fait presque systématiquement dans une intégration web: modifier les styles des liens, des paragraphes, des titres, etc.
Notre feuille de styles de base
Le code CSS suivant constitue la partie "reset" de la feuille de styles que nous utilisons chez Alsacréations pour nos projets professionnels.
L'ensemble de ce projet de "framework CSS" minimaliste se nomme KNACSS est est disponible en libre téléchargement. Je vous invite à suivre scrupuleusement les indications et commentaires laissés au sein du projet KNACSS pour comprendre toutes les subtilités de cette feuille de styles de base.
/* ----------------------------- */
/* ==reset */
/* ----------------------------- */
/* base font-size corresponds to 10px and is adapted to rem unit */
html {
font-size: 62.5%;
}
body {
background-color: #fff;
color: #000;
font-family: "Century Gothic", helvetica, arial, sans-serif;
font-size: 1.4em; /* equiv 14px */
line-height: 1.5; /* adapt to your design */
}
/* font-sizing for content */
/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
p,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
label,
textarea,
caption,
details,
figure,
hgroup {
font-size: 1em; /* equiv 14px */
line-height: 1.5;
margin: 1.5em 0 0;
}
h1, .h1-like {
font-size: 1.8571em; /* equiv 26px */
font-weight: normal;
line-height: 1.6154em;
margin: .8077em 0 0 0;
}
h2, .h2-like {
font-size: 1.7143em; /* equiv 24px */
font-weight: normal;
line-height: 1.75em;
margin: .875em 0 0 0;
}
h3, .h3-like {
font-size: 1.5714em; /* equiv 22px */
font-weight: normal;
line-height: 1.909em;
margin: .9545em 0 0 0;
}
h4, .h4-like {
font-size: 1.4286em; /* equiv 20px */
font-weight: normal;
line-height: 1.05em;
margin: 1.05em 0 0 0;
}
h5, .h5-like {
font-size: 1.2857em; /* equiv 18px */
font-weight: normal;
line-height: 1.1667em;
margin: 1.1667em 0 0 0;
}
h6, .h6-like {
font-size: 1.1429em; /* equiv 16px */
font-weight: normal;
line-height: 1.3125em;
margin: 1.3125em 0 0 0;
}
/* alternate font-sizing */
.smaller {
font-size: .7143em; /* equiv 10px */
line-height: 2.1em;
}
.small {
font-size: .8571em; /* equiv 12px */
line-height: 1.75em;
}
.big {
font-size: 1.1429em; /* equiv 16px */
line-height: 1.3125em;
}
.bigger {
font-size: 1.2857em; /* equiv 18px */
line-height: 1.1667em;
}
.biggest {
font-size: 1.4286em; /* equiv 20px */
line-height: 1.05em;
}
/* soft reset */
html,
body,
textarea,
figure,
label {
margin: 0;
padding: 0;
}
ul,
ol {
padding-left: 2em;
}
code,
pre,
samp {
white-space: pre-wrap;
font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
}
code { line-height: 1em; }
table { margin-bottom: 1.5em; }
/* avoid top margins on first content element */
p:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
blockquote:first-child,
pre:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
margin-top: 0;
}
/* avoid margins on nested elements */
li p,
li ul,
li ol {
margin-top: 0;
margin-bottom: 0;
}
/* HTML5 tags */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
/* max values */
img, table, td, blockquote, code, pre, textarea, input, video {
max-width: 100%;
}
/* you shall not pass */
div, textarea, table, td, th, code, pre, samp {
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
/* pictures */
img {
width: auto;
height: auto;
vertical-align: middle;
}
a img { border: 0; }
/* scripts */
body > script {display: none !important;}
/* skip-links */
.skip-links {
position: absolute;
}
.skip-links a {
position: absolute;
left: -9999px;
padding: 0.5em;
background: #000;
color:#fff;
text-decoration: none;
}
.skip-links a:focus {
position: static;
}Où placer ces styles?
Le plus simple est sans doute de placer ces styles dans un fichier séparé. Pour ma part, je l'enregistre séparément dans un fichier base.css. Ainsi, pour une page donnée, je peux avoir les appels de feuilles de styles suivants:
<link rel="stylesheet" type="text/css" media="all"
href="css/base.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/screen.css" />Si vous choisissez cette solution, appelez la feuille de styles de base en premier, de préférence.
Avantage possible de cette solution: vous pourrez utiliser la feuille de styles de base comme base pour tous les médias de restitution, par exemple pour les styles pour l'impression. On pourra avoir la feuille de styles de base, une feuille de styles pour l'affichage à l'écran, et une troisième pour l'impression.
L'autre solution, c'est de placer les styles de base au début de votre feuille de styles principale.
Modifiez ces styles!
Un des deux avantages de la feuille de styles par défaut proposée dans cet article, c'est qu'elle fournit un canevas à modifier. Besoin d'une police différente, de tailles de texte ou hauteurs de lignes qui s'écartent de ce qui est proposé? Corrigez les styles!
Pour chaque projet, identifiez dans la maquette les principales caractéristiques du texte (fonte, taille, graisse, hauteur de ligne), les couleurs des liens (y compris avec les états survolés!), la taille des retraits entre les paragraphes. Ensuite, modifiez la feuille de styles de base pour ce rapprocher autant que possible de ces caractéristiques.
Pour ne pas faire d'impasse, lisez la feuille de styles de base ligne par ligne et demandez-vous si les styles utilisés sont pertinents pour votre projet, ou s'il faut les corriger.
Bonus
Pour finir, voici quelques styles qui peuvent être intéressants, mais qui ne sont pas assez simples ou «universels» pour être inclus à la feuille de styles de base ci-dessus.
/* --- STYLES DE BASE SUPPLÉMENTAIRES --- */
/* Met en évidence les abréviations (ayant un attribut title) */
abbr[title] {
border-bottom: 1px dotted;
cursor: help;
}
/* Met en évidence les citations */
blockquote {
margin: .75em 0 .75em 20px;
padding: 0 0 0 10px;
border-left: solid 2px #ddd;
}
q, cite {
font-style: italic;
}
q cite, q q {
font-style: normal
}
/* Supprime les guillemets automatiques (citations courtes) */
q {
quotes: none;
}
q:before, q:after {
content: ""; /* Nécessaire pour Safari/Chrome */
}
/* Rapproche les paragraphes dans les listes et citations */
blockquote p, li p {
margin: .5em 0;
}
/* Styles de base pour les listes de définition */
dl {
margin: .75em 0;
}
dt {
margin: .75em 0 0 0;
font-weight: bold;
}
dd {
margin: .25em 0 .25em 32px;
}
/* Mise en forme simple pour les tableaux */
table {
margin: 0;
border: 1px solid gray; /* Pas de bordure = "none". */
border-collapse: collapse; /* Valeur par défaut: "separate". */
border-spacing: 0;
}
table td, table th {
padding: 4px; /* Pas de retrait autour du texte = "0". */
border: 1px solid #ccc; /* Pas de bordure = "none". */
vertical-align: top; /* Valeur par défaut: "middle" */
}
/* Conteneurs sémantiques de HTML 5 */
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section {
display: block;
}Ces styles ne sont pas indispensables mais peuvent vous être utiles. Utilisez-les selon vos besoins ou inspirez-vous en.
Si vous voulez aller encore plus loin, sachez qu'un projet de feuille de styles "framework CSS" minimaliste créé par Alsacréations est à votre libre disposition. Il se nomme KNACSS.