Reset css Eric Meyer

filomeni

Moderatore
Membro dello Staff
MOD
14 Mag 2006
1.052
6
38
50
Roseto degli Abruzzi (TE)
www.sitiweb.cloud
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
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Il css reset non dovrebbe influenzare il tuo in quanto va messo per primo quindi non sovrascrive le tue regole
 

BayLollo

Utente Attivo
28 Ago 2014
84
0
6
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
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

Moderatore
Membro dello Staff
MOD
14 Mag 2006
1.052
6
38
50
Roseto degli Abruzzi (TE)
www.sitiweb.cloud
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...
 
Ultima modifica:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
É 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:
Codice:
* {
    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:
Codice:
* {
    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

Utente Attivo
28 Feb 2013
3.041
192
63
Lombardia
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
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!
 

IImanuII

Utente Attivo
10 Giu 2012
390
0
16
É 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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
YUI 2: Reset CSS
Il foglio di stile è realizzato da Yahoo! Il codice è il seguente:
Codice:
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
Codice:
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;
}
 
Discussioni simili
Autore Titolo Forum Risposte Data
F reset ipcamera IP Cam e Videosorveglianza 17
L [PHP] Reset textbox PHP 0
ANDREA20 [PHP] Non riesco ad impostare reset password invio via email PHP 6
N Reset password e remind user con Chronoforms Joomla 0
felino [Virtuemart 1.1.9] Gestione ordini: export ordini attuali e reset degli stessi Joomla 0
J Password reset messaggio di successo o di errore PHP 0
K jQuery Form Reset jQuery 1
borgo italia reset che non (sempre) resetta HTML e CSS 0
S Problema reset e focus Javascript 4
S Help per reset campo in un form Javascript 3
Z CSS Slideshow senza JS e JQUERY HTML e CSS 0
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1
U [WordPress] [CSS] Come faccio a spostare più in basso lo slider WordPress 0
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
A Strumenti per filtrare il css HTML e CSS 1
S Il Css non si aggiorna, svuotata cache HTML e CSS 6
N [css] :active HTML e CSS 1
Shyson [WordPress] [CSS] Formattare casella WordPress 0
Shyson [CSS] Titolo del sito cambia dimensione HTML e CSS 2
A icone css in selectmenu jQuery 2
M Problematica CSS (tag html,body) HTML e CSS 4
W [C#] Il componente "WebBrowser" non mi esegue css e javascript .NET Framework 0
W inclusioni css in eccesso, cosa fare? HTML e CSS 1
M [WordPress] Modifiche CSS su lightbox WordPress 2
T countdown da sistemare con i CSS... HTML e CSS 4
Y Finestra dialogo CSS Modal HTML e CSS 6
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
D How to learn HTML and CSS? HTML e CSS 2
M CSS posizionamento stile HTML e CSS 2
I [HTML/CSS] Consigli sul mio primo sito HTML e CSS 9
V Galleria con CSS e Javascript Javascript 2
C CSS pagina a schermo intero HTML e CSS 3

Discussioni simili