Reset CSS

Reset CSS – In quest’articolo parleremo dei CSS e dei valori di default dei vari browser e come resettarli.
Nella programmazione dei CSS si rende necessario infatti azzerare questi valori di default, in quanto altrimenti si avranno layout differenti per ogni diverso browser.

Uno dei metodi più utilizzati per fare il reset css è quello di Eric Meyer.

Reset CSS dei valori di default dei browser con il metodo di Eric Meyer

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Questo codice si occupa di azzerare i margini, i padding e i bordi di tutti i tag elencati prima dell’apertura della prima parentesi graffa. Inoltre in questo modo ad esempio gli elementi ul, ol, non avranno più le tipiche indentazioni; le tabelle e i paragrafi non avranno più bordi o margini predefiniti; la grandezza dei font è uniformata per tutti gli elementi; tutti gli elementi hanno un font-style, un font-family e un font-weight inherit cioè ereditano il medesimo valore dall’elemento padre; la proprietà vertical-align con l’attributo baseline consente di uniformare anche i tag sup e sub.

Eliminiamo qualsiasi stile di elenco puntato e numerato con questo codice:

ol, ul {
	list-style: none;
}

Sarà poi cura del webmaster impostare uno stile a piacere.

Occorre anche eliminare le virgolette ai tag blockquote e q, perchè alcuni browser potrebbero aggiungerle, ecco perchè si aggiunge questo codice:

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

Infine pensiamo anche alle tabelle:

table {
	border-collapse: collapse;
	border-spacing: 0;
}

In questo modo il bordo delle tabelle viene mostrato come linea singola e lo spazio tra le celle e i bordi è azzerato.

Un’altra soluzione, più precisa, è quella di utilizzare come metodo il reset Normalize. Questo metodo è stato scelto per framework come Bootstrap, HTML5Boilerpalte che più avanti vi dirò cosa sono e da piattoforme come Github e da molti template di WordPress. Questo perchè consente una facile personalizzazione delle varie parti.

La scelta del metodo per il reset css è da effettuare in base alle caratteristiche del sito web.

Per creare un sito a scopo didattico e anche non molto complesso userei il primo metodo che ad oggi è ancora il più diffuso.

Altrimenti se avete delle esigenze particolari potete utilizzare, quello che vi allego che è quello che ho utilizzato per lo sviluppo del mio blog www.codingcreativo.it.

Reset CSS dei valori di default dei browser con normalize

html {
	font-family: sans-serif;

	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
}

body.custom-background {
	background-size: cover;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	margin: 0.67em 0;
	font-size: 2em;
}

mark {
	color: #000;
	background: #ff0;
}

small {
	font-size: 80%;
}

sub,
sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

.entry-content p{
	word-break: break-word;
}

svg:not(:root) {
	overflow: hidden;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	margin: 0;
	color: inherit;
	font: inherit;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer;

	-webkit-appearance: button;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	padding: 0;
	border: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"] {
	box-sizing: content-box;

	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
	border: 1px solid #c0c0c0;
}

legend {
	padding: 0;
	border: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
}

td,
th {
	padding: 0;
}

Potete anche scaricarlo al seguente link: http://necolas.github.io/normalize.css/

Questi che vi ho elencato non sono solo gli unici metodi per fare il reset, vi elenco i collegmaneti agli altri metodi:

http://html5reset.org/

http://html5doctor.com/html-5-reset-stylesheet/

Ovviamente ognuno di questi metodi per il reset css può essere cambiato in base alle vostre esigenze.

Alcuni link utili:

Tag semantici

Il linguaggio html

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web


Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *