Vous n’avez besoin que de 12 lignes CSS pour créer un site Web propre et attrayant

Une page Web sans aucun style est comme une toile vierge. Les possibilités sont infinies et il est facile de perdre du temps à expérimenter différentes mises en page, couleurs et polices. Mais les styles de navigateur par défaut ne sont pas idéaux, vous devez donc faire des efforts pour commencer avec une conception appropriée.

Les styles suivants fourniront une base solide sur laquelle vous pourrez ensuite vous appuyer. Une fois les problèmes d’utilisabilité résolus et les principes de conception de base en place, vous pouvez vous concentrer sur votre contenu ou continuer à affiner votre conception à partir de là.

Un dimensionnement de boîte plus logique

Gardez les choses saines

Si vous avez appris CSS de A à Z, vous devriez avoir une bonne compréhension du modèle de boîte. Mais si vous n’êtes pas familier avec le concept, il peut être déroutant de comprendre. Même si vous savez ce qui se passe, travailler avec le modèle par défaut du navigateur peut être délicat, je vous recommande donc de réinitialiser la taille de la boîte comme ceci :

html blog
*, *:before, *:after blog

La valeur par défaut pour le dimensionnement de la boîte est content-box. Avec ce paramètre, toutes les propriétés de largeur et de hauteur que vous appliquez à un élément n'incluront pas de remplissage, de bordure ou de marge. Par exemple, vous souhaiterez peut-être qu'un élément occupe la moitié de la largeur de la page :

#about site

Cela donnera une largeur totale de la moitié de la largeur du conteneur plus 16 pixels (8 pixels de chaque côté). La valeur border-box pour le dimensionnement de la boîte garantira que les propriétés de largeur et de hauteur incluent le remplissage et les bordures, ce qui facilitera grandement la création d'un élément faisant exactement la moitié de la largeur de la page.

En rapport

11 conseils pour démarrer avec le CSS moderne

Des conseils de style qui ne se démoderont pas.

En bref, border-box est une manière plus intuitive de déclarer les tailles et vous posera probablement moins de problèmes à long terme. En l'appliquant à l'élément html, puis en définissant tous les autres éléments pour qu'ils héritent de cette valeur, vous pouvez facilement la remplacer si vous en avez besoin.

Longueur de ligne optimale

Le juste équilibre entre large et étroit

Il y a une raison pour laquelle la plupart des livres et des magazines sont en orientation portrait : les longues lignes peuvent être difficiles à lire. Lorsque votre œil atteint la fin d’une ligne et revient au début de la suivante, il doit rapidement changer de focus. Plus il faut aller loin pour y parvenir, plus cela devient difficile.

Les guides de typographie recommandent généralement une longueur de ligne comprise entre 45 et 75 caractères. Vous pouvez utiliser la propriété max-width pour vous assurer que vos lignes ne contiennent pas plus d'un certain nombre de caractères, en utilisant l'unité ch :

html blog

L'unité ch est relativement méconnue, mais elle devient de plus en plus importante. Cette unité représente la largeur d'un caractère 0 dans la police concernée, c'est donc un excellent moyen de garantir un nombre approximatif de caractères par ligne.

Contenu centré horizontalement

Personne ne veut regarder le côté de son écran

Une fois que vous avez défini une longueur de ligne, votre contenu sera aligné sur le côté gauche de la page. À moins que la taille de votre police ne soit très grande, elle semblera souvent déséquilibrée, en particulier pour toute personne utilisant un écran large. Il est beaucoup plus confortable pour un lecteur de regarder droit devant lui que de tourner la tête.

La solution simple consiste à aligner votre contenu au centre de la fenêtre du navigateur en lui donnant des marges égales à gauche et à droite :

html { margin: auto; }

Cela ne fonctionne que lorsque l'élément (la balise HTML, dans ce cas) a une largeur contrainte. S'il s'agit d'un élément pleine largeur, il n'y aura aucune marge à équilibrer. La propriété max-width définie précédemment signifie que, avec toute fenêtre plus grande, le contenu sera centré avec des marges horizontales égales.

Une mesure confortable

La lisibilité est indispensable

En typographie, l'interlignage fait référence à l'espace vertical entre les lignes de texte. CSS appelle cela « hauteur de ligne » et spécifie une valeur par défaut de « normal » que les navigateurs interprètent généralement autour de 1,2. En d’autres termes, environ 10 % de sa hauteur sera ajoutée sous forme d’espace au-dessus et en dessous d’une ligne de texte.

La valeur par défaut est OK mais, comme pour la longueur des lignes, elle peut entraîner des problèmes de lisibilité. La valeur que vous utilisez devrait en fin de compte dépendre de la police, de la longueur de la ligne et du nombre moyen de mots dans vos paragraphes, mais un bon compromis global est de 1,4, soit environ deux fois plus d'espace que la valeur par défaut :

html { line-height: 1.4; }

Une taille de police plus lisible

Votre taille par défaut n'est pas toujours suffisante

La taille de police par défaut dans la plupart des environnements de navigateur est de 16 pixels, et ce depuis longtemps. À mesure que les écrans obtiennent des résolutions plus élevées, cela produit un texte de plus en plus petit qui, à un moment donné, devient trop inconfortable pour la plupart des goûts. Mais la valeur par défaut reste la même.

En rapport

Ces 10 jeux amusants vous apprendront le CSS moderne

Stimulant. Stratégique. Satisfaisant.

La déclaration suivante utilise des unités relatives (em) pour augmenter la taille de la police par rapport à ce qu'elle serait autrement. Dans le cas par défaut, cela prend une police de 16 px et l'augmente à 20 px.

html { font-size: 1.25em; }

Il est important de noter l'avantage de cette approche par rapport à la taille de police : 20 px. L'utilisation d'em signifie que, si l'utilisateur modifie les paramètres de son navigateur et choisit une police plus petite ou plus grande que la police par défaut, votre page sera mise à l'échelle proportionnellement.

Polices d'en-tête et de corps appropriées

La distinction est importante

Par défaut, votre navigateur affichera le texte dans une police serif. Bien que cela convienne pour le corps du texte, il est généralement admis que les titres sans empattement se combinent mieux avec une police de corps avec empattement. De nombreuses familles de polices sont présentées par paires avec serif et sans-serif, spécifiquement pour cette raison.

h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }

Un bon modèle doit utiliser les familles de polices génériques : serif et sans-serif. Leur disponibilité est garantie et, tout comme la taille de la police, l'utilisateur peut toujours choisir sa police préférée dans un navigateur comme Chrome :

En utilisant ces styles comme base de référence, vous pouvez ajouter plus de nuances avec une pile de polices, en choisissant des polices uniques qui complètent votre conception, tout en conservant les familles génériques comme solution de secours.

En rapport

Que signifient « Serif » et « Sans Serif » ?

Serif ? Sans empattement ? Qu’est-ce que cela signifie ?

Images réactives faciles

Ne laisse pas les choses se briser

Les images qui s'échappent de leurs conteneurs peuvent au mieux paraître laides et au pire casser la mise en page de votre site Web. Si vous ne contrôlez pas très étroitement les images de votre site, surtout si elles peuvent être téléchargées par les utilisateurs, c'est un piège dans lequel il est facile de tomber.

Le filet de sécurité le plus simple consiste à garantir que toutes les images de votre page ne sont pas plus larges que leur conteneur. La propriété max-width vous permet de le faire :

img { max-width: 100%; height: auto; }

Notez que height: auto est requis pour conserver les proportions de l'image d'origine, si vous spécifiez des dimensions dans vos balises d'image, comme ceci :

Avec ce balisage, la propriété max-width peut réduire la largeur, mais elle n'aura aucun effet sur la hauteur, donc votre image finira par être étirée sans hauteur : auto.

Un contraste de couleurs adapté

Faites-le éclater !

Un bon contraste des couleurs est la clé de la lisibilité. Si la couleur de votre texte ressemble trop à celle de votre arrière-plan, il peut être difficile à lire. Cela va du double (ou plus) pour les personnes qui ont des difficultés à percevoir certaines couleurs.

Le Directives d'accessibilité du contenu Web nécessitent un rapport de contraste d'au moins 7:1. Pour référence, le rapport de contraste du texte noir (#000000) sur fond blanc (#ffffff) est de 21:1, ce qui réussit le test de contraste avec brio… les couleurs. Cependant, un contraste aussi marqué a un inconvénient : il peut exercer une pression sur les yeux, en raison de la nécessité de s'ajuster entre des luminosités aussi différentes.

Un changement très subtil peut faire toute la différence ; pas tellement que vous le remarqueriez, mais suffisamment pour que vos yeux :

html { color: #333; }

Ce gris très foncé a un rapport de contraste de 12,63:1 sur un fond blanc pur, soit près de la moitié de celui du noir pur, mais dépassant néanmoins facilement l'exigence de 7:1.

Supprimer le soulignement du lien

Une question de goût

Depuis l’arrivée du HTML au début des années 1990, un truisme persiste : les liens sont bleus et soulignés. Il s'agit de la valeur par défaut et, pour l'essentiel, elle a bien fonctionné en tant que fonctionnalité d'utilisation, informant le lecteur exactement sur quelles parties d'un document il peut cliquer.

Cependant, le soulignement des liens peut entrer en conflit avec votre conception et, selon la longueur de vos liens, peut paraître laid et même nuire à la lisibilité de votre texte. Lorsque CSS est devenu populaire, un autre truisme s’est imposé : les concepteurs désactivent le soulignement des liens.

Que vous décidiez de le faire ou non, cela dépend de vous, mais une technique courante consiste à masquer le soulignement par défaut et à l'afficher lorsque le lecteur déplace son pointeur sur le lien :

a:link { text-decoration: none; }
a:hover { text-decoration: underline; }

Les liens apparaîtront toujours en bleu, ils doivent donc rester reconnaissables. Si vous les parcourez à l'aide du clavier, ils ne seront pas soulignés, mais le style de contour par défaut du navigateur s'appliquera, garantissant que vous pouvez toujours les identifier.

Le CSS complet

Ces styles ne s’appliqueront pas nécessairement tous à votre conception. Mais ils constituent une bonne base de travail et rendent les documents simples suffisamment attrayants.

Le code

html {
    box-sizing: border-box;
    max-width: 70ch;
    margin: auto;
    font-size: 1.25em;
    color: #333;
    line-height: 1.4;
}

* {
    box-sizing: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

a:link {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Les résultats

Cette capture d'écran montre un exemple de document HTML, avec de nombreux éléments de base, rendu en utilisant le style par défaut d'un navigateur :

Cette capture d'écran montre le même document avec la feuille de style minimale ci-dessus appliquée :

Appuyez-vous sur ces bases pour amener votre site Web encore plus loin !

Les styles présentés ici devraient améliorer la conception minimale de base d'un fichier HTML typique, avec des améliorations en termes de lisibilité et de mise en page globale. Essayez-les avec vos propres documents ou sites Web et continuez à apprendre CSS pour améliorer vos connaissances et peaufiner davantage vos conceptions.