Installation et utilité de l'extension Stylus

Stylus est une extension pour les navigateurs web (Chrome, Firefox, Edge) qui permet de modifier l'apparence des sites Internet en appliquant des feuilles de style personnalisées (CSS) localement.

Cela permet par exemple de :

• changer les couleurs d’un site web (cartes, fonds, menus…),

• masquer des éléments inutiles (pubs, bannières, etc.),

• améliorer la lisibilité ou l’accessibilité d’une interface.

👉  Installation de Stylus

• Ouvrir le navigateur Chrome ou Firefox.

• Aller sur le site officiel de Stylus

• Cliquer sur “Ajouter à Chrome” ou “Ajouter à Firefox”.

• Épingler l’icône Stylus dans la barre du navigateur pour y accéder facilement.
  
  

👉  Une fois Stylus installé

• Il suffit de cliquer sur l’icône Stylus, puis :

  • choisir “Écrire un nouveau style”, pour cela appuyer sur + dans la partie gauche de l'écran

  • coller un code CSS personnalisé, par exemple pour la palette de couleurs sombre et saturée ci-dessus :

 canvas.ol-unselectable {

    filter: brightness(0.8) contrast(150%) saturate(200%);

}

div.sidebar_block.simulations.backdrop img {

    filter: hue-rotate(180deg) contrast(130%);

}

• • définir l’URL du site où appliquer le style, par exemple pour Cartoradio : https://www.cartoradio.fr/

  • enregistrer et activer le style.
    
    

👉  Les différentes palettes recommandée

Stylus permet ainsi de personnaliser l’interface graphique de n’importe quel site sans modifier son contenu.

La ligne de code en rouge ci-dessus peut être remplacée pour obtenir d'autres Palettes de couleur intéressantes pour mieux visualiser les Expositions :

• Palette inversée : filter: invert(100%) hue-rotate(180deg) contrast(130%) brightness(110%);

• Palette sombre et saturée : filter: brightness(0.8) contrast(150%) saturate(200%);

• Palette froide : filter: hue-rotate(90deg) contrast(140%) brightness(105%);

• Palette Plasma : filter: hue-rotate(270deg) saturate(180%) contrast(150%) brightness(120%);

• Palette Thermique inversée : filter: hue-rotate(180deg) contrast(130%); 

• Palette Thermique intense  : filter: hue-rotate(0deg) invert(100%) contrast(150%) saturate(150%);

• Palette Thermique intense saturée :  filter: hue-rotate(0deg) invert(100%) contrast(200%) saturate(200%);

La Palette de couleurs utilisée pour la carte ci-dessus, avec des couleurs allant du vert au violet, puis bleu (non présent sur la carte), est la Palette Thermique intense. 

Elle est très utile car les couleurs violette et bleue, facilement reconnaissables, correspondent à des niveaux d'Exposition supérieures à 6 V/m.