eCSSential, ne charger que les CSS nécessaires avec les designs réactifs

eCSSential, ne charger que les CSS nécessaires avec les designs réactifs

parFlorian publié le

eCSSential est un script JS qui permet de ne télécharger que les CSS dont on a besoin en fonction du navigateur, de la taille de l’écran et de ce qui y est affiché. Le résultat est un site plus léger, plus réactif et et donc plus rapide pour une meilleure expérience utilisateur.

Techniquement il s’agit d’un script dont on place l’appel dans la section <head> de ses pages. Il détermine quelles sont les feuilles de styles à charger immédiatement (par exemple les bases dans une approche mobile-first), celles à charger plus tard (de manière asynchrone) et celle à ne pas charger (typiquement les feuilles de styles pour des écrans plus grands que le notre).

<head>
    ...
    <script>
        <!-- Add eCSSential.min.js inline here -->

        eCSSential({
    "all": "all.css",
    "(min-width: 20em)": "css/min-20em.css",
    "(min-width: 37.5em)": "css/min-37.5em.css",
    "(min-width: 50em)": "css/min-50em.css",
    "(min-width: 62.5em)": "css/min-62.5em.css",
    "IE6 IE7 IE8": "css/iedesktopfixes.css"
});
    </script>
</head>

L’approche est intéressante, d’autant que le script propose des options originales, notamment pour combiner les fichiers et le polyfill window.matchMedia.

Je ne sais pas trop quoi penser de ce genre de script (un peu comme head.js). Je ne sais pas si c’est une bonne approche. En tout cas techniquement, je trouve ça intéressant.

Téléchargez le script eCSSential