Grundlegendes zu CSS für das Stylen von Benutzern in einem Browser

13

Ich möchte eine bestimmte Änderung am Erscheinungsbild einer bestimmten Site in meinem Webbrowser vornehmen. Diese Seite verwendet CSS, daher denke ich, dass ich einen Benutzer-CSS-Override schreiben sollte (bitte korrigieren Sie mich, wenn dies falsch ist).

Meine Browser sind Firefox (für den ich denke, ich sollte etwas schreiben chrome/userContent.css) und Chrome ( User\ StyleSheets/Custom.css).

Die spezielle Änderung, die ich vornehmen möchte, besteht darin, das Hintergrundmuster (dunkle Punkte) auf allen Seiten von /unix// zu entfernen . Aber allgemeiner lehren Sie mich bitte, wie man fischt: Wie finde ich heraus, welche Parameter geändert werden müssen, und wie schreibe ich diese Änderung in eine Benutzer-CSS?

— Gilles 'SO - hör auf böse zu sein'
quelle

15

Ich kann nur mit Firefox vertraut sprechen, da dies mein Hauptbrowser ist. Ich werde versuchen, die Dinge hier allgemein zu halten, um Ihrer Bitte, mir das Fischen beizubringen, nachzukommen. Zu diesem Zweck füge ich zwei Beispiele hinzu, eines für Sie und eines für die Praxis. Zunächst erhalten wir einige Tools, die die Erstellung von Benutzer-CSS erleichtern.

Aktualisieren Sie auf den neuesten Firefox. Einige der jüngsten Versionen haben Erweiterungen der Tools für den Website-Inspektor.
Optional: Installieren Sie die Firebug-Erweiterung, mit der Sie leistungsfähigere Tools für Site Inspector erhalten. (Ich persönlich benutze Firebug nicht, um Benutzer-CSS zu erstellen, aber der Vollständigkeit halber erwähne ich dies hier)
Installieren Sie die Stylish-Erweiterung . Dies ist eine benutzer-CSS-zentrierte Erweiterung, die die Erstellung von Benutzer-CSS erheblich vereinfacht.

Nun dann, um tatsächlich etwas zu schreiben. Sie sollten mit HTML und CSS vertraut sein, bevor Sie fortfahren. W3Schools bietet anständige Tutorials, um sich mit der grundlegenden Struktur und Syntax von HTML und CSS vertraut zu machen . Um diese Antwort zu erhalten, werde ich genügend Informationen hinzufügen, um einem Neuling hoffentlich so weit zu helfen, dass das Beispiel ausgeführt wird.

Navigieren Sie zu der Seite. (in Ihrem Fall /unix// )
Klicken Sie mit der rechten Maustaste auf das Element, das Sie bearbeiten möchten. (In diesem Fall fast überall auf der Seite, da der Hintergrund die gesamte Seite betrifft)
Wählen Sie im Popup-Menü die Option "Inspect Element". Hierfür werden die in Firefox integrierten Inspektionstools verwendet. Ich werde hier nicht auf Firebug eingehen, aber es gibt ähnliche Fenster und Funktionen.
Dadurch werden Bedienfelder am unteren und seitlichen Rand des Firefox-Fensters geöffnet. Unten sehen Sie HTML. Rechts sehen Sie CSS-Regeln für das ausgewählte Seitenelement (auf das Sie mit der rechten Maustaste geklickt haben). Klicken Sie unten auf verschiedene Elemente, um darin zu navigieren. Die Seite ist in einer Baumstruktur aus Elementen organisiert, und Sie können jeden Knoten in der Baumstruktur reduzieren oder erweitern. Wenn Sie auf Elemente klicken, wird das ausgewählte Element auf der Seite selbst hervorgehoben.
Im Allgemeinen sollten Sie an dieser Stelle das Element, das Sie bearbeiten möchten, zusammen mit den übergeordneten Elementen (den Elementen, die dieses Element in der Baumstruktur enthalten) untersuchen. Identifizieren Sie das Element, das Sie tatsächlich bearbeiten müssen. Wenn Sie beispielsweise mit den Antworten auf dieser Seite herumspielen, beginnen Sie am Ende mit dem <p> -Element, das den Text einer Antwort enthält, aber Sie möchten alle Elemente, die sich um den Text befinden, wie z / Abwärtspfeile, Informationen zum Poster, Links zum Teilen / Bearbeiten / Markieren usw. Navigieren Sie also ein paar Ebenen nach oben zum <div> -Tag mit der ID "answer - ####" und der Klasse von "Antworten", da dies das Element ist, das alle Fensterelemente einer Antwort enthält. Klicken Sie darauf und Sie werden sehen, dass ein Teil der Webseite hervorgehoben wird. (In diesem Fall befindet sich der Hintergrund der Seite im <body> -Tag ganz oben . Scrollen Sie zum oberen Rand des HTML-Codes und klicken Sie auf das <body> -Tag.)
Als Nächstes müssen Sie die CSS-Eigenschaften dieses Elements identifizieren, die Sie bearbeiten möchten. Schauen Sie sich das CSS auf der rechten Seite an und suchen Sie die Eigenschaften, die Sie ändern möchten. Persönlich bin ich ziemlich neu in CSS, daher gehe ich an dieser Stelle häufig auf Google 'css' + einen Eigenschaftsnamen, um mehr über die Eigenschaft und ihr Verhalten zu erfahren. Setzen wir mein Beispiel fort, in dem wir eine SE-Antwort betrachten, und nehmen wir an, wir möchten die Ränder um die Antwort ändern. In der Datei all.css ist die Eigenschaft margin auf 0px festgelegt, aber diese Elemente sind eindeutig mit einem Rand versehen. Durch ein wenig googeln lerne ich, nach Polstereigenschaften zu suchen, da diese sich auch auf die Ränder um ein Element auswirken können. Sicher genug, es gibt zwei Eigenschaften in Bezug auf das Auffüllen, die für eine Antwort festgelegt werden: Auffüllen unten und Auffüllen oben. (Für Ihr spezielles Problem suchen Sie nach einem Hintergrundbild. Suchen Sie in den CSS-Eigenschaften nach "Hintergrund". Oben sehen Sie eine "Hintergrund" -Eigenschaft . Sie gilt für die Hauptteilelemente dieser Seite. Googeln " CSS Eigenschaft background“ zu lernen , wie diese Eigenschaft funktioniert, zeigen Ihnen , dass es eine Farbe oder eine URL zu einem Bild zusammen mit verschiedenen Modifikatoren enthält. nach einem wenig Navigation zu graben , wie die Hintergrundbild Eigenschaft funktioniert, sehen wir einige nützliche Informationen, der Standardwert von 'none' . Wir möchten das Hintergrundbild auf den Standardwert zurücksetzen, daher benötigen wir diese Informationen.)
Jetzt benutzen wir Stylish. Die Alternative ohne Stylish wäre, die Dateien zu bearbeiten, die Sie in Ihrer Antwort gepostet haben. Mit Stylish können wir das Benutzer-CSS vieler Websites einfach verwalten. Stylish fügt Ihrem Firefox-Fenster ein kleines Symbol hinzu, klicken Sie darauf und wählen Sie "Neuen Stil schreiben" -> "Für" (diese Site) .com ". Geben Sie dem Stil einen Namen und optional einige Tags um diesen Stil als den zu kennzeichnen, der für Superuser.com oder Stackexchange.com usw. gilt. In diesem Fenster können Sie das CSS nur für diese Domain ändern. Wenn Sie das CSS für eine bestimmte URL ändern müssen, müssen Sie Wenn Sie CSS für alle Websites schreiben möchten, wählen Sie einfach den entsprechenden Eintrag aus dem Menü "Stilvoll" aus.
```
@namespace url(http://www.w3.org/1999/xhtml);

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

}
```
Alles, was in den @ -moz-document-Block eingefügt wird, gilt nur für die Domain in der Klammer. Siehe die fettgedruckten Punkte oben. Um die Auffüllung für die Antworten zu ändern, aktualisieren Sie das Textfeld folgendermaßen:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {
    .answer {
        padding-bottom:0px;
        padding-top:0px;
    }
}
```
Diese nach unten für die Menschen zu brechen , die CSS nicht wissen, sind wir zunächst die Auswahl der Klasse (ergo ein „“ geht an den Start. Wenn wir von ID auswählten, würden wir ein ‚#‘ dort setzen.) Antwort (also 'antworte'). Dann öffnen wir einen Block mit einer geschweiften Klammer, um die Eigenschaften des ausgewählten Elements aufzulisten, das wir ändern werden. Zuerst ändern wir den Padding-Bottom und setzen ihn auf 0 Pixel . Dann machen wir dasselbe für die Polsterung . Jede Eigenschaft und jeder Wert wird mit einem Semikolon abgeschlossen. Dann schließen wir den Block mit einer geschweiften Klammer. (In Ihrem Unix-Beispiel würden Sie dies tun:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none;
    }
}
```
Hier arbeiten Sie an der Domain unix.stackexchange.com. Wir wählen das "body" -Element aus (bei Auswahl von HTML-Element handelt es sich auch um einen CSS-Selektor, hier werden keine #s oder .s benötigt). Wir setzen den Hintergrund auf none.)
Ich mache Sie auf die Schaltflächen am unteren Rand des Fensters für die Stilbearbeitung aufmerksam. "Vorschau" übernimmt die von Ihnen eingegebenen Änderungen, sodass Sie sie in Aktion sehen können. "Speichern" speichert die Änderungen. "Abbrechen" ist ziemlich offensichtlich. Wenn Sie so ziemlich alle CSS-Änderungen von Benutzern vornehmen, sollten Sie auf Vorschau klicken, um zu prüfen, ob die Änderung so funktioniert hat, wie Sie es wollten. In beiden Beispielen werden Sie feststellen, dass es nicht funktioniert hat. Dafür gibt es einen wichtigen Grund, den ich jetzt anspreche.
CSS hat eine bestimmte Prioritätenhierarchie, um zu bestimmen, wie mit Benutzer-CSS im Vergleich zu Autoren-CSS im Vergleich zu Browser-CSS umgegangen wird. Normalerweise haben wir CSS für eine Seite, die vom Autor der Seite geschrieben wurde und Regeln für viele Elemente auf dieser Seite enthält. Wenn eine Regel nicht vom Autor definiert ist, sondern in Ihrem Benutzer-CSS enthalten ist, wird dies von Ihrem Browser verwendet. Wenn für keines der beiden Elemente CSS definiert ist, verwendet der Browser seine eigenen Standard-CSS-Regeln für dieses Element. Hier gibt es also eine Hierarchie der Gewichtung: Autor> Benutzer> Browser. Wenn in allen dreien etwas definiert ist, gewinnt das höherwertige CSS und sein CSS wird wirksam. Es gibt eine Möglichkeit, CSS mit niedrigerem Gewicht zu verwenden, um das CSS mit höherem Gewicht zu überschreiben, und dies geschieht, indem Sie sie als wichtig kennzeichnen. Sie tun dies, indem Sie "! Wichtig" einfügen.
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none !important;
    }
}
```
Klicken Sie nun erneut auf Vorschau, und Sie werden sehen, dass Ihr Benutzer-CSS funktioniert. Klicken Sie auf Speichern und genießen.

Wenn Sie Chrome verwenden, ist der integrierte Inspektor bereits sehr gut. Es gibt auch eine stilvolle Erweiterung . Sie geben die CSS-Änderungen etwas anders ein: Wählen Sie „Installierte Stile verwalten“ und klicken Sie dann auf „Neuen Stil schreiben“, geben Sie die Sites oder URL-Muster ein, auf die der Beitrag unter dem Code-Feld angewendet werden soll, und geben Sie nur das domänenspezifische CSS in das Feld „ Code ”-Feld, z

body {
  background:none !important;
}

— Daran interessiert
quelle

2

Installieren Sie den Firebug , um die relevante CSS-Eigenschaft zu identifizieren, und schreiben Sie dann ein greasemonkey- Skript, um es zu überschreiben.

— Benjamin Bannier
quelle

2

Die Verwendung von greasemonkey, um eine CSS-Eigenschaft zufällig zu machen, entspricht der Verwendung eines Hammers zum Einschlagen einer Schraube. Es funktioniert, aber es ist nicht elegant und es ist wahrscheinlicher, dass Sie etwas auf dem Weg brechen.

— Caleb

2

Sie tun, was Sie tun würden, wenn Sie die Site betreten würden

foo.bar { background-pattern:none; }

dann füge hinzu

!important

vor dem }. Im Folgenden finden Sie ein kleines Detail zur Verwendung von Nichtbenutzer-CSS, das die Verwendung noch erläutert.

— Tobylane
quelle