Quale HTML5 reimposta CSS usi e perché? Ce n'è uno che hai trovato per coprire più casi?
Ho iniziato a usare HTML5 Doctor's: http://html5doctor.com/html-5-reset-stylesheet/ Sembra funzionare, ma mi chiedo se c'è qualcosa di meglio là fuori.
Quale HTML5 reimposta CSS usi e perché? Ce n'è uno che hai trovato per coprire più casi?
Ho iniziato a usare HTML5 Doctor's: http://html5doctor.com/html-5-reset-stylesheet/ Sembra funzionare, ma mi chiedo se c'è qualcosa di meglio là fuori.
Risposte:
Vero discorso: nonostante i ribassi kaikai ha ragione, devi solo reimpostare * padding & margin a 0.
Anche se sfortunatamente il 99% di noi non ha risorse o forza lavoro per tenere il passo con le centinaia di versioni di browser disponibili. Quindi un foglio di ripristino è essenziale per il tipico sito Web.
html5reset: (È troppo interferente)
Ho appena dato un'occhiata a http://html5reset.org/
img,
object,
embed {max-width: 100%;}
E:
html {overflow-y: scroll;}
Capisco che abbia buone intenzioni, ma non è il lavoro di un foglio di ripristino. Fa troppe ipotesi.
BluePrint Reset: (letteralmente un progetto)
body {
line-height: 1.5;
background: white;
}
Cosa succede con 1.5. E perché sfondo bianco? (So che è per correggere ma non è ancora necessario)
Normalize.css: (non normale)
https://github.com/necolas/normalize.css/blob/master/normalize.css
È iniziato bene con alcuni webkit / ie hack ma
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.75em;
margin: 2.33em 0;
}
Ogni tag di intestazione è scelto come target. e non ripristinano l'altezza della linea del corpo.
Sono sicuro che tutto quanto sopra fa bene il lavoro previsto, ma probabilmente verrà sovrascritto più del necessario.
Eric Meyer
YUI
HTML5Boilerplate
Quanto sopra è più per i professionisti con Boilerplate che si appoggia al lato (più amichevole), sono sicuro a causa della popolarità. Al momento l'80% del mio reset personalizzato è boilerplate.
Ho intenzione di fare tutti e tre un po 'alla volta e farne uno mio, non è scienza missilistica.
Normalize.css è ottimo sia per i browser desktop che per i browser mobili ed è utilizzato in molti modelli HTML popolari.
Ma che dire dell'utilizzo della all
proprietà CSS che ripristina le proprietà CSS tranne direction
e unicode-bidi
? In questo modo non è necessario includere file aggiuntivi:
{
all: unset
}
CSS all
ha un ampio supporto tranne che in IE / Edge. Allo stesso modo con unset
.
Il reset.css utilizzato dal framework Blueprint CSS funziona bene e include elementi HTML5. Viene incluso nel loro file screen.css .
Blueprint è una risorsa utile per la prototipazione rapida di nuovi siti e il loro codice sorgente è ben organizzato e vale la pena imparare.
Eric Meyer ha anche rilasciato la v2 del suo ripristino CSS (e lo ha fatto quasi un anno fa):
* {
margin: 0;
padding: 0;
}
semplice ma del tutto efficace. magari inserire un:
body {
font-size: small;
}
per buona misura.
display: inline
.
display: inline
. Hai mai visto un diagramma del sito in cui l'intestazione, il piè di pagina, la navigazione, le colonne laterali, praticamente ogni sezione di pagina scorre in linea ??? Mi dispiace kaikai, ma questo non è accettabile!
*
selettori sono lenti, ho sentito.
La specifica HTML5 include dichiarazioni CSS consigliate per browser compatibili con CSS. Per il gusto di farlo, li ho presi e ho ripristinato quelli, dove aveva senso. Puoi visualizzare il risultato in questo articolo .
Tuttavia , non consiglio di utilizzarlo in produzione. È più una prova di concetto e potrebbe essere usato meglio per dare suggerimenti che per servire come foglio di stile per tutti gli usi. Qualsiasi altro suggerimento prima potrebbe essere una scelta migliore.
Uso Normalize o il ripristino da HTML5 Doctor e lo modifico per adattarlo al progetto su cui sto lavorando.
A proposito, è solo il concetto di utilizzare un ripristino che è diventato più o meno uno standard.