Imaginez que vous ayez fait tout le travail nécessaire pour créer une mise en page vraiment sympa. Mais lorsque vous réduisez légèrement la fenêtre de votre navigateur, vous constatez que quelque chose déborde. Vous ajoutez une requête média pour résoudre le problème. Mais en redimensionnant la fenêtre, vous remarquez que quelque chose d’autre s’est cassé.
C’est une situation que la plupart des développeurs CSS connaîtront un jour ou l’autre. Mais heureusement, nous disposons de plusieurs solutions CSS modernes qui facilitent grandement le développement et le bon fonctionnement des choses. Cet article explore 5 pratiques utiles à garder à l’esprit lors du développement de sites Web. Ces conseils vous aideront à éviter les ruptures gênantes dans votre conception.
1. Commencer par une feuille de style globale
Commencez toujours par une feuille de style globale lorsque vous écrivez des feuilles de style CSS. Ne vous préoccupez pas de la mise en page. Définissez plutôt des styles génériques tels que la typographie, les couleurs et les arrière-plans. Réinitialisez les marges, supprimez les soulignements des liens, etc.
Une fois que vous avez terminé le style général, vous pouvez commencer à créer la mise en page et à cibler les éléments individuels de la mise en page. En gros, commencez par le haut, puis passez aux éléments.
L’exemple CSS suivant réinitialise la marge de tous les éléments à 0, définit la typographie et la couleur de tous les titres principaux et ajoute une marge cohérente à chacun d’entre eux :
body,
h1,
h2,
h3,
p {
margin: 0;
}
h1,
h2,
h3 {
color: blue;
font-family: "Verdana" sans-serif;
font-weight: 900;
line-height: 1;
}
h2,
h3,
p {
margin-bottom: 1rem;
}
Maintenant que vous avez défini tous les styles de base, vous pouvez construire à partir de là. Par exemple, vous pouvez ajouter du rembourrage à l’élément conteneur. Cela éloignera le contenu des bords de votre navigateur. Vous pouvez ensuite appliquer un largeur maximale aux images, afin qu’elles puissent s’adapter à la largeur de leur conteneur. Il s’agit de commencer par les éléments généraux avant de cibler des éléments spécifiques.
Une fois encore, la mise en page sera réactive. Ainsi, lorsque vous modifiez la taille de l’écran, la taille des éléments change en conséquence. En tant que développeur, vous devriez connaître ces trucs et astuces CSS, car ils peuvent faire passer votre productivité à un niveau supérieur.
2. Éviter les tailles fixes
Lorsque vous commencez à réfléchir à la mise en page, la première chose à garder à l’esprit est d’éviter les tailles fixes. Les tailles fixes font référence à des propriétés telles que largeur : 1000px, hauteur : 200pxet ainsi de suite. La fixation d’une hauteur ou d’une largeur fixe ne vous causera que des problèmes à long terme.
Utilisez plutôt des hauteurs et des largeurs adaptables. Une façon d’y parvenir est d’utiliser hauteur minimale et largeur minimale au lieu de hauteur et largeur. Par exemple, supposons que vous fixiez la largeur d’un élément à 600px. Si la largeur est inférieure à 600px, le contenu débordera :
Au lieu de cela, vous devriez changer la propriété de largeur à largeur maximale. Avec largeur maximalel’élément sera autorisé à se rétrécir lorsque la fenêtre du navigateur se rétrécit. Et si la fenêtre s’élargit, le texte reprendra sa longueur initiale. Voici le résultat :
Il en va de même pour hauteur. Par exemple, supposons que vous définissiez le paramètre hauteur d’un en-tête à une valeur fixe de 200px.
header {
height: 200px;
display: grid;
place-items: center;
}
Cela permet de centrer parfaitement tout ce qui se trouve dans l’en-tête. Mais lorsque vous réduisez la fenêtre du navigateur, le contenu finit par sortir de son conteneur. C’est parce que vous avez fixé la hauteur de l’en-tête.
Généralement, hauteur et largeur sont deux propriétés dangereuses. La solution consiste à utiliser la hauteur et la largeur adaptables, c’est-à-dire, min- et hauteur maximaleet min- et largeur maximale. Dans ce cas, si le navigateur se trouve dans une situation où le contenu devient plus long, l’en-tête s’agrandira pour s’adapter à cette situation.
C’est l’une des erreurs CSS les plus courantes que vous devez éviter.
3. Rappelez-vous que votre site web est réactif par défaut
Gardez à l’esprit que votre site web est réactif avant même d’écrire une seule ligne de code CSS. Cet état d’esprit peut vous aider à éviter de compliquer à l’excès le processus de conception. La mise en page va fonctionner sur des écrans massifs et sur des écrans minuscules. Il se peut qu’elle ne soit pas jolie. Elle peut même être difficile à lire sur les grands écrans. Mais le site web s’adapte à la fenêtre de visualisation, quelle que soit sa taille.
Bien sûr, les images peuvent déborder et le texte peut être trop petit. Mais vous ne perdrez rien avec la mise en page par défaut. Votre texte ne se cassera pas, et tous les éléments seront visibles à l’écran.
Comprendre et accepter ce fait peut vraiment vous aider lorsque vous écrivez votre code CSS. Lorsque vous rencontrez des problèmes, vous êtes certain que l’erreur provient du code CSS que vous avez écrit. Il est donc plus facile de trouver le problème et de le résoudre.
4. Utiliser les requêtes multimédias pour plus de complexité
Essayez d’utiliser les requêtes de média uniquement pour ajouter de la complexité. Par exemple, lorsque vous souhaitez que votre mise en page comporte trois colonnes sur les écrans de grande taille. Sinon, ne les utilisez pas. Pour en savoir plus sur les requêtes de média, lisez notre guide sur les requêtes de média.
Voici un scénario. Imaginons que l’élément dont le nom de classe est .split contient trois éléments. La feuille de style CSS suivante permet de créer une disposition en trois colonnes :
.split {
display: flex;
flex-direction: row;
gap: 2rem;
}
Dans les petits écrans (40em de large ou moins), vous voudrez que tout occupe une seule colonne. Voici ce que vous feriez :
@media(max-width: 40em) {
.split {
display: block;
}
}
Ici, vous remplacez l’alignement par défaut (trois colonnes). Mais la requête média n’est pas nécessaire car le navigateur utilise display:block par défaut. Il n’est donc pas nécessaire de le définir explicitement.
En gardant cela à l’esprit, vous pourriez remanier votre code pour utiliser une seule requête média qui ne s’applique qu’aux grands écrans. Vous passerez ainsi à trois colonnes lorsque l’écran est plus large que 40em :
@media(max-width: 40em) {
.split {
display: flex;
flex-direction: row;
gap: 2rem;
}
}
Sur les petits écrans, le navigateur empile tout dans une seule colonne. Mais il n’est pas nécessaire de le préciser, car le navigateur utilise la fonction display:block par défaut. Ainsi, vous n’avez utilisé les requêtes média que pour ajouter de la complexité.
Ainsi, au lieu d’ajouter de la complexité et de devoir ensuite remplacer un tas de propriétés, vous ajoutez maintenant la complexité lorsque vous en avez besoin. La plupart du temps, vous n’aurez besoin que de min-width media queries. Commencez par le mobile-first, puis lorsque le site est très bien sur mobile, ajoutez la complexité (par exemple, les colonnes) pour la version de bureau.
5. Tirer parti des feuilles de style CSS modernes
En utilisant des approches CSS modernes, vous pouvez vous affranchir de la plupart des problèmes d’alignement et des points de rupture et vous orienter vers la réalisation d’une conception intrinsèque.
L’une des façons d’y parvenir est la suivante :
h1 { font-size: clamp(3rem, 1rem + 10vw, 7rem)}
Cela permet de serrer le h1 entre une taille de police minimale et une taille de police maximale. La taille la plus petite que nous voulons qu’elle atteigne est la suivante 3rem et le plus élevé est 7rem. Le milieu est ce sur quoi nous allons itérer (1rem + 10 vw). En conséquence, le titre sera automatiquement réduit lorsque la fenêtre de visualisation sera plus petite et agrandi lorsqu’elle sera plus grande.
En savoir plus sur les feuilles de style CSS modernes
Le langage CSS a beaucoup évolué au fil des ans. Aujourd’hui, nous disposons d’approches nouvelles et améliorées pour le positionnement des éléments en CSS. Dans cet article, nous avons abordé certaines de ces pratiques et souligné comment elles peuvent vous aider à éviter les pièges les plus courants en matière de conception. L’une des meilleures façons d’apprendre les feuilles de style CSS modernes est l’approche pratique, par exemple en utilisant les feuilles de style CSS modernes pour concevoir un tableau HTML.