Try   HackMD

HTML CSS - Quelques Lignes De Codes Indispensables

Rendre le défilement plus fluide lors du scroll

:root { scroll-behavior: smooth; }

Définir une taille de police par défaut pour tout le document

:root { font-size: 100%; } p { font-size:1.2rem; }

Inclure le padding et la bordure pour la taille des boîtes

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

Empêcher la coupure d'un paragraphe

p { white-space: nowrap; }

Masquer du texte qui déborde du conteneur

p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

Changer l'icône du curseur lors du survol d'un élément cliquable

p { cursor: pointer; }

Installer une police pour la performance

Si vous intégrez vous même vos polices, pensez bien à fournir des polices compressées woff2 si possible.

/* montserrat-regular - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('../fonts/montserrat-v14-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Montserrat Regular'), local('Montserrat-Regular'), url('../fonts/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-v14-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */ font-display: swap; }

Gérer des images pour améliorer les performances mobiles

Pour commencer je vous conseille d'utiliser les attributs width et height. Si vous ne connaissez pas la taille de l'image définitive, mettez les dimmentions exactes.
Ajouter le nouvel attribut loading="lazy" qui permet un chargement différé pour de meilleurs performances.

En HTML:

<img src="./mon-image.jpg" width="600" height="338" loading="lazy"/>

Ensuite pour empêcher vos images d'être trop grandes selon le contexte, ajoutez

En CSS:

img { width: 100%; /*100% de l'article*/ height: auto; /* On se préoccupe pas de la hauteur*/ }

Pour optimiser davantage le chargement des images, considerez le code suivant :

<p>Responsive image using WebP, JPEG 2000 with a JPG fallback.</p> <figure> <picture> <!-- Attention la media query doit être appelée en premier --> <!-- Pour chrome --> <source srcset="images/1x/image-resize-1110-grid.webp" type="image/webp" media="(min-width: 800px)"> <source srcset="images/1x/image-resize-555-grid.webp" type="image/webp"> <!-- Pour Safari --> <source srcset="images/1x/image-resize-1110-grid.jpf" type="image/jp2" media="(min-width: 800px)"> <source srcset="images/1x/image-resize-555-grid.jpf" type="image/jp2"> <!-- Pour les autres --> <source srcset="images/1x/image-resize-1110-grid.jpg" type="image/jpeg" media="(min-width: 800px)"> <source srcset="images/1x/image-resize-555-grid.jpg" type="image/jpeg"> <!-- Pour les vieux navigateurs --> <img class="img-fluid" src="images/1x/image-resize-1110-grid.jpg" alt="Rebel" loading="lazy"> </picture> <figcaption> Currently Viewing: <span class="image-type -webp">WebP</span> <span class="image-type -jp2">JPEG 2000</span> <span class="image-type -jxr">JPEG XR</span> <span class="image-type -png">PNG24</span> </figcaption> </figure>