Che cos'è un foglio di stile dell'agente utente?

500

Sto lavorando su una pagina Web in Google Chrome. Viene visualizzato correttamente con i seguenti stili.

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

È importante notare che non ho definito questi stili. Negli strumenti di sviluppo di Chrome, indica il foglio di stile dell'agente utente al posto del nome del file CSS.

Ora se invio un modulo e si verifica un errore di convalida, ottengo il seguente foglio di stile:

table {
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-variant: normal;
    font-style: normal;
    color: -webkit-text;
    text-align: -webkit-auto;
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

Il font-sizeda questi nuovi stili sta disturbando il mio design. Esiste un modo per forzare i miei fogli di stile e, se possibile, sovrascrivere completamente il foglio di stile predefinito di Chrome?

css google-chrome

— Kapil Sharma
fonte

2

chrome: come disattivare le impostazioni del foglio di stile dell'agente utente?

— givanse

7

Nota anche che su Chrome (51) ottieni solo quelle due voci della tabella quando non hai una dichiarazione doctype. Altrimenti, ottieni solo il secondo.

— John,

Svuota la cache di Chrome in più strumenti -> Cancella dati di navigazione

— doford

2

Post correlato qui . Comprendere come il foglio di stile user-agent (o browser) è diverso dai fogli di stile utente e autore aiuterà a concettualizzare le cose facilmente.

— RBT

251

Quali sono i browser target? Browser diversi impostano regole CSS predefinite diverse. Prova a includere un ripristino CSS, come il ripristino CSS meyerweb o normalize.css , per rimuovere tali valori predefiniti. Google "CSS reset vs normalize" per vedere le differenze.

— Oliver Millington
fonte

19

Ho sempre ripristinato / normalizzato il mio CSS prima di ogni progetto, in questo modo hai un campo di livello "quasi" tra i browser. Non ho mai sentito parlare di un "effetto collaterale" negativo in quanto tale, sono sicuro che se dai una rapida occhiata a Google scoprirai che è raccomandato.

— Oliver Millington,

2

Il ripristino degli stili può causare strani risultati con i campi modulo, in particolare attorno ai bordi dei campi o elementi multi-parte come type = "file".

— Tratta bene le tue mod il

7

Anche se il ripristino / normalizzazione potrebbe essere d'aiuto, in realtà non risponde alla domanda, perché il foglio di stile dell'agente utente sta cambiando? Ho lo stesso problema in cui gli stili UA diventano diversi per le pagine pre-renderizzate che utilizzo per SEO. Qualche idea sul perché cambia?

— Yaron

5

Guarda cosa Chrome imposta di default sulla pagina web: trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

— Santosh Kumar

10

Questa non è una risposta ... L'aggiunta <!DOCTYPE>è corretta di @Sebas

— Amit Shah

141

Se <!DOCTYPE>manca il contenuto HTML, è possibile che il browser dia la preferenza al "foglio di stile dell'agente utente" rispetto al foglio di stile personalizzato. L'aggiunta del doctype risolve questo problema.

— Jesper Mygind
fonte

6

È un ottimo suggerimento. Mi hai risparmiato un po 'di tempo per la ricerca. Vale la pena notare che nel mio caso avevo quella dichiarazione doctype ma prima avevo una sceneggiatura. Sembra che DOCTYPE debba accadere per prima cosa nella pagina per essere presa in considerazione.

— Sebas,

3

L'aggiunta di <! DOCTYPE> ha risolto un problema di allineamento verticale tr / td molto strano che avevo. Grazie per questa risposta

— Ralph Tee,

3

Questo è pignolo, ma <! DOCTYPE html> ha risolto il problema per me.

— Steve Zelaznik,

8

Avevo <! DOCTYPE html> abilitato ma dovevo ancora normalizzare.

— Antikbd,

1

@ChrisMorgan citando dalla specifica a cui è stato collegato: "I DOCTYPE sono necessari per motivi legacy. Se omessi, i browser tendono a utilizzare una modalità di rendering diversa che è incompatibile con alcune specifiche. Includere il DOCTYPE in un documento garantisce che il browser esegua un tentativo di seguire le specifiche pertinenti ". In un mondo ideale DOCTYPE non sarebbe necessario. Ma affermare che la risposta è "semplicemente non vera" è abbastanza audace, secondo me, in particolare il numero di voti.

— Jesper Mygind,

104

Per quanto riguarda il concetto di "foglio di stile dell'agente utente", consultare la sezione Cascade nelle specifiche CSS 2.1.

I fogli di stile dell'agente utente vengono sovrascritti da tutto ciò che viene impostato nel proprio foglio di stile. Sono solo il fondo: in assenza di fogli di stile forniti dalla pagina o dall'utente, il browser deve comunque renderizzare il contenuto in qualche modo e il foglio di stile dell'agente utente lo descrive.

Quindi, se pensi di avere un problema con un foglio di stile dell'agente utente, allora hai davvero un problema con il tuo markup, il tuo foglio di stile o entrambi (di cui non hai scritto nulla).

— Jukka K. Korpela
fonte

@givanse, no, vedi gli effetti del foglio di stile dell'agente utente quando non li sostituisci e il markup di esempio non fa eccezione. Sarà analizzato come un lielemento contenente due ulelementi con solo contenuto di testo; sono disegnati dal foglio di stile dell'agente utente, ma questo stile può essere ignorato. (Se il markup non è valido dipende dal contesto e dalla versione HTML; ma ciò non influisce sullo stile.)

— Jukka K. Korpela,

@givanse, quel problema non è rilevante per la domanda "che cos'è un foglio di stile utente". Se ritieni che il problema sia importante, pubblicalo come una nuova domanda, con dettagli sufficienti. Ma il proiettile nel tuo jsfiddle è semplice un proiettile per l' lielemento e il tuo foglio di stile non lo ignora.

— Jukka K. Korpela,

47

Contrassegnare il documento come HTML5 con il doctype corretto nella prima riga, risolto il mio problema.

<!DOCTYPE html>
<html>...

— Daniel
fonte

8

Puoi spiegare come dovrebbe funzionare esattamente? Come HTML 5 è associato a stili indefiniti? Confermo, ma hai qualche violino pronto per confermarlo?

— Kapil Sharma,

28

Un foglio di stile agente utente è un "foglio di stile predefinito" fornito dal browser (ad es. Chrome, Firefox, Edge, ecc.) Al fine di presentare la pagina in modo tale da soddisfare "le aspettative generali di presentazione". Ad esempio, un foglio di stile predefinito fornirebbe stili di base per elementi quali dimensioni del carattere, bordi e spaziatura tra gli elementi. È comune utilizzare un ripristino foglio di stile di per gestire le incoerenze tra i browser.

Dalla specifica ...

Il foglio di stile predefinito di un programma utente dovrebbe presentare gli elementi del linguaggio del documento in modo tale da soddisfare le aspettative generali di presentazione del linguaggio del documento. ~ The Cascade .

Per ulteriori informazioni sugli user agent in generale, consultare user agent .

— Kenneth Stoddard
fonte

15

Rispondendo alla domanda nel titolo, qual è il foglio di stile dell'agente utente, l'insieme di stili predefiniti nel browser: Eccone alcuni (e quelli più rilevanti anche nel web di oggi):

Gecko (Firefox): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
Chromium (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Opinione personale: non combattere con loro. Hanno buoni valori predefiniti, ad esempio, nei casi rtl / bidi e sono coerenti al giorno d'oggi. Ripristina ciò che ritieni irrilevante per te, non tutti in una volta.

— Ebrahim Byagowi
fonte

12

Definisci i valori che non desideri vengano utilizzati dallo stile dell'agente utente di Chrome nel tuo contenuto CSS.

— BenM
fonte

4

Alcuni browser usano il loro modo di leggere i file .css. Quindi il modo giusto per battere questo: se digiti la riga di comando direttamente nel codice sorgente .html, questo batte il file .css, in questo modo, hai detto direttamente al browser cosa fare e il browser è nella posizione di non leggere i comandi dal file .css. Ricorda che i comandi scritti nel file .html sono più forti del comando nel .css.

— rollin_jeksun
fonte

1

Ho avuto lo stesso problema di uno dei miei <div> aveva il margine impostato dal browser. È stato piuttosto fastidioso, ma poi ho capito come diceva la maggior parte delle persone, è un errore di markup.

Sono tornato indietro e ho controllato la mia sezione <head> e il mio collegamento CSS era come di seguito:

<link rel="stylesheet" href="ex.css">

L'ho incluso typee reso come di seguito:

<link rel="stylesheet" type="text/css" href="ex.css">

Il mio problema è stato risolto

— Appy Sharma
fonte

0

Ogni browser fornisce un foglio di stile predefinito, chiamato foglio di stile dell'agente utente, nel caso in cui un file HTML non ne specifichi uno. Gli stili specificati sovrascrivono i valori predefiniti.

Poiché non sono stati specificati valori per la casella dell'elemento tabella, sono stati applicati gli stili predefiniti.

— firstpostcommenter
fonte

0

Volevo solo espandere la risposta di @BenM in base a ciò che ho letto qui da Ire Aderinokun. Poiché il foglio di stile dell'agente utente fornisce uno stile predefinito utile, pensaci due volte prima di sovrascriverlo.

Ho avuto un errore stupido in cui un elemento pulsante non sembrava giusto in Chrome. Lo avevo parzialmente disegnato perché non volevo che sembrasse un pulsante tradizionale. Tuttavia, ho lasciato fuori elementi di stile come il bordo, il colore del bordo, ecc. Quindi Chrome stava intervenendo per fornire le parti che pensavo mi mancassero.

Il problema è scomparso dopo aver aggiunto stili come border: none, ecc.

Quindi, se qualcun altro sta riscontrando questo problema, assicurati di sovrascrivere esplicitamente tutti gli stili utente-agente predefiniti applicabili per un elemento se noti che sembra instabile, specialmente se non vuoi ripristinare completamente gli stili dell'agente utente. Ha funzionato per me.

— Brent Miller
fonte

Questo non dovrebbe essere un commento invece di una risposta?

— Peter Mortensen,

@PeterMortensen sì, ma non posso lasciare commenti - non abbastanza reputazione.

— Brent Miller,

-1

Ho una soluzione Verificare questo:

Errore

<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">

Corretta

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">

— Vinkal Chandel
fonte

2

Modifica per spiegare come funziona e perché aiuta.

— Yunnosch,

-6

Inserisci il seguente codice nel tuo file CSS:

table {
    font-size: inherit;
}

— Srikanth
fonte

2

Questo in realtà non aggiunge nulla di nuovo a questo post. C'è già una risposta accettata, così come altre 5 risposte, quindi per favore non pubblicare risposte in ritardo.

— Kaspar Lee,