Comprendre CSS pour le style utilisateur dans un navigateur

13

Je souhaite apporter une modification spécifique à l'apparence d'un site spécifique dans mon navigateur Web. Ce site utilise CSS, donc je pense que ce que je dois faire est d'écrire une substitution CSS utilisateur (veuillez me corriger si c'est faux).

Mes navigateurs sont Firefox (pour lequel je pense que je devrais écrire quelque chose chrome/userContent.css) et Chrome ( User\ StyleSheets/Custom.css).

Le changement spécifique que je veux faire est de supprimer le motif de fond (points sombres) sur toutes les pages de /unix// . Mais plus généralement, apprenez-moi à pêcher: comment savoir quel paramètre changer et comment écrire ce changement dans un CSS utilisateur?

— Gilles 'SO- arrête d'être méchant'
source

15

Je ne peux parler qu'avec familiarité avec Firefox, car c'est mon navigateur principal. Je vais essayer de garder les choses générales ici pour répondre à votre demande "apprends-moi à pêcher". À cette fin, je vais inclure 2 exemples, le vôtre et un autre qui contient plus de leçons du monde réel. Tout d'abord, nous disposerons de quelques outils pour faciliter la création de CSS utilisateur.

Passez à la dernière version de Firefox. Certaines des versions récentes ont eu des extensions des outils d'inspecteur de site Web, vous en aurez donc besoin.
Facultatif: installez l' extension Firebug qui vous offre des outils d'inspection de site beaucoup plus puissants. (personnellement, je n'utilise pas Firebug pour créer des CSS utilisateur, mais j'inclus une mention ici par souci d'exhaustivité)
Installez l' extension Stylish . Il s'agit d'une extension centrée sur l'utilisateur CSS qui simplifie considérablement la création de CSS utilisateur.

Maintenant, pour écrire quelque chose. Vous devez avoir une connaissance de base du HTML et du CSS avant de continuer. W3Schools propose des didacticiels décents pour vous familiariser avec la structure et la syntaxe de base de HTML et CSS . Pour le bien de cette réponse, je vais inclure suffisamment d'informations pour, espérons-le, aider un débutant assez longtemps pour que l'exemple soit accompli.

Accédez à la page. (dans votre cas, /unix// )
Faites un clic droit sur l'élément que vous souhaitez manipuler. (à peu près n'importe où sur la page pour ce cas, car l'arrière-plan affecte toute la page)
Sélectionnez «Inspecter l'élément» dans le menu contextuel. Cela utilise les outils d'inspection intégrés de Firefox, je n'aborderai pas Firebug ici, mais il a des volets et des fonctionnalités similaires.
Cela ouvre des panneaux en bas et sur le côté de la fenêtre Firefox. En bas, vous voyez HTML. Sur la droite, vous voyez des règles CSS pour l'élément de page sélectionné (qui sera la chose sur laquelle vous avez cliqué avec le bouton droit). En bas, cliquez sur différents éléments pour naviguer. La page est organisée en une arborescence d'éléments et vous pouvez réduire ou développer chaque nœud de l'arborescence. Lorsque vous cliquez sur des éléments, l'élément sélectionné sera mis en surbrillance sur la page elle-même.
En général, à ce stade, vous voudrez inspecter l'élément que vous cherchez à manipuler, ainsi que ses éléments parents (les éléments qui contiennent cet élément dans l'arborescence). Identifiez l'élément que vous devrez réellement manipuler. Par exemple, si vous jouez avec les réponses sur cette page, vous finirez par commencer par l'élément <p> qui contient le texte d'une réponse, mais vous voulez inclure toutes les choses autour du texte, comme le haut / flèches de vote vers le bas, les informations de l'affiche, les liens de partage / modification / indicateur, etc. Ainsi, vous remontez quelques niveaux jusqu'à la balise <div> qui a un id de "réponse - ####" et une classe "répondre", car c'est l'élément qui contient tous les éléments de fenêtre d'une réponse. Cliquez dessus et vous verrez qu'une partie de la page Web sera mise en évidence. (Dans ce cas, l'arrière-plan de la page sera près du haut, dans la balise <body> . Faites défiler vers le haut du code HTML et cliquez sur la balise <body>.)
Ensuite, vous devez identifier les propriétés CSS de cet élément que vous voudrez manipuler. Regardez le CSS à droite et trouvez les propriétés que vous souhaitez modifier. Personnellement, je suis assez nouveau pour CSS, donc à ce stade, je vais souvent google 'css' + un nom de propriété pour en savoir plus sur la propriété et comment elle se comporte. Poursuivant mon exemple où nous examinons une réponse SE, disons que nous voulons modifier les marges autour de la réponse. Le fichier all.css a une propriété margin définie sur 0px, mais il y a clairement une marge autour de ces éléments. Certaines recherches sur Google m'apprennent à rechercher des propriétés de rembourrage, car celles-ci peuvent également affecter les marges autour d'un élément. Effectivement, il y a deux propriétés liées au rembourrage qui sont définies sur une réponse, padding-bottom et padding-top. (pour votre problème spécifique, vous recherchez une image d'arrière-plan, recherchez donc "arrière-plan" dans les propriétés CSS. Vous verrez une propriété "arrière-plan" vers le haut. Elle s'applique aux éléments de corps de cette page. Google " css background property " pour savoir comment cette propriété fonctionne, vous montre qu'elle peut contenir une couleur ou une URL vers une image, ainsi que divers modificateurs. Après avoir parcouru un peu pour découvrir comment fonctionne la propriété background-image , nous en voyons informations utiles, la valeur par défaut «aucune» . Nous voulons rétablir l'image d'arrière-plan à sa valeur par défaut, nous aurons donc besoin de ces informations.)
Nous utilisons maintenant Stylish. L'alternative sans style serait de modifier les fichiers que vous avez publiés dans votre réponse. Élégant nous permet de gérer facilement le CSS utilisateur de nombreux sites. Stylish ajoute une petite icône à votre fenêtre Firefox, cliquez dessus puis allez "Ecrire un nouveau style" -> "Pour" (ce site) .com ". Donnez un nom au style et éventuellement des tags. Vous pourrez alors pour distinguer ce style comme étant celui qui s'applique à Superuser.com ou Stackexchange.com etc. Cette fenêtre nous donne un modèle qui nous permet de modifier le CSS uniquement pour ce domaine. Si vous devez modifier le CSS pour une URL spécifique, vous pouvez le faire ou vous pouvez également obtenir un style vierge si vous souhaitez écrire du CSS qui s'applique à tous les sites, sélectionnez simplement l'entrée appropriée dans le menu élégant. Pour mon exemple de modification de réponse, vous '
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {

}
```
Tout ce qui est placé dans le bloc @ -moz-document ne s'appliquera qu'au domaine dans la parenthèse. Voir les éléments en gras ci-dessus. Pour modifier le remplissage des réponses, vous mettez à jour la zone de texte comme suit:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {
    .answer {
        padding-bottom:0px;
        padding-top:0px;
    }
}
```
Pour briser ce bas pour les personnes qui ne connaissent pas CSS, nous sélectionnant d' abord la classe (ergo un « » va au début. Si nous sélectionnons par ID, nous avait mis un « # » là - bas.) Réponse (donc «réponse»). Ensuite, nous ouvrons un bloc avec une accolade pour lister les propriétés de l'élément sélectionné que nous allons modifier. Tout d'abord, nous modifions padding-bottom et le définissons sur 0 pixels . Ensuite, nous faisons de même pour le rembourrage . Chaque propriété et valeur se termine par un point-virgule. Ensuite, nous fermons le bloc avec une accolade bouclée. (dans votre exemple Unix, vous feriez ceci:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none;
    }
}
```
Ici, vous travaillez sur le domaine unix.stackexchange.com. Nous sélectionnons l'élément "body" (lorsque la sélection de l'élément HTML est également un sélecteur CSS, pas besoin de #s ou .s ici). Nous ne définissons l'arrière-plan à aucun.)
J'attire votre attention sur les boutons en bas de la fenêtre d'édition de style élégant. "Aperçu" appliquera les modifications que vous avez saisies, afin que vous puissiez les voir en action. "Enregistrer" enregistrera les modifications. "Annuler" est assez évident. Pour à peu près tout changement de CSS utilisateur que vous faites, vous voudrez cliquer sur Aperçu pour voir si le changement a fonctionné comme vous le vouliez. Dans les deux exemples, vous verrez que cela n'a pas fonctionné. Il y a une raison importante à cela, que j'aborde maintenant.
Le CSS a une hiérarchie spécifique de priorités pour déterminer comment traiter le CSS utilisateur contre le CSS auteur contre le CSS navigateur. Normalement, nous avons du CSS pour une page écrite par l'auteur de la page, et qui contiendra des règles pour de nombreux éléments de cette page. Lorsqu'une règle n'est pas définie par l'auteur, mais se trouve dans votre CSS utilisateur, votre navigateur l'utilisera. Si aucun d'eux n'a de CSS défini pour cet élément, le navigateur utilise ses propres règles CSS par défaut sur cet élément. Il y a donc une hiérarchie de poids ici, auteur> utilisateur> navigateur. Si quelque chose est défini dans les trois, le CSS de poids supérieur l'emportera et son CSS prendra effet. Il existe un moyen d'obtenir un CSS de faible poids pour remplacer le CSS de poids plus élevé, et c'est en les désignant comme importants. Pour ce faire, incluez "! Important"
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none !important;
    }
}
```
Maintenant, cliquez à nouveau sur Aperçu et vous verrez que votre CSS utilisateur fonctionne. Cliquez sur Enregistrer et profitez.

Si vous utilisez Chrome, son inspecteur intégré est déjà très bon. Il existe également une extension élégante . Vous entrez les modifications CSS un peu différemment: sélectionnez «Gérer les styles installés» puis cliquez sur «Écrire un nouveau style», entrez les sites ou les modèles d'URL auxquels appliquer la publication en dessous de la zone de code, et entrez uniquement le CSS spécifique au domaine dans le « code ”, par exemple

body {
  background:none !important;
}

— Enthousiaste
source

2

Installez firebug pour identifier la propriété CSS appropriée, puis écrivez un script greasemonkey pour la remplacer.

— Benjamin Bannier
source

2

Utiliser greasemonkey pour hasarder une propriété css, c'est comme utiliser un marteau pour enfoncer une vis. Cela fonctionne mais ce n'est pas élégant et vous êtes plus susceptible de casser quelque chose en cours de route.

— Caleb

2

Vous faites ce que vous feriez si vous mettiez sur le site

foo.bar { background-pattern:none; }

puis ajouter

!important

avant le }. Voici un petit détail sur l'utilisation non-user-css qui l'explique toujours pour votre usage.

— tobylane
source