CSS predefinito del browser per elementi HTML


146

Dove posso trovare i CSS predefiniti di un browser per gli elementi HTML?

Molti elementi HTML sono dotati di alcune proprietà CSS predefinite che a volte possono comportare comportamenti sconosciuti / indesiderati. Ad esempio, le caselle di input vengono visualizzate in modo diverso nei diversi browser. Sto cercando un posto che copra le nuove proprietà CSS3 e i nuovi elementi HTML5.

Ho visto in altre (molto più vecchie) domande (come i fogli di stile CSS predefiniti dei browser ) che suggeriscono una soluzione di ripristino CSS. A volte questa soluzione non è desiderata, spesso vorrei effettivamente mantenere alcune delle proprietà di base (come l'evidenziazione delle caselle di input in Chrome). In altre parole: non voglio liberarmi delle cose solo perché non so cosa facciano .

Quindi, c'è un sito che può darmi tutte queste informazioni (o forse la maggior parte)?


3
Non è un sito, ma negli strumenti Chrome Devleoper mostra le regole CSS ereditate e quelle contrassegnate come "foglio di stile dell'agente utente" mostreranno quelle di Chrome. Mi dispiace non potrei essere più di aiuto. anche: dowe websiteneedtolookexactlythesameineverybrowser.com
James Khoury,

2
Ottima domanda! Sono d'accordo, ci deve essere un posto dove tutte queste informazioni sono disponibili.

Solo una nota, il reset.css non ferma le cose di base. Le caselle di input verranno comunque evidenziate in Chrome. Perderai semplicemente le differenze casuali di riempimento tra i browser. Quindi puoi iniziare con lo stesso comportamento in tutti i browser (riempimento / margine / ... saggio).
Jules,

1
@James Khoury - Anche per Firebug.
Rob,

@Rob ovviamente! Mi sono dimenticato di Firebug
James Khoury il

Risposte:


93

Un repository GitHub di tutte le specifiche HTML W3C e i fogli di stile CSS predefiniti del fornitore è disponibile qui

1. Stili predefiniti per Firefox

2. Stili predefiniti per Internet Explorer

3. Stili predefiniti per Chrome / Webkit

4. Stili predefiniti per Opera

5. Stili predefiniti per HTML4 (specifiche W3C)

6. Stili predefiniti per HTML5 (specifiche W3C)

Esempio, secondo le specifiche HTML4 W3C predefinite:

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

In una nota a margine, è interessante vedere cose come il famigerato nobrtag nel foglio di stile HTML5 del W3C.
tomasz86,

ancora aggiornato?
Webwoman il

Il collegamento per Firefox non contiene tutti i valori predefiniti. Ad esempio, non contiene i CSS predefiniti per textarea. Puoi trovarlo nella risorsa: //gre-resources/forms.css. In generale, sfoglia i file in resource: // gre-resources per trovare tutte le informazioni predefinite. O per tutti i browser, consultare html.spec.whatwg.org/multipage/rendering.html .
David Spector,

117

È diverso per ogni browser, quindi:

Puoi anche guardare il foglio di stile HTML5 Boilerplate , che "normalizza la visualizzazione di molte cose senza essere ripristinato in senso tradizionale". Risolve anche alcuni bug / incongruenze.

Vale anche la pena consultare: https://github.com/necolas/normalize.css/blob/master/normalize.css


2
Il che, stranamente, è per lo più la stessa cosa a cui mi sono collegato nella mia risposta alla domanda collegata sopra che è, apparentemente, "fuori moda". Anche se ho aggiunto solo il link IE a quello 2 giorni fa.
robertc,

1
@nayish Che altro pensi ci sia oltre alle impostazioni predefinite del browser?
robertc,

1
@nayish Non esiste una definizione separata del CSS predefinito per gli elementi HTML al di fuori di ciò che i browser hanno implementato nei loro fogli di stile predefiniti
robertc,

1
@nayish Questo è specificato per ogni singola proprietà nelle specifiche , sebbene si noti che l'opacità non è ereditata in senso CSS
robertc,

2
Solo una nota, HTML5 boilerplate è molto più che normalizzare CSS. Per normalizzare i CSS usano lo strumento Normalizza: necolas.github.com/normalize.css
Aspettando Dev ...


0

Sebbene si tratti di un vecchio problema tra browser, poiché ogni browser ha il proprio rendering e comportamento con alcuni elementi html come elementi media e input, ora nel 2017 possiamo usare in modo abbastanza sicuro i filtri CSS propri su di essi.

Ciò consente di dare una tavolozza di colori con il filtro di rotazione della tonalità che renderà abbastanza bene i browser incrociati.

I seguenti frammenti mostrano un modo per usare un colore di tipo input per rendere questo effetto in tempo reale su un elemento video con javascript.

Per usare solo i CSS, è obbligatorio utilizzare ciascuno di questi filtri: seppia non a 0, saturazione elevata, scala di grigi a 0, contrasto elevato, quindi dare un colore con la proprietà hue-rotate, seguendo i miei test. Il filtro di inversione non è obbligatorio, ma sta dando alcuni effetti profondi.

Inoltre, il filtro ombra esterna funziona piuttosto bene tra i browser. Per essere usato in questo modo: filtro: drop-shadow (2px 20px 50px rosso) [X, Y, RADIUS, COLOR]

function styloElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  
  media.style.cssText += ";filter:sepia(100%) saturate(1000%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"

}
styloElem()
body {
  text-align:center;
  background:#001;
  color: white
}
video {
  width:500px;max-width:500px
}
Colors: 
<input 
       type="color"
       id="stylo"
       oninput="styloElem()"
       class="media"
       data-hue="0" />

<br><br> 

<video 
       controls
       id="media"        
       onplay="this.removeAttribute('controls');this.style.all='unset'"     
       onpause="this.controls='controls';styloElem()"
       src="https://ia600206.us.archive.org/7/items/MysteresDarchives-Saison04/1944%2c%20Dans%20le%20maquis%20du%20Vercors.ogv"></video>

Posso usare i filtri CSS:

http://caniuse.com/#feat=css-filters

Una barra degli strumenti che ho creato attorno ai filtri CSS, da dove provengono queste note:

https://github.com/webdev23/ponyFilters

Un esempio di codepen più completo:

http://codepen.io/Nico_KraZhtest/pen/bWExEB/


Sembra essere un po 'da parte, hai ragione! Questo è stato il mio duro lavoro a questa data. Dal momento che si tratta solo di CSS, questo non cambierà il comportamento degli elementi del browser, ma può dare un modo per rendere questo tipo di elementi con un colore / luminosità identici, in qualsiasi browser, senza scrivere un codice speciale per ciascuno di essi. Questo non era fattibile al momento della domanda. Grazie.
NVRM,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.