← Tous les articles

Guides

Migrer de Stylish / Stylus vers JustZix — ce que vous gagnez au-delà du CSS

15 mai 2026 · par JustZix Team

Si vous utilisez Stylish ou Stylus depuis des années — JustZix est leur successeur naturel. Tout ce que ceux-là font pour le CSS, JustZix le fait aussi. Plus : règles JS (Stylus ne les a pas), barres d'actions avec 6 types de boutons (slider/toggle3/textarea), 4 types de fenêtres dans le frontend (CSS pane / JS pane / JS Console / Output Console), snap connections pour la disposition en dashboard, liens de partage avec TTL, et sync entre appareils. Pas de compte, pas de tracking, entièrement open-source. Cet article couvre ce qu'il faut reprendre de Stylus et ce qu'il faut ajouter de JustZix en chemin.

Pourquoi migrer — résumé rapide

Étape 1 — Exporter les styles depuis Stylus

Stylus a un export de sauvegarde intégré :

1. Ouvrez l'extension Stylus → « Manage » → « Backup » → « Export styles to file »
2. Sauvegardez stylus_backup.json — c'est du JSON avec chaque style (code CSS + sections avec préfixes d'URL)

Stylish : si vous l'avez utilisé, vous avez probablement des sauvegardes locales ou des clés vers userstyles.org. JustZix n'a pas d'import direct — copier-coller manuel (chaque style = une nouvelle règle JustZix). En moyenne 30 secondes par style.

Étape 2 — Correspondance des concepts

Terminologie différente, sémantique similaire :

Étape 3 — Coller le CSS

Pour chaque style Stylus :

1. Dans les options JustZix : Folder → +Règle
2. Scope : choisissez « Motif d'URL » et collez le préfixe d'URL Stylus (p. ex. https://reddit.com/*)
3. Onglet CSS : collez tout le code de la section Stylus (sans le wrapper @-moz-document — JustZix l'enveloppe automatiquement)
4. Sauvegardez

Spécifique à la syntaxe Stylus : si vous avez utilisé un préprocesseur Less/Stylus/SCSS dans Stylus, vous devez pré-traiter en CSS plat avant de coller. JustZix est du CSS plat uniquement (pas de babel dans le navigateur).

Étape 4 — Ajouter les fonctionnalités que Stylus n'a pas

Après la migration CSS, vous pouvez enrichir chaque règle avec des choses impossibles dans Stylus :

4a. Règle JS — sauter automatiquement le bandeau de cookies

Manque classique de Stylus — le JS est un canal latéral indisponible au CSS. JustZix : ajoutez du JS dans la même règle :

// Règle JS (même scope que le CSS)
const observer = new MutationObserver(() => {
  const accept = [...document.querySelectorAll('button, a')]
    .find(b => /accept all|akceptuj wszystkie/i.test(b.textContent));
  if (accept) { accept.click(); observer.disconnect(); }
});
observer.observe(document.body, { childList: true, subtree: true });

Le CSS a masqué le bandeau visuellement (défense), le JS clique « Accept » quand le bandeau apparaît (attaque). Une règle, deux couches.

4b. Action SLIDER — ajuster la taille de police en direct

Userstyle Stylus avec var(--font-size) et un prompt de nombres — peu ergonomique. JustZix :

// Action SLIDER « 🔤 Font »
min: 12, max: 22, step: 1, defaultValue: 16, unit: 'px'

code: |
  document.documentElement.style.setProperty('--user-font', value + 'px');

La règle CSS utilise : body, p, span { font-size: var(--user-font, 16px) !important; }. Glissez le slider dans la barre d'actions → mise à jour en direct sans F5. Mémoire par domaine.

4c. CSS pane — éditeur en direct pour de nouveaux snippets

Stylus exige d'ouvrir la page d'options + éditer + sauvegarder + recharger la page. Le CSS pane de JustZix = un panneau à côté de la page, écrire du CSS, mise à jour en direct dans l'onglet lui-même. F5 conserve le contenu du pane (sessionStorage). Parfait pour « essayer quelque chose temporairement ».

Étape 5 — Configurer le sync

Stylus Sync exige un compte Stylus séparé + une config manuelle. JustZix utilise chrome.storage.sync automatiquement — si vous êtes connecté à Chrome, les règles sont chiffrées et synchronisées via le compte Google.

Limite de chrome.storage.sync : 100 Ko au total + 8 Ko par item. JustZix répartit les grandes règles sur plusieurs items. En pratique 50-100 règles CSS+JS tiennent sans problème. Au-delà → fallback chrome.storage.local (par appareil, sans sync).

Étape 6 — Partager via un lien TTL (au lieu de userstyles.org)

userstyles.org = registre central, public, persistant. JustZix Share = éphémère, opt-in, TTL de 1h à 48h :

1. Règle JustZix → « Share » (icône presse-papiers en haut à droite)
2. Choisissez le TTL : 1h / 8h / 24h / 48h
3. Vous obtenez un lien https://www.justzix.com/s/aBcDeF123
4. Collez-le à votre équipe dans Slack/Discord. Clic → ils importent la règle chez eux
5. Après le TTL → le lien renvoie 404, les données sont supprimées du backend (conformité RGPD)

Parfait pour les équipes QA — « teste ce flux avec mon setup », « essaie cet ajustement d'UI », « voici une barre QA à importer ». Pas de persistance dans un registre public.

Cas d'usage 1 — Mode lecture Reddit

Un userstyle Stylus « Old Reddit reader mode » → 200 lignes de CSS masquant la sidebar, les pubs, les recommandations. JustZix :

• Règle CSS (les mêmes 200 lignes)
• Plus un TOGGLE3 « Mode » (Reader / Default / Compact) — 3 états avec différentes variables CSS
• Plus un SLIDER « Width » — largeur de la colonne de texte
• Plus une Output Console — journalisez chaque action « clic sur lien » (debug pour voir ce qui track)

Stylus = stylisation statique. JustZix = couche de personnalisation interactive.

Cas d'usage 2 — Mode sombre GitHub (une meilleure version)

Un userstyle Stylus « GitHub Dark » → 500 lignes de CSS avec des couleurs codées en dur. JustZix :

• Règle CSS avec des variables CSS (--bg, --text, --accent)
• TOGGLE3 « Mode » (Light / Dim / Dark / Auto-system) — 4 états, chacun définit des variables
• SLIDER « Saturation » — désaturer les couleurs pour le confort des yeux

Personnalisation directement dans l'onglet, sans retourner à la page d'options de Stylus.

Pièges de la migration

• JustZix N'IMPORTE PAS le JSON de Stylus. Copier-coller manuel par règle. En pratique : 30 sec par style. Si vous avez 50 styles → ~25 min. Je recommande de grouper ça pendant une pause café.
• Pas de préprocessing Less/Stylus/SCSS. Le CSS de JustZix est plat. Pré-traitez au build-time avant de coller, ou utilisez des variables CSS au lieu de variables Less.
• La syntaxe regex de Stylus diffère de JustZix. Stylus utilise regexp("...") dans @-moz-document, scope.url de JustZix accepte du regex à la mode JS. Petites différences de syntaxe — testez les motifs après la migration.
• Le registre central userstyles.org a disparu. userstyles.world est un successeur partiel. Le partage JustZix est éphémère, non public — par conception. Si vous voulez un hébergement CSS public → utilisez un GitHub Gist + le partage JustZix pour des liens rapides.
• Incident de tracking historique de Stylish. En 2018, Stylish a été désactivé et il s'est avéré que le tracking de télémétrie était activé. JustZix est open-source MIT, pas d'analytics par défaut, GA4 uniquement via consentement explicite aux cookies (RGPD).

La suite

Après avoir migré de Stylus, vous avez la même fonctionnalité + 5x plus. Tout est optionnel — vous pouvez utiliser uniquement des règles CSS comme dans Stylus, ou explorer les règles JS, les barres d'actions, les panes un par un. Voyez aussi :

• Mini-IDE dans un onglet — carte complète des outils JustZix
• CSS pane — éditeur en direct dans l'onglet (la fonctionnalité la plus « Stylus-like »)
• Mode sombre pour n'importe quel site — un snippet prêt pour la migration

Installez JustZix — Stylus peut vivre en parallèle (Chrome autorise les deux extensions à la fois), vous pouvez donc essayer JustZix sans supprimer Stylus. Après une semaine, vous verrez que vous n'avez besoin que d'un seul.