Che cos’è il foglio di stile user-agent

Sto lavorando a 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. Sugli 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; } 

La font-size del carattere di questi nuovi stili disturba il mio design. C’è un modo per forzare i miei fogli di stile e, se ansible, sovrascrivere completamente il foglio di stile predefinito di Chrome?

Qual è il browser di destinazione? Browser diversi impostano regole CSS predefinite diverse. Prova a includere un file reset.css o normalise.css (Google per uno o per “reset vs normalizza” per vedere le differenze) per rimuovere tali valori predefiniti.

Per quanto riguarda il concetto di “foglio di stile user-agent”, consultare la sezione Cascade nelle specifiche CSS 2.1.

I fogli di stile di un agente utente vengono sostituiti da qualsiasi elemento 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 ancora rendere il contenuto in qualche modo , e il foglio di stile del programma utente lo descrive.

Quindi, se pensi di avere un problema con un foglio di stile user-agent, allora hai davvero un problema con il tuo markup, o il tuo foglio di stile, o entrambi (su cui non hai scritto nulla).

Se è presente nel tuo html, potresti provare che il browser preferisce il “foglio di stile utente” sul foglio di stile personalizzato. L’aggiunta del doctype risolve questo problema.

Contrassegnare il documento come HTML5 con il doctype appropriato sulla prima riga, risolto il problema.

  ... 

In sostanza, un foglio di stile predefinito fornito dal browser. Dallo spec …

Il foglio di stile predefinito di un agente utente deve presentare gli elementi del linguaggio del documento in modo da soddisfare le aspettative generali di presentazione per il linguaggio del documento. ~ The Cascade .

Inoltre, per ulteriori dettagli su user-agent in generale …

https://www.w3.org/TR/UAAG20/#def-user-agent

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

Alcuni browser usano il proprio modo per leggere i file .css. Quindi, il modo giusto per superare questo: se si digita 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 non è in grado di leggere i comandi dal file .css. Ricorda che i comandi scritti nel file .html sono più forti del comando in .css.

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 sostituiscono quelli predefiniti. Poiché non hai specificato i valori per la casella dell’elemento della tabella, sono stati applicati gli stili predefiniti

inserisci il seguente codice nel tuo file CSS

 table { font-size: inherit; }