Comprensione dei CSS per lo styling degli utenti in un browser

13

Voglio apportare una modifica specifica all'aspetto di un sito specifico nel mio browser web. Questo sito utilizza CSS, quindi penso che ciò che dovrei fare è scrivere un override CSS utente (per favore correggimi se questo è sbagliato).

I miei browser sono Firefox (per cui penso che dovrei scrivere qualcosa chrome/userContent.css) e Chrome ( User\ StyleSheets/Custom.css).

La modifica specifica che voglio fare è rimuovere il motivo di sfondo (punti scuri) su tutte le pagine di https://unix.stackexchange.com/ . Ma più in generale, per favore insegnami come pescare: come faccio a sapere quale parametro modificare e come posso scrivere questa modifica in un css utente?

— Gilles
fonte

15

Posso solo parlare con familiarità con Firefox, poiché è il mio browser principale. Cercherò di mantenere le cose generali qui per soddisfare la tua richiesta "insegnami a pescare". A tal fine, includerò 2 esempi, i tuoi e un altro che contiene più lezioni del mondo reale. Innanzitutto, avremo alcuni strumenti per semplificare la creazione di CSS utente.

Aggiornamento all'ultima versione di Firefox. Alcune delle versioni recenti hanno avuto ampliamenti degli strumenti di ispezione del sito Web, quindi vorrai quelli.
Opzionale: installa l' estensione Firebug che ti offre strumenti molto più potenti di ispettore del sito. (personalmente, non uso Firebug per creare CSS utente, ma includo una menzione qui per completezza)
Installa l' estensione Stylish . Questa è un'estensione incentrata sul CSS dell'utente che semplifica notevolmente la creazione del CSS dell'utente.

Ora quindi, per scrivere davvero qualcosa. Dovresti avere una conoscenza di base di HTML e CSS prima di procedere. W3Schools ha tutorial decenti disponibili per familiarizzare con la struttura e la sintassi di base di HTML e CSS . Per ragioni di questa risposta, includerò informazioni sufficienti per aiutare, spero, un neofita abbastanza da ottenere l'esempio.

Vai alla pagina. (nel tuo caso, https://unix.stackexchange.com/ )
Fai clic destro sull'elemento che stai cercando di manipolare. (praticamente in qualsiasi punto della pagina per questo caso, poiché lo sfondo influenza l'intera pagina)
Seleziona "Ispeziona elemento" dal menu a comparsa. Questo utilizza gli strumenti di ispezione integrati di Firefox, non affronterò Firebug qui, ma ha pannelli e funzionalità simili.
Questo apre i pannelli nella parte inferiore e laterale della finestra di Firefox. In fondo, vedi HTML. A destra, vengono visualizzate le regole CSS per l'elemento della pagina selezionato (che sarà l'elemento su cui hai fatto clic con il pulsante destro del mouse). In basso, fai clic su diversi elementi per spostarti. La pagina è organizzata in un albero di elementi ed è possibile comprimere o espandere ciascun nodo nella struttura. Quando fai clic sugli elementi, l'elemento selezionato verrà evidenziato sulla pagina stessa.
In generale, a questo punto, ti consigliamo di ispezionare l'elemento che stai cercando di manipolare, insieme ai suoi elementi padre (gli elementi che contengono quell'elemento nell'albero). Identifica l'elemento che dovrai effettivamente manipolare. Ad esempio, se stai scherzando con le risposte in questa pagina, finiresti per iniziare con l'elemento <p> che contiene il testo di una risposta, ma vuoi includere tutte le cose intorno al testo, come il / frecce di voto in basso, le informazioni del poster, i collegamenti di condivisione / modifica / bandiera, ecc. Quindi si sale di un paio di livelli fino al tag <div> che ha un ID di "risposta - ####" e una classe di "risposta", poiché quello è l'elemento che contiene tutti gli elementi di rivestimento di una risposta. Cliccaci sopra e vedrai che parte della pagina web viene evidenziata. (In questo caso, lo sfondo della pagina sarà vicino alla parte superiore, all'interno del tag <body> . Scorri verso l'alto nella parte superiore del codice HTML e fai clic sul tag <body>.)
Successivamente, è necessario identificare le proprietà CSS di questo elemento che si desidera manipolare. Guarda il CSS sulla destra e trova le proprietà che vuoi modificare. Personalmente, sono abbastanza nuovo per CSS, quindi a questo punto, spesso google 'css' + un nome di proprietà per saperne di più sulla proprietà e su come si comporta. Continuando il mio esempio in cui stiamo esaminando una risposta SE, supponiamo di voler modificare i margini intorno alla risposta. Il file all.css ha una proprietà margin impostata su 0px, ma chiaramente c'è un margine attorno a questi elementi. Alcuni googling mi insegnano a cercare le proprietà di imbottitura, in quanto queste possono anche influenzare i margini attorno a un oggetto. Abbastanza sicuro, ci sono due proprietà legate al padding che sono impostate su una risposta, padding-bottom e padding-top. (per il tuo problema specifico, stai cercando un'immagine di sfondo, quindi cerca "sfondo" nelle proprietà CSS. Vedrai una proprietà "sfondo" nella parte superiore. Si applica agli elementi del corpo di quella pagina. Googling " css proprietà di sfondo " per sapere come funziona quella proprietà, mostra che può contenere un colore o un URL a un'immagine, insieme a vari modificatori. Dopo aver esplorato un po 'per capire come funziona la proprietà dell'immagine di sfondo , vediamo alcuni informazioni utili, il valore predefinito "nessuna" . Vogliamo ripristinare l'immagine di sfondo al valore predefinito, quindi avremo bisogno di tali informazioni.)
Ora usiamo Stylish. L'alternativa senza Stylish sarebbe quella di modificare i file che hai pubblicato nella tua risposta. Stylish ci consente di gestire facilmente i CSS degli utenti di molti siti. Stylish aggiunge una piccola icona alla finestra di Firefox, fai clic su di essa, quindi seleziona "Scrivi un nuovo stile" -> "Per" (questo sito) .com ". Assegna allo stile un nome e, facoltativamente, alcuni tag. Potrai quindi per distinguere questo stile come quello che si applica a Superuser.com o Stackexchange.com ecc. Questa finestra ci fornisce un modello che ci consente di modificare il CSS solo per questo dominio. Se devi modificare il CSS per un URL specifico, devi puoi farlo o potresti anche ottenere uno stile vuoto se desideri scrivere CSS che si applica a tutti i siti, seleziona semplicemente la voce appropriata dal menu Elegante. Per il mio esempio di modifica della risposta, "
```
@namespace url(http://www.w3.org/1999/xhtml);

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

}
```
Tutto ciò che viene inserito nel blocco @ -moz-document verrà applicato solo al dominio tra parentesi. Vedi gli elementi in grassetto sopra. Per modificare il riempimento per le risposte, aggiorna la casella di testo in questo modo:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {
    .answer {
        padding-bottom:0px;
        padding-top:0px;
    }
}
```
Per rompere questo giù per le persone che non conoscono i CSS, stiamo selezionando prima classe (ergo un "" va alla partenza. Se fossimo Selezione per ID, avremmo messo un '#' c'è.) Risposta (così 'rispondi'). Quindi apriamo un blocco con una parentesi graffa per elencare le proprietà dell'elemento selezionato che altereremo. Innanzitutto stiamo modificando il padding-bottom e impostandolo su 0 pixel . Quindi facciamo lo stesso per il padding-top . Ogni proprietà e valore termina con un punto e virgola. Quindi chiudiamo il blocco con una parentesi graffa. (nel tuo esempio unix, faresti questo:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none;
    }
}
```
Qui stai lavorando sul dominio unix.stackexchange.com. Stiamo selezionando l'elemento "body" (quando si seleziona l'elemento HTML è anche un selettore CSS, qui non sono necessari # o .s). Non impostiamo lo sfondo su nessuno.)
Attiro la tua attenzione sui pulsanti nella parte inferiore della finestra di modifica dello stile. "Anteprima" attiverà le modifiche digitate, in modo da poterle vedere in azione. "Salva" salverà le modifiche. "Annulla" è abbastanza ovvio. Per praticamente qualsiasi utente CSS che stai modificando, ti consigliamo di fare clic su Anteprima per vedere se la modifica ha funzionato nel modo desiderato. In entrambi gli esempi, vedrai che non ha funzionato. C'è un motivo importante per questo, che ora affronterò.
Il CSS ha una gerarchia specifica di priorità per determinare come gestire i CSS degli utenti rispetto ai CSS degli autori rispetto ai CSS del browser. Normalmente, abbiamo CSS per una pagina che è stata scritta dall'autore della pagina e che conterrà regole per molti degli elementi di quella pagina. Quando una regola non è definita dall'autore, ma è nel tuo CSS utente, allora il tuo browser la utilizzerà. Se nessuno di essi ha definito CSS per quell'elemento, il browser utilizza le proprie regole CSS predefinite su quell'elemento. Quindi c'è una gerarchia di peso qui, autore> utente> browser. Se qualcosa è definito in tutti e tre, allora il CSS di peso maggiore vincerà e avrà effetto il suo CSS. C'è un modo per ottenere CSS di peso inferiore per sovrascrivere i CSS di peso maggiore, e questo è designarli come importanti. Puoi farlo includendo "! Important"
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none !important;
    }
}
```
Ora fai di nuovo clic su Anteprima e vedrai che il tuo CSS utente funziona. Fai clic su Salva e divertiti.

Se stai utilizzando Chrome, la sua finestra di ispezione integrata è già molto buona. C'è anche un'estensione elegante . Immetti le modifiche CSS in modo leggermente diverso: seleziona "Gestisci stili installati", quindi fai clic su "Scrivi nuovo stile", inserisci i siti o i pattern URL per applicare il post sotto la casella del codice e inserisci solo i CSS specifici del dominio nella sezione " codice ", ad es

body {
  background:none !important;
}

— Acuto
fonte

2

Installa firebug per identificare la proprietà CSS pertinente e quindi scrivi uno script greasemonkey per sovrascriverlo.

— Benjamin Bannier
fonte

2

Usare greasemonkey per caso una proprietà CSS è come usare un martello per guidare in una vite. Funziona ma non è elegante e hai maggiori probabilità di rompere qualcosa lungo il percorso.

— Caleb,

2

Fai quello che faresti se stessi inserendo il sito

foo.bar { background-pattern:none; }

quindi aggiungere

!important

prima del }. Ecco un piccolo dettaglio sull'uso dei non-css che lo spiega ancora per il tuo uso.

— tobylane
fonte