Wat is de functie van reset.css

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mohamed nvt

Mohamed nvt

03/08/2017 14:18:30
Quote Anchor link
Hallo allemaal,

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)
PHP script in nieuw venster Selecteer het PHP script
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
/**
    * 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;
    }
 
PHP hulp

PHP hulp

26/01/2021 22:12:16
 
- Ariën -
Beheerder

- Ariën -

03/08/2017 15:21:21
Quote Anchor link
Vroeger was er geen standaardisatie over de werking van CSS-stijlen, elke browser implementeerde het op een manier zoals zij het goed vonden. Dat was al één van de redenen dat vroeger Internet Explorer werd gehaat, omdat deze veel afwijking had met betrekking tot CSS conform andere browsers. Inmiddels is dit wel verbeterd, en met Edge al helemaal omdat ze nu (eindelijk) een bestaande lay-out engine gebruikten, in plaats van eigen versie.

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 -
 
Mohamed nvt

Mohamed nvt

06/08/2017 09:13:17
Quote Anchor link
Hallo - 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!
 
Ben van Velzen

Ben van Velzen

06/08/2017 12:14:50
Quote Anchor link
Je gebruikt het door de import voor je overige CSS. te doen. CSS overerft, waardoor latere regels eerdere regels aanvullen/overschrijven.
 
Mohamed nvt

Mohamed nvt

06/08/2017 13:24:56
Quote Anchor link
Hallo Ben,

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
 
- Ariën -
Beheerder

- Ariën -

06/08/2017 13:31:03
Quote Anchor link
Een 'reset' is het eerste wat je gebruikt bij het developpen in CSS.
Als je halverwege begint, dan zul je als je waardes in je properties opnieuw moeten instellen.
 
Mohamed nvt

Mohamed nvt

06/08/2017 13:39:04
Quote Anchor link
M.a.w zeg je als ik live ga, dan moet ik die reset.css niet meer gebruiken?
 
- Ariën -
Beheerder

- Ariën -

06/08/2017 13:45:15
Quote Anchor link
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 -
 
Mohamed nvt

Mohamed nvt

06/08/2017 13:56:21
Quote Anchor link
Daar heb je wel een punt, maar ik ga niet tijdens de bouw een reset.css inbouwen.
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...
 
- Ariën -
Beheerder

- Ariën -

06/08/2017 13:57:45
Quote Anchor link
In dat geval raad ik het juist aan! Als je de Bootstrap gebruikt, zit dit er al in.
Gewijzigd op 06/08/2017 13:57:58 door - Ariën -
 
Mohamed nvt

Mohamed nvt

06/08/2017 14:05:28
Quote Anchor link
Oke en ik wil het ook graag gebruiken, maar er is een ding wat niet duidelijk is voor me en wil graag duidelijkheid erover hebben voordat ik hiermee aan de slag ga.
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
 
- Ariën -
Beheerder

- Ariën -

06/08/2017 14:07:07
Quote Anchor link
Ik zou zelf niet aan de 'reset' gaan rommelen. Zo doe je de juiste waardes voor je properties juist teniet.
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 -
 
Ozzie PHP

Ozzie PHP

06/08/2017 14:16:06
Quote Anchor link
CSS = Cascading Style Sheets

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.
 
Mohamed nvt

Mohamed nvt

06/08/2017 15:08:59
Quote Anchor link
Beste - Ariën - & Ozzie PHP,

Het is voor mij nu duidelijk en ik kan nu eindelijk gaan beginnen :-)

Many thanks!
 
Ozzie PHP

Ozzie PHP

06/08/2017 15:10:09
Quote Anchor link
Succes! ;-)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.