ZdS en largeur fixe

Comme le titre le suggère je me suis amusé à créer un style utilisateur pour forcer une largeur fixe sur mon écran, comme ça je peux utiliser le site confortablement sans tourner ma tête pour voir la sidebar perdue loin à gauche, ou faire de grands mouvements de souris pour atteindre les notifications

J’ai utilisé Stylus (que je découvre pour l’occasion) sur Firefox pour les appliquer, mais comme il s’agit d’un simple fichier CSS vous devriez pouvoir faire pareil avec votre solution favorite, y compris sur d’autres navigateurs !

Le code est ici et sera mis à jour si besoin : https://gist.github.com/viki53/aae4daaa1db246470516fa016ae1df64

C’est très basique pour le moment, mais ça gère le header (y compris les dropdowns), les pages fluides et les pages classiques avec sidebar.

Vous pouvez facilement éditer la largeur en changeant la variable --site-width en haut du fichier pour définir votre largeur maximale si vous voulez quelque chose de plus large… ou plus étroit.

Ou si vous avez un navigateur ou une extension compatible pour pouvez installer le UserCSS directement !

Bonne idée, merci pour le partage !

À noter que sous Firefox, pas besoin de Stylus : celles et ceux qui voudraient éviter une extension de plus peuvent utiliser le fichier userContent.css automatiquement injecté par Firefox dans toutes les pages.

Oui j’ai découvert entre temps que Stylus supporte aussi ce format, mais je sais pas trop comment ça fonctionne, alors j’ai juste mis des entêtes dans le code… à voir comment ça se passe

Et j’aimerais bien que ça fonctionne pour d’autres navigateurs aussi, tant qu’à faire…

Cela signifie que le code CSS écrit pour un site risque d’empiéter sur un autre site ?

A priori non puisque tu peux spécifier le domaine où l’appliquer.

Yep, grâce à une media-query adaptée qui permet de n’appliquer le CSS que sur certains domaines :

@-moz-document domain(zestedesavoir.com) {
  /* Le CSS */
}

Oui j’ai découvert entre temps que Stylus supporte aussi ce format, mais je sais pas trop comment ça fonctionne, alors j’ai juste mis des entêtes dans le code… à voir comment ça se passe

Et j’aimerais bien que ça fonctionne pour d’autres navigateurs aussi, tant qu’à faire…

Bien sûr ! C’était surtout pour ceux qui ne voulaient pas d’une extension en plus mais c’est bien d’avoir une version qui marche partout .

Je vais essayer de me pencher un peu plus sur la doc pour avoir un fichier commun qui ferait tout directement via le Gist… je sais pas si c’est jouable.

Quelqu’un a déjà tenté ça ?

[EDIT] : C’est bon !

Le code a été mis à jour suite au passage à la v30 qui avait renommé quelques éléments.

Et j’ai tout passé dans la media-query pour que Stylus gère ça proprement (avec mises à jour automatiques à l’avenir si tout se passe comme prévu) :
https://gist.githubusercontent.com/viki53/aae4daaa1db246470516fa016ae1df64/raw/zds-fixed.user.css

Petite mise à jour après avoir découvert l'extension Safari Userscripts hier : j’ai créé une seconde version du CSS custom, donc.

Tout se trouve ici : https://gist.github.com/viki53/aae4daaa1db246470516fa016ae1df64

Le fichier pour Firefox reste séparé car Stylus ne supporte pas encore l’argument @match et nécessite donc un sélecteur @-moz-document.

Vous pouvez donc utiliser l’adresse de @updateURL pour importer ces styles dans votre extension préférée pour bénéficier d’éventuelles mises à jour automatiques

Bonjour,

Je propose une forme de mise en avant ou peut-être une épingle de ce sujet fort utile.