Quale HTML5 resettare CSS usi e perché? C'è uno che hai trovato per coprire più casi?Quale HTML5 resettare CSS usi e perché?
Ho iniziato a utilizzare HTML5 Doctor's: http://html5doctor.com/html-5-reset-stylesheet/ Sembra funzionare, ma mi chiedo se c'è qualcosa di meglio là fuori.
* {
margin: 0;
padding: 0;
}
semplice ma completamente efficace. forse gettare in:
body {
font-size: small;
}
per buona misura.
Lo zapping del margine predefinito e il riempimento dei controlli del modulo possono avere effetti indesiderati e le parole chiave con dimensione font non hanno un comportamento coerente tra i browser. Questo è troppo semplicistico. Inoltre non riesce a impostare gli stili per gli elementi introdotti in HTML 5, quindi rimangono 'display: inline'. – Quentin
Non sono d'accordo. Margine e imbottitura sono le uniche proprietà imprevedibili. La proprietà font-size utilizza una parola chiave denominata per indirizzare in modo specifico i browser che li leggono, il che rende il font YUI scalabile efficace su tutti i principali browser (http://developer.yahoo.com/yui/examples/fonts/fonts-size_source.html). Inoltre, non vorrei mai imporre il normale flusso di elementi, quindi lascerei da solo quegli elementi HTML 5, cambiando solo il tipo di visualizzazione o il posizionamento in base alle esigenze. Mi rendo conto che la mia scelta è impopolare, ma è molto più elegante di altre soluzioni e funziona. – kaikai
No no no no no! Gli elementi HTML5 non hanno la proprietà display impostata, quindi ritornano con grazia al 'display: inline' predefinito. Hai mai visto un diagramma del sito in cui l'intestazione, il piè di pagina, la navigazione, le colonne laterali, praticamente ogni sezione della pagina scorre in linea ??? Scusa kaikai, ma questo non è accettabile! –
Il reset.css utilizzato dal Blueprint CSS framework 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 da cui vale la pena imparare.
Le specifiche HTML5 includono recommended CSS declarations per i browser compatibili con CSS. Per il gusto di farlo li ho presi e li ho ripristinati, dove ha senso. È possibile visualizzare il risultato in this article.
Tuttavia,, non è consigliabile utilizzarlo in produzione. È più una prova di concetto e potrebbe essere meglio usato per dare suggerimenti che per servire come un foglio di stile di reset per tutti gli usi. Qualsiasi altro suggerimento prima potrebbe essere una scelta migliore.
Eric Meyer ha anche rilasciato v2 del suo ripristino CSS (e lo ha fatto quasi un anno fa):
Semplice ma efficace e più veloce dei ripristini che si basano sul * selettore universale. – tomasz86
Real Talk: Nonostante i ribassi kaikai è giusto, avete solo bisogno di ripristinare * padding & margine a 0.
anche se purtroppo il 99% di noi non hanno le risorse o il potere dell'uomo per stare al passo con le centinaia di versioni del browser disponibili. Quindi un foglio di ripristino è essenziale per il sito web tipico.
html5reset: (E 'troppo interferendo)
Ho appena dato un'occhiata al http://html5reset.org/
img,
object,
embed {max-width: 100%;}
E:
html {overflow-y: scroll;}
capisco che ha buone intenzioni, ma, che non è il lavoro di un foglio di ripristino. Sta facendo troppe ipotesi.
BluePrint reset: (letteralmente un progetto)
body {
line-height: 1.5;
background: white;
}
Whats up con 1,5. E perché sfondo bianco (lo so che è per la correzione, ma ancora non necessario)
Normalize.css:? (Non normale)
https://github.com/necolas/normalize.css/blob/master/normalize.css
E '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 è mirato. & non ripristinano l'altezza della linea del corpo.
Sono sicuro che tutto quanto sopra funziona bene, ma probabilmente verrà sovrascritto più del necessario.
Eric Meyer
YUI
HTML5Boilerplate
Quanto sopra sono più per i professionisti con Boilerplate appoggiato al lato (troppo cordiale) Sono sicuro che a causa della popolarità. Al momento l'80% del mio reset personalizzato è boilerplate.
Ho intenzione di andare anche se tutti e tre a poco a poco e fare il mio, non è scienza missilistica.
Nota che normalize.css ora è cambiato; le dimensioni dei caratteri delle intestazioni non sono più impostate. –
Vale la pena ricordare che Normalize.css non si limita a gestire i browser desktop, ma anche i browser mobili come iOS Safari, Chrome per Android, browser di riserva, ecc., Che sono unici nel loro genere. Per questo motivo e per altri, Normalize viene inserito in molti framework popolari. –
Ho usato "Eric Meyer" ma ora uso il foglio di stile di ripristino "YUI" a causa di questo: http://danielsokolowski.blogspot.ca/2012/11/a-tip-for-relatively-sized-html-input. html –
Normalize.css è ideale per i browser desktop e mobili ed è utilizzato in molti modelli HTML popolari.
Ma che dire della proprietà CSS all che ripristina le proprietà CSS eccetto direction e unicode-bidi? In questo modo non è necessario includere eventuali file aggiuntivi:
* { all: unset }
E 'attualmente supportato in Firefox e, auspicabilmente, altri ne seguiranno l'esempio rendendo il processo di ripristino molto semplice.
Interessante ma sembra essere la soluzione più lenta e supportata solo in Firefox, quindi non ha alcun reale utilizzo (almeno in questo momento). – tomasz86
Vero che solo Firefox lo sta supportando in questo momento, ma penso che abbia buone possibilità di finire in soluzioni come Modernizr. https://github.com/Modernizr/Modernizr/issues/1219 –
Uso Normalize o il ripristino da HTML5 Doctor e lo modifico per adattarlo al progetto su cui sto lavorando.
BTW è solo il concetto di utilizzare un reset che è diventato più o meno uno standard.
Avete ulteriori dettagli? –
Non lascio negli elementi che non sto usando un progetto specifico. Per esempio rimuovo gli elementi del modulo se non sto usando i moduli. Sono sicuro che ti viene l'idea. Non ha senso reimpostare gli elementi che non stai utilizzando. – cornishninja
Per eseguire il backup del mio punto sulla modifica del reset per adattarlo alle mie esigenze: http://www.cssreset.com/which-css-reset-should-i-use/ – cornishninja
Simile a: http://stackoverflow.com/questions/3277671/css-reset-for-html5 –
È simile sì, ma sto solo cercando di usare qualcuno, invece di modificarlo per farlo funzionare in un secondo momento, se necessario, posso semplicemente copiare una versione più recente. –
HTML5! == CSS ... sempre. –