# 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;
}

- réf : [https://google-webfonts-helper.herokuapp.com/fonts](https://google-webfonts-helper.herokuapp.com/fonts)

## 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>

- réf :
- https://codepen.io/alternative-rvb
- [Type Mime](https://www.iana.org/assignments/media-types/media-types.xhtml)

- Voir aussi :
- Modernizr
- Lazy Loading

{%hackmd @alternative-rvb/contact %}