[Webdesign] Syze, des medias queries générées en JS


Syze est une bibliothèque Javascript qui permet de cibler très facilement les appareils ou les navigateurs selon leurs tailles. Concevoir des sites web pour les ordinateurs, les TV, les mobiles, les tablettes et tous autres appareils devient aussi simple que d’écrire du CSS de base.

Syze consiste en un script de moins d’1 Ko qui fonctionne dans tous les navigateurs. Il suffit d’inclure le script dans ses pages et de l’initialiser avec les tailles que l’on souhaite adresser :

<script src="//rezitech.github.com/syze/syze.min.js"></script>
...
syze.sizes(320, 480, 768, 1024, 1920);

Le script se charge d’ajouter tout simplement une classe dans la balise <html> selon la taille. Il n’y a plus qu’à écrire son CSS :

body { background: no-repeat center center; }
.is320  body { background-image: url(mobile-tall-128x128.png); }
.is480  body { background-image: url(mobile-wide-128x128.png); }
.is768  body { background-image: url(tablet-tall-256x256.png); }
.is1024 body { background-image: url(tablet-wide-256x256.png); }
.is1920 body { background-image: url(hdsize-wide-512x512.png); }

Si vous préférez des classes sémantiquement plus riche, pas de problème, Size peut nommer les tailles choisies :

syze.sizes(320, 480, 768, 1024, 1920).names({ 320:'MobileTall', 480:'MobileWide', 768:'TabletTall', 1024:'TabletWide', 1920:'HdSizeWide' });

Syze propose encore bien d’autre options, à découvrir sur le site de l’éditeur.

De mon point de vue Syze n’a pas de plus value énorme par rapport aux Médias Queries. Il permet en revanche d’écrire du CSS beaucoup plus simple et de mieux organiser son code.

Téléchargez Syze