Reset css Eric Meyer

[filomeni]

Ciao,
sto sviluppando il mio sito e c'è molto css, oggi stavo approcciando ai fogli di reset e in particolare a quello di Meyer.
Ho provato a metterlo e funziona a menadito.
Il problema è che ora devo rifare tutto il css (se non tutto, quasi)! Senza il css di reset avevo comunque raggiunto un risultato ottimale per i browser di maggior importanza.
Cosa faccio? Tolgo il reset e proseguo il progetto senza o mi conformo con il reset?
Insomma questo reset è indispensabile o no?
Grazie

 

[cory]

il reset non per niente indispensabile,
ma sarebbe molto utile togliere tutto il css e formattazioni varie dall'html

 

[Max 1]

Il css reset non dovrebbe influenzare il tuo in quanto va messo per primo quindi non sovrascrive le tue regole

 

[BayLollo]

Il css reset non dovrebbe influenzare il tuo in quanto va messo per primo quindi non sovrascrive le tue regole

Il problema è che toglie tutti gli stili predefiniti e le regole che aveva scritto lui erano basate su questi.
(O almeno è ciò che ho capito)

 

[Max 1]

Se il reset è messo per primo come foglio di stile non toglie nulla a quello che ha scritto lui se lo mette dopo il reset

 

[filomeni]

Utilizzando Meyer, è molto "aggressivo" mette a zero anche l'html...
quindi se si usano dei markup non regolati da css, ci si ritrova a ridefinire anche il default html...
Giusto quello che dice Max1 ma credo a questo punto che mi convenga non utilizzarlo (il reset),
altrimenti ne dovrei editare uno appositamente...
Una domanda che mi rimane insoluta è:
Il reset è assolutamente indispensabile o no?
Le mie pagine le ho confrontate con IE, firefox, safari, corme e ho raggiunto una buona conformità,
quindi mi domando se mi serva o meno sto reset...

 

[Max 1]

É ovvio che non sono indispensabili ed è una scelta personale se utilizzarli o no! MA!


Il problema fondamentale quando si deve realizzare un layout web con i CSS è quello di far visualizzare correttamente le pagine in ogni browser. Quando si progetta il foglio di stile della pagina bisogna tener conto anche degli stili integrati di default in ogni browser, stili che assegnano un valore iniziale alle proprietà di ogni elemento.

Le differenze principali tra i browser si hanno per le proprietà margin e padding. Ogni browser assegna agli elementi un valore diverso quindi, in fase di realizzazione del layout, si otterrebbero risultati completamente diversi in ognuno di essi.

La soluzione più ovvia a questo problema è quella di impostare inizialmente a zero i valori dei margini e del padding, e di assegnarli poi agli oggetti in base alle esigenze del progetto su cui stiamo lavorando. La regola per azzerare margini e padding è la seguente. Faccio uso del selettore universale * per applicarla a tutti gli elementi:

* {
    margin: 0;
    padding: 0;
}

Ci sono però anche altre proprietà che vengono personalizzate dai browser, quindi il codice precedente non è sufficiente. Dimensioni dei caratteri, bordi, colori e molte altre proprietà hanno bisogno di essere uniformate per rendere il layout finale uguale in ogni browser.

Una soluzione più elaborata del codice precedente, quindi, potrebbe essere la seguente:

* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

Altri elementi, però, contengono particolari proprietà che bisogna azzerare.

Per risolvere definitivamente il problema, da qualche anno a questa parte, sono stati realizzati diversi fogli di stile da includere nei nostri progetti che consentono di azzerare le proprietà personalizzate dei vari browser. Questi fogli di stile sono chiamati Reset CSS e vanno inseriti prima di tutte le altre regole CSS del progetto.

 

[marino51]

Per risolvere definitivamente il problema, da qualche anno a questa parte, sono stati realizzati diversi fogli di stile da includere nei nostri progetti che consentono di azzerare le proprietà personalizzate dei vari browser. Questi fogli di stile sono chiamati Reset CSS e vanno inseriti prima di tutte le altre regole CSS del progetto.

quindi senza estremizzare molto, si può dire che applicando il foglio di stile RESET, ed avendo poi un proprio foglio di stile che copre i vari elementi, si risolvono le diversità di stile dei browser ?
ciao
Marino

 

[Max 1]

quindi senza estremizzare molto, si può dire che applicando il foglio di stile RESET, ed avendo poi un proprio foglio di stile che copre i vari elementi, si risolvono le diversità di stile dei browser ?
ciao
Marino

É quello che ho già detto io!

 

[marino51]

grazie della conferma, ciao
Marino

 

[IImanuII]

É quello che ho già detto io!

Sei stato davvero esauriente e chiaro, quale foglio di reset consigli? Se dovessi utilizzare un framework come purecss.io di yahoo, il foglio di reset è una buona soluzione da richiamare prima del framework?

Inviato dal mio MI PAD utilizzando Tapatalk

 

[Max 1]

YUI 2: Reset CSS
Il foglio di stile è realizzato da Yahoo! Il codice è il seguente:

html {
    color: #000;
    background: #FFF;
}
 
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
h4, h5, h6, pre, code, form, fieldset, legend,
input, button, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
 
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
fieldset, img {
    border: 0;
}
 
address, caption, cite, code, dfn, em, strong,
th, var, optgroup {
    font-style: inherit;
    font-weight: inherit;
}
 
del, ins {
    text-decoration: none;
}
 
li {
    list-style: none;
}
 
caption, th {
    text-align: left;
}
 
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
 
q:before, q:after {
    content: '';
}
 
abbr, acronym {
    border: 0;
    font-variant: normal;
}
 
sup {
    vertical-align: baseline;
}
 
sub {
    vertical-align: baseline;
}
 
/*because legend doesn't inherit in IE */
legend {
    color: #000;
}
 
input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
 
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
    *font-size: 100%;
}

OPPURE

Eric Meyer CSS Reset

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
 
/* remember to define focus styles! */
:focus {
    outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}