Florilèges d’erreurs de la semaine
La bande à balise
Les balises HTML ont un sens, un usage, inutile de mettre un strong dans un titre, ça ne veut rien dire.
Un titre fort
De même qu’un li sans ul ou ol ne donnera pas de bon résultats et ne garantira pas un travail de qualité.
Enfin, c’est un classique, il n’y pas de balises p1, p2, p3 ; si vous avez besoin de faire des fantaisies sur vos paragraphes ajoutez des class.
lorem ipsum
Les noms de typographie avec des espaces doivent être entre guillemets, il faut aussi donner une typographie de secours, si celle-ci ne se charge pas.
font-family:Sporting Grotesque; /* BAD */
font-family:"Sporting Grotesque",sans-serif; /* GOOD */
Vous pouvez imprimer du corps 5pt et même un peu moins, ça reste lisible, mais les écrans d’aujourd’hui nécessitent un minimum de 8px pour les cas extrêmes (dans une icône). Soyez sympa avec vos lecteurs (de tout âge), écrivez le texte courant entre 13px et 22px.
font-size: 5px; /* optic 2000 */
Nom et non
Moins problématique qu’autrefois mais toujours délicat, les noms de fichier sont typiquement le genre de problème qui arrive le jour d’un rendu, on transfert sur un ordinateur plus ancien et il manque des images ou des pages.
protips : les noms de fichiers et de dossiers influencent les moteurs de recherche.
----------------
Page d'acceuil.html
----------------
(je vous laisse corriger la faute d’orthographe, les mauvais caractères et la majuscule ; sachant que la convention voudrait que l’on nomme celle-ci index.html).
En long et en large
Fixer la taille des éléments est parfois nécéssaire, mais typiquement avec une taille si proche d’un écran courant, c’est louche. Bref, sans media-queries sur un navigateur de 1100px de large, ça dépasse, c’est moche.
width: 1200px; /* O_O' */
width: 100%; /* oui */
width: 100vw; /* oui aussi parfois */
width: calc(100% - 25px); /* oui aussi parfois */
Float
Attention, float n’est pas interdit, mais actuellement son intérêt avec les possibilités de flexbox est quasi nul.
Pourcentage à tous les étages
En général, les gouttières d’une mise en page s’ajustent avec le corps du texte. Il peut être tentant de mettre des pourcentages partout, mais pour des raisons de lisibilité sur la multitude d’écrans, ça ne marche pas ainsi.
right: 2%; /* = méfiance */
