Transformez votre HTML en un site Web attrayant avec seulement 12 lignes de CSS

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 dispositions, couleurs et polices. Mais les styles de navigateur par défaut ne sont pas idéaux, vous devez donc faire l'effort juste pour commencer avec une conception appropriée.

Les styles suivants fourniront une base solide sur laquelle vous pourrez plus tard construire. Avec les préoccupations d'utilisation abordées et les principes de conception de base en place, vous pouvez vous concentrer sur votre contenu ou continuer à affiner votre conception à partir de là.

Plus logique de dimensionnement de la boîte

Si vous avez appris CSS à partir de zéro, vous devriez avoir une bonne compréhension du modèle de boîte. Mais si vous n'êtes pas familier avec le concept, cela peut être déroutant pour envelopper votre tête. Même lorsque vous savez ce qui se passe, travailler avec le modèle par défaut du navigateur peut être gênant, donc je vous recommande de réinitialiser la taille d'une boîte comme ceci:

        html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
    

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

        #about { width: 50%; padding: 8px; }
    

Cela entraînera une largeur totale de la moitié de la largeur du conteneur plus 16 pixels (8 pixels de chaque côté). La valeur de la boîte de bordure pour la taille des boîtes garantira que les propriétés de largeur et de hauteur incluent le rembourrage et les bordures, ce qui facilite la création d'un élément qui est exactement la moitié de la largeur de la page.

En bref, Border-Box est un moyen plus intuitif de déclarer les tailles et vous causera probablement moins de problèmes à long terme. En l'appliquant à l'élément HTML, puis en définissant tous les autres éléments pour hériter de cette valeur, vous pouvez facilement le remplacer si vous en avez besoin.

Longueur de ligne optimale

Il y a une raison pour laquelle la plupart des livres et des magazines sont dans l'orientation des portraits: 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 changer rapidement de mise au point. Plus il doit bouger de plus en plus, plus c'est difficile.

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

        html { max-width: 70ch; }
    

L'unité CH est relativement inconnue, mais elle devient de plus en plus importante. Cette unité représente la largeur d'un caractère 0 dans la police pertinente, c'est donc un excellent moyen d'assurer un nombre approximatif de caractères par ligne.

Il est impossible de spécifier un nombre exact de caractères par ligne en raison de polices à largeur variable. Mais cette approximation est, pour la plupart, plus que assez bonne.

Contenu centré sur horizontalement

Une fois que vous avez réglé 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, cela semblera souvent déséquilibré, en particulier pour tous ceux qui utilisent un écran large. Il est beaucoup plus confortable pour un lecteur de regarder tout droit que de se tourner la tête.

Le correctif 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 complet, il n'y aura pas de marges à équilibrer. La propriété maximale définie plus tôt signifie qu'avec une fenêtre plus grande, le contenu sera centré avec des marges horizontales égales.

Une mesure confortable

Dans la typographie, le leader fait référence à l'espace vertical entre les lignes de texte. CSS appelle cette «hauteur de ligne» et spécifie une valeur par défaut de «normale» qui, les navigateurs, interprètent généralement à environ 1,2. En d'autres termes, une ligne de texte aura environ 10% de sa hauteur ajoutée comme espace au-dessus et en dessous.

Le terme «dirigeant» («ledding» prononcé) provient des bandes de plomb utilisées pour séparer les lignes de type dans les presses mécaniques traditionnelles.

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

        html { line-height: 1.4; }
    

Une taille de police plus lisible

La taille de police par défaut dans la plupart des environnements de navigateur est 16px, et elle le fait depuis longtemps. Comme les écrans obtiennent des résolutions plus élevées, cela produit du 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.

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

        html { font-size: 1.25em; }
    

Il est important de noter l'avantage de cette approche sur la taille de la police: 20px. 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 valeur par défaut, votre page se réduira proportionnellement.

En-tête et polices de corps appropriées

Par défaut, votre navigateur affichera du texte dans une police Serif. Bien que cela soit bien pour le texte corporel, il est généralement admis que les titres sans serif se combinent mieux avec une police corporelle Serif. De nombreuses familles de polices se présentent en paires de Serif et Sans-Serif, en particulier pour cette raison.

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

Un bon modèle devrait utiliser les familles de polices génériques: Serif et Sans-Serif. Ceux-ci sont garantis d'être disponibles 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 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 gardant les familles génériques comme un secours.

Images réactives faciles

Les images qui échappent à leurs conteneurs peuvent sembler laides au mieux et briser la disposition de votre site Web au pire. Si vous ne gardez pas un contrôle très serré sur les images de votre site, surtout s'ils peuvent être téléchargés par les utilisateurs, c'est un piège facile à tomber.

Le filet de sécurité le plus simple est de s'assurer que toutes les images de votre page ne sont pas plus larges que leur conteneur. La propriété maximale de largeur vous permet de le faire:

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

Notez que la hauteur: Auto est nécessaire pour maintenir le rapport d'aspect de l'image d'origine, si vous spécifiez des dimensions dans vos balises d'image, comme ceci:

        <img width="800" height="400" src="https://placecats.com/bella/800/400" />
    

Avec ce balisage, la propriété de largeur maximale peut réduire la largeur, mais elle n'aura aucun effet sur la hauteur, donc votre image finira par étirer sans hauteur: auto.

Un contraste de couleur approprié

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

Les 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 un fond blanc (#FFFFFF) est de 21: 1, ce qui passe le test de contraste avec les couleurs volantes. Cependant, un tel contraste frappant a un inconvénient: il peut mettre la pression sur les yeux, causée par la nécessité de s'adapter entre des luminosité de ces différentes luminosité.

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

        html { color: #333; }
    

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

Suppression des soulignements de lien

Depuis l'arrivée du HTML au début des années 1990, un truisme a persisté: les liens sont bleus et soulignés. C'est la valeur par défaut et, pour la plupart, elle a bien fonctionné comme fonctionnalité d'utilisabilité, informant le lecteur exactement quelles parties d'un document sur lequel ils peuvent cliquer.

Cependant, la soulignement des liens peut s'affronter avec votre conception et, selon la durée de vos liens, peut sembler laide et peut même nuire à la lisibilité de votre texte. Lorsque CSS est devenu populaire, un autre truisme s'est installé: les concepteurs désactivent le lien.

Que vous décidiez de le faire ou non dépend de vous, mais une technique commune consiste à cacher le soulignement par défaut, et à le montrer 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 devraient donc rester reconnaissables. Si vous les naviguez à l'aide du clavier, ils ne seront pas soulignés, mais le style de contour par défaut du navigateur s'appliquera, en vous assurant que vous pouvez toujours les identifier.

Le CSS complet

Ces styles ne s'appliqueront pas nécessairement à votre conception. Mais ils sont une bonne base pour travailler, et ils 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, rendus à l'aide d'un style par défaut d'un navigateur:

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

---

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