Note

Affichage sur les navigateurs NetSurf et Dillo

Hier j'ai pris le temps d'améliorer l'affichage de mon site sur les navigateurs minimalistes Dillo et NetSurf …

Dans le <head> de mon site, j'ai ajouté un élément <style> dans lequel j'ai mis des règles CSS générales: typographie, couleurs, marges, etc. Ces règles constituent le style minimal que je veux appliquer dans tous les navigateurs graphiques, même ceux qui se trouvent sur des plateformes plus anciennes.

Ensuite j'ai utilisé une technique de chargement de CSS/JS que l'on appelle “cutting the mustard”, plus précisément la version proposée par Springer Nature dans leur Frontend Playbook.

Cela consiste à charger seulement les styles et les scripts plus avancés pour des navigateurs qui sont relativement récents. Les autres, auront seulement les styles de base dont j'ai parlé ci-haut.

<link
  href="/css/index.min.css"
  id="indexCSS"
  media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0), (-ms-high-contrast: none), only all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm)"
  rel="stylesheet"/>

Les navigateurs qui ne pourront pas interpréter la règle qui se trouve dans l'attribut [media] ne seront pas en mesure de charger la feuille de style index.min.css.

Idem pour le fichier index.min.js, on récupère la règle de l'élément <link/> pour déterminer s'il doit être utilisé ou non.

<script>
  (function() {
    var indexCSS = document.getElementById('indexCSS');
    if (window.matchMedia && window.matchMedia(indexCSS.media).matches) {
      var script = document.createElement('script');

      script.src = '/js/index.min.js';
      script.async = true;
      document.body.appendChild(script);
    }
  })();
</script>