Dans le passé, Internet était rempli de mauvaises conceptions Web, de polices illisibles, de couleurs qui se disputaient et de rien d'adapté à la taille de l'écran. À cette époque, les navigateurs Web permettaient aux utilisateurs d'écrire des feuilles de style CSS que le navigateur utilisait pour remplacer les choix de style effectués par les concepteurs de pages. Cette feuille de style utilisateur définit la police à une taille cohérente et définit les pages pour afficher un fond de couleur spécifié. Tout était question de cohérence et de convivialité.
La popularité de la feuille de style utilisateur s'effondre
Maintenant, cependant, les feuilles de style utilisateur ne sont pas courantes. Google Chrome ne les autorise pas et Firefox les supprime progressivement. Dans le cas de Chrome, vous aurez besoin d'une extension pour créer des feuilles de style utilisateur. Firefox vous oblige à activer l'option via une page de développeur. Les feuilles de style utilisateur ont disparu car la conception Web est meilleure.
Si vous souhaitez toujours expérimenter avec les feuilles de style utilisateur, vous pouvez le faire, mais ce n'est pas recommandé. Vous êtes plus susceptible de casser les pages que vous visitez ou de les rendre vraiment laides.
Activer les feuilles de style utilisateur dans Firefox
Pour commencer avec les feuilles de style utilisateur dans Firefox, activez-les. Cela ne prend que quelques secondes, mais l'option est enterrée dans la page de configuration de Firefox.
Ouvrez Firefox et tapez à propos de: configuration dans la barre d'adresse.
-
Firefox vous amène à une page vous avertissant qu'aller plus loin vous permettra de gâcher le navigateur. presse Accepter le risque et continuer continuer.
-
La page suivante que vous verrez n'est qu'une barre de recherche. Taper toolkit.legacyUserProfileCustomizations.stylesheets dans la recherche.
-
Il ne devrait y avoir qu'un seul résultat. Double-cliquez dessus pour définir la valeur sur vrai.
Fermez Firefox.
Créer la feuille de style utilisateur Firefox
Maintenant que Firefox accepte votre feuille de style, vous pouvez en créer une. Le fichier n'est pas différent des autres CSS. Il réside dans un dossier du répertoire de profil utilisateur de votre navigateur.
-
Localisez le répertoire du profil utilisateur de Firefox. Sous Windows, vous pouvez le trouver sur C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\.
Sur Mac, il se trouve dans Bibliothèque/Application Support/Firefox/Profils.
Sous Linux, c'est dans /home/username/.mozilla/firefox.
Dans ce dossier, il y a au moins un dossier avec un nom qui est une chaîne de caractères aléatoires suivi d'une extension .default ou .default-release. À moins que vous n'en ayez créé un autre, c'est le dossier de profil dont vous avez besoin.
Créez un nouveau dossier dans celui du profil et nommez-le chrome.
Dans le chrome répertoire, créez un fichier appelé userContent.css, et ouvrez-le dans l'éditeur de texte de votre choix.
-
Vous pouvez mettre n'importe quoi dans ce fichier, tant qu'il s'agit d'un CSS valide. Pour illustrer un point, rendez tous les sites Web ridicules. Réglez la couleur d'arrière-plan sur rose vif:
corps, principal {
couleur d'arrière-plan: #FF00FF !important ;
}le !important à la fin est important. Habituellement, utiliser !important dans CSS est une mauvaise idée. Cela brise le flux naturel de la feuille de style et peut faire du débogage un cauchemar. Cependant, il est nécessaire dans ce cas de remplacer le CSS existant du site. Vous en aurez besoin pour chaque règle que vous créez.
-
Modifiez les tailles de police.
p {
font-size: 1.25rem !important;
}
h1 {
font-size: 1rem !important;
}
h2 {
font-size: 1,75rem !important;
}
h3 {
font-size: 1.5rem !important;
}
p, a, h1, h2, h3, h4 {
font-family: 'Comic Sans MS', sans-serif !important;
} Enregistrez et quittez le fichier.
-
Ouvrez Firefox et accédez à une page pour l'essayer. Si vous définissez les règles utilisées dans cet exemple, le site devrait avoir une mauvaise apparence.
Utiliser les extensions Chrome avec Google Chrome
Google Chrome ne prend pas en charge les feuilles de style utilisateur et ne l'a jamais fait. Chrome n'est pas fait pour ça. Une grande partie de cela vient du fait que Chrome a des origines plus modernes. L'autre élément est une différence de philosophie. Firefox a toujours été conçu avec le contrôle de l'utilisateur à l'esprit, tandis que Chrome était davantage un produit commercial détenu et contrôlé par Google. Ils ne se soucient vraiment pas du degré de contrôle que vous avez sur le navigateur.
Cependant, il existe des extensions Chrome qui vous permettent d'implémenter des feuilles de style utilisateur pour personnaliser votre expérience de navigation. Ce guide utilise l'extension Élégant pour activer les feuilles de style utilisateur dans Chrome.
Ouvrez Chrome.
-
Sélectionnez le trois points empilés icône de menu dans le coin supérieur gauche de l'écran. Aller vers Plus d'outils > Rallonges.
-
Dans l'onglet Extension Chrome, sélectionnez le ligne à trois piles icône de menu dans le coin supérieur gauche de l'écran. Un nouveau menu s'ouvre. Choisir Ouvrir le Chrome Web Store en bas.
-
Dans le Chrome Web Store, utilisez la recherche pour rechercher Élégant.
-
Élégant devrait être la première extension dans les résultats. Sélectionnez-le.
-
Sur la page Élégant, sélectionnez Ajouter à Chrome.
-
Une fenêtre contextuelle apparaît vous demandant de confirmer l'ajout de Elegant. Sélectionner Ajouter une extension.
-
Chrome affiche une page vous informant que Stylish est installé. À partir de là, vous pouvez accéder à n'importe quelle page ou fermer l'onglet.
-
Sélectionnez le pièce de puzzle l'icône des extensions dans le coin supérieur droit de la fenêtre Chrome. Choisir Élégant du menu.
-
Un nouveau menu Élégant s'ouvre. Sélectionnez le trois points empilés icône de menu dans le coin supérieur droit.
-
Dans le menu résultant, sélectionnez Créer un nouveau style.
Chrome ouvre un nouvel onglet pour votre style. Utilisez le champ dans le coin supérieur gauche pour lui donner un nom.
-
Créez une nouvelle règle pour votre style dans le corps principal de l'onglet à l'aide de CSS. Assurez-vous d'utiliser !important après chaque règle pour s'assurer que les règles remplacent le style existant du site.
corps, principal {
couleur d'arrière-plan: #FF00FF !important ;
} -
Sélectionner Sauvegarder sur la gauche pour enregistrer votre nouveau style. Vous devriez le voir appliqué immédiatement.
-
Accédez à un site pour tester votre nouvelle feuille de style. Élégant vous permet de contrôler les feuilles de style et de les appliquer de manière sélective aux sites de votre choix. Explorez les commandes de l'extension pour avoir une idée de la façon dont vous pouvez adopter une approche affinée des feuilles de style utilisateur.
