Wat is de functie van reset.css
Na veel klooien met het css-bestand van een css-generator website heb ik besloten om maar eigen lay-out in CSS te maken. Uiteraard gaat dit tijd kosten, maar het is niet anders helaas.
En voordat ik hiermee aan de slag heb ik de volgende vragen over:
1. Is het handig of juist niet praktisch om een reset.css zoals hieronder weergeven op te nemen in het hoofdcss.css bestand?
2. Indien het handig is hoe moet ik mee omgaan en wat is de functie precies?
3. Zoals hieronder weergegeven, heeft de H1 0 margin en padding.
4. En mocht het nodig zijn dat ik een H1 wel moet voorzien van een margin en padding, betekent het dat ik de H1 moet verwijderen uit reset.css om de marging en padding toe te kunnen voegen of moet ik eerst een ID of een class toe te kennen aan de H1, voordat ik het kan gebruiken?
Alvast bedankt voor het meedenken!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://www.cssportal.com
*/
html, body, 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;
}
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://www.cssportal.com
*/
html, body, 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;
}
Maar toch zijn er nog steeds wazige grenzen in CSS bij vele browsers, met voornamelijk marges, paddings, fonts. Daarom hebben ontwikkelaars een 'reset'-CSS is het leven gebracht die ervoor zorgen dat alle waarden voor alle browser vanaf 0 beginnen. Zo voorkom je een hoop compatibiliteitsproblemen.
Het beste is om een reset in je CSS te gebruiken. Ikzelf raad Normalize aan. Die zit overigens standaard al in de Bootstrap gebakken, als je die toevallig al gebruikt.
Gewijzigd op 03/08/2017 15:22:23 door - Ariën -
Bedankt voor je uitleg.
De functie van reset.css is mij nu wel duidelijk en hoe kan ik nu het beste gebruiken en/of je of iemand anders antwoord wil geven mijn bovenstaande vragen.
Alvast bedankt!
Ik snap je feedback niet helemaal, en ik denk dat ik het zou begrijpen als je antwoord wil geven op mijn onderstaande vragen:
Ik ben nl meer van de praktijk dan de theorie :d
Zoals hierboven weergegeven, heeft de H1 0 margin en padding.
En mocht het nodig zijn dat ik een H1 wel moet voorzien van een margin en padding, betekent het dat ik de H1 moet verwijderen uit reset.css om de marging en padding toe te kunnen voegen of moet ik eerst een ID of een class toe te kennen aan de H1, voordat ik het kan gebruiken?
Gewijzigd op 06/08/2017 13:27:15 door Mohamed nvt
Als je halverwege begint, dan zul je als je waardes in je properties opnieuw moeten instellen.
Mohamed nvt op 06/08/2017 13:39:04:
M.a.w zeg je als ik live ga, dan moet ik die reset.css niet meer gebruiken?
Dat zeg ik niet?
Je kan een 'reset' niet zomaar halverwege tijdens de bouw inbouwen. Dan moet je al je properties weer nalopen. Lees anders nog eens goed door dat een reset doet.
Gewijzigd op 06/08/2017 13:49:54 door - Ariën -
Ik ga de lay-out helemaal vanaf scratch bouwen en ik dacht is het nou handig of juist niet praktisch om te werken met een reset.css bestand...
Gewijzigd op 06/08/2017 13:57:58 door - Ariën -
En dat is nl het volgende:
Zoals hierboven weergegeven, heeft de H1 0 margin en padding.
En mocht het nodig zijn dat ik een H1 wel moet voorzien van een margin en padding, betekent het dat ik de H1 moet verwijderen uit reset.css om de marging en padding toe te kunnen voegen of moet ik eerst een ID of een class toe te kennen aan de H1 , voordat ik het kan gebruiken?
Gewijzigd op 06/08/2017 14:06:08 door Mohamed nvt
Zorg dat je gewoon in je eigen CSS (die je reset overerft) je de juiste paddings en margins gebruikt. voor je heading-elementen.
Gewijzigd op 06/08/2017 14:07:33 door - Ariën -
Als jij aan een element een bepaalde kleur toekent (rood), en even later aan datzelfde element een andere kleur toekent (blauw), dan wordt de laatste kleur toegepast (blauw).
Reset:
Zet een aantal elementen op '0'. De h1 krijgt dus margin en padding 0.
Als jij dit wilt veranderen, zet je dus gewoon (na de reset) de margin en padding van h1 op bijvoorbeeld 15px. Aangezien je dit later doet dan de reset, wordt deze (15px) waarde gebruikt. Het is NIET de bedoeling dat je iets weghaalt uit de reset. Je "overschrijft" simpelweg de waardes die jij wilt wijzigen. Aan het reset.css bestand verander je dus helemaal niks.
Het is voor mij nu duidelijk en ik kan nu eindelijk gaan beginnen :-)
Many thanks!