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.

----------------
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 */

Le CSS est un langage cruel, d’apparence simple, dès la mise en œuvre, ça coince, ça « bug ». Pourtant, il n’y a pas de vrai bug. Pourquoi ? Il est fort possible que votre code soit bon, mais que votre demande soit mal formulée. Au final, le résultat n’est pas celui espéré. Pour comprendre ce problème, il faut savoir que certaines propriétés se combinent entre elles.
Je vous propose une petite liste des erreurs fréquentes de mauvaises formulations et combinaisons douteuses.

Cas facile : le doublon

Votre code semble bon, mais vous avez écrit deux fois la même propriété, elle se retrouve écrasée par la dernière instruction.
On écrase beaucoup de propriétés même en codant proprement, car c’est le principe même du CSS, néanmoins on peut se contredire dans les instructions et créer un résultat contraire.
Si vous ouvrez l’inspecteur de Chrome ou Firefox, la valeur est barrée.

Cas complexes

Plus difficile à comprendre, voir même stupide, certaines choses ne marchent pas comme prévu.

display:inline;widtht:
Il est fréquent de vouloir des liens <a href="">…</a> d’une certaine largeur (pour un menu). Or, les liens sont des éléments avec un display:inline, impossible de leur affecter une taille sans leur ajouter un autre display, le plus simple étant display:block ou display:inline-block.

margin:auto;
Sauf si le conteneur est en display:flex, margin:auto; centrera horizontalement votre élément seulement si celui-ci a une largeur définit avec width.

height:100%;
Par défaut le html et body s’adaptent à la hauteur de leur contenu mais le background remplit la hauteur du navigateur. Le height 100%, veut dire 100% de son ancêtre, mais avec un html et un body à la hauteur « ajustée » les problèmes sont assez fréquents. L’astuce est de passer par des unités viewport units basées sur la hauteur (vh) ou la largeur (vw) du viewport (l’écran ou l’intérieur du navigateur).

z-index:
La propriété z-index permet de jouer avec l’ordre des « calques », elle ne marche que si vous avez une position:absolute;, position:relative; ou position:fixed;

position:
La position absolute se rattache à l’ancêtre le plus proche en non static pour fonctionner avec top, left, bottom et right ou au body si aucun ancêtre n’est plus en static.
De plus, en sortant du flux, votre élément n’hérite plus de la largueur de son conteneur, il est parfois nécéssaire de remettre un width.

Voici ci-dessous un exemple de code assez disgracieux qui utilise l’attribut style sur une div pour afficher une image (de fond). J’ai sans doute déjà utilisé la même technique pour faire des cascades de codeur, mais il s’agit de contourner le problème avec la mauvaise manière. Nous allons procéder à un petit nettoyage (Action de débarrasser un lieu de ce qui l’encombre) pour rendre le code plus fluide.

Le mauvais code

Attention, ce code n’est pas des plus mauvais, on le voit souvent sur le web. Son plus gros défaut est la suppression de l’image du html et par conséquent du précieux alt.
Autre point négatif, le nom de la classe « textoverimage » devait être lié au data-text, mais l’ajout du texte a été supprimer dans le CSS, le code devient ambigu. Au passage, il manque une ) dans le html.

.textoverimage{
    width: 300px;
    height: 200px;
    margin:4px;
    background-size:100%;
    background-position: center;
    transition: 0.5s;
}

.textoverimage:hover{
    background-size: 110%;
}

Nettoyage

Le challenge est d’avoir un html « classique », lisible et facile à maintenir ou modifier. Sauf usage d’une propriété récente comme object-fit, il n’y a pas d’autre solution que d’ajouter un élément autour de l’image pour prévoir son recadrage.

.vignette{
  width:320px;     /* à fixer sinon c’est 100% */
  height:240px;    /* idem */
  overflow:hidden; /* rien ne doit dépasser de 320 sur 240 */
}

.vignette-img{
  transition:transform .5s; /* pour l'effet */
}

.vignette-img:hover{
  transform:scale(1.2); 
  /* zoom × 1.2
  si on veut plus de zoom, il faut une image avec plus de pixel 
  sinon, c'est un peu trop flou sur retina
  */
}

Démo

See the Pen zoom img over by Benoît Wimart (@benoitwimart) on CodePen.