Reset CSS

da Cristina | Giu 24, 2019 | 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 web master impostare uno stile a piacere.

Nel reset css ccorre 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 per il reset CSS, 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 piattaforme 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 css, vi elenco i collegamenti 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

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Font nei CSS

CSS border – border width

Border style CSS

Border color CSS