• Optimisation>Gérer son contenu -
• Publié le : 22-05-2014 | Modifié le : 02-12-2014

1 Combiner hyphens et word-wrap

Pourquoi?

Dans un souci de compatibilité avec de nombreux médias vous aurez à gérer une multitude de formats. Et admettons-le ce n'est pas possible de tout gérer. En utilisant ces propriétés, vous vous dispenserez de nombreux ennuis de dépassement de contenus dans vos box, particulièrement si vous gérez les médias handled.
Pour exemple j'avais une note utilisateur sur PageSpeed Insights de Google Developers, baissée de 6 points, avec une indication : largeur de 342px, alors que le média affiche en 320px de large? Euh oui d'accord, mais dans mon css tout est en pourcentage!?! Je n'ai pas de largeur fixe, tout se base sur la largeur du média d'affichage.
Oui, mais il suffit d'insérer un code avec une url longue sans espace, et pan c'est là que ça dérape.
hyphens et word-wrap, pallient à ce désagrément en coupant cette url, et là votre note utilisateur repasse à 100.

La solution:

L'explication:

Sélecteur * pour tous, pour ma part cela est très important, car cela devient générique pour tout le site, les titres, les codes, les mots longs sont gérés. La valeur pour hyphens doit être sur auto, c'est le browser qui gérera l'affichage et tous ont leur propre façon de faire. Cela simplifie grandement la gestion des largeurs, quelque soit le média de lecture.

Le double effet KissCool:

Cela n'était pas prévu au départ, je cherchais à gérer les dépassements, or les propriétés hyphens et word-wrap combinées à celle de text-align:justify on rendu mes paragraphes très fluides. Au niveau de l'alignement, cela se rapproche de ce que l'on peut trouver dans l'édition. Comme il y a une césure automatique, les mots s'alignent sans espacement disgracieux et les fins de ligne respectent la largeur du paragraphe, elles vont jusqu'au bout puisque les mots sont coupés, il n'y a plus les espaces en fin de ligne, bref cela ressemble à un paragraphe.

2 Retailler les images de façon générique

Les images insérées dans le document peuvent poser problème, puisqu'elles ont une taille propre qui n'est pas forcement en accord avec la largeur des box du document. Et là encore, générer des erreurs d'affichage surtout pour les médias handled. Il faut donc leur attribuer une largeur maximale en pourcentage, pour qu'elles ne débordent pas.

Contrairement à ce que j'ai pu lire sur différentes sources et répéter bêtement, les images ne sont pas réduites en poids mais en taille.

L'explication:

Avec ces propriétés les images vont s'adapter à la largeur de la box dans laquelle elles se trouvent, mais aussi garder leur proportion avec height sur auto.

3 Éviter les dépassements à cause des marges et bordures.

Par défaut les marges intérieures et les bordures sont ajoutées en dehors de la boite. Il faut utiliser la propriété box-sizing:border-box;(border-box, seule valeur interprétée par tous les navigateurs). Les propriétés width et height incluent la marge intérieure et la bordure, mais pas la marge extérieure. Cela évite de devoir prendre en compte les marges internes et les bordures lors du calcul de la taille des objets, en particulier lorsqu'il faut calculer la largeur de boîtes qui se juxtaposent.

La solution:

ATTENTION les margin, pour box-sizing ne sont pas prises en compte.