gebruik van em als maatvoering (css reset)

[pum]

ik ben bezig een standaard document te maken waarbij je zo van start kunt gaan.
alle htags p tags, lists, paragraphs zijn hierin al opgemaakt een soort van moeder project.

Nu gebruik ik een css reset hiervoor. In deze reset worden pixels en ems door elkaar heen gebruikt, ook worden voor margin en padding ems gebruikt.

Ik weet hoe ik moet werken met em en met pixel, ik snap alleen niet waarom dit door elkaar heen word gebruikt. wat is hier het nut van?

Ook vraag ik me af of het handig is om een css reset te gebruiken die door iemand anders is gemaakt ? gebruiken jullie vaak een reset ? of pas je deze reset aan op je project ?

 

[dieterke]

Ik gebruik zelf meestal volgende reset: http://meyerweb.com/eric/tools/css/reset/

Het is raar dat ze in een reset pixels en ems gebruiken want met een reset is het wel degelijk de bedoeling dat elk element 0pixels of ems heeft.. Anders heeft een reset niet zoveel zin ;-)..

Je kan ook simpelweg:
* {
margin: 0;
padding: 0;
}
doen.. Maar dat wordt denk ik niet echt aangeraden?

 

[pum]

Klopt dat is vaak wel handig voor kleine projecten.

reset is inderdaad om bepaalde elementen op 0 te zetten. Standaard geeft de browser ook margins en paddings mee aan elementen, dit zou je kunnen gebruiken maar niet alle browsers gebruiken dezelfde maatvoering voor margins en paddings op elementen dus dan heb je al verschillen.

Gebruik je een reset en zet je alles op 0, wat ga je dan op 0 zetten alles ? is dit echt nodig vraag ik me dan af of kun je het beter afstemmen op je project ?

 

[tecsman]

is dit echt nodig vraag ik me dan af of kun je het beter afstemmen op je project ?

Hier zijn twee veelvoorkomende uitdrukkingen van toepassing:
" Met een schone lei beginnen"
"Waarom zou je het moeilijk doen als het makkelijk kan"

Als je alles op 0 zet, of schoonveegt
weet je zeker dat daarna alleen je eigen 'rules' worden toegepast.

Wanneer je zo'n standaard stylesheet gebruikt, weet je zeker dat je niks overslaat
en om nou selectoren er uit te gaan slopen omdat die toevallig niet in jouw pagina's voorkomen,
da's alleen maar extra werk.

 

[csshunter]

Eric Meyer gebruikt op z'n pagina meyerweb.com/eric/tools/css/reset/ zelf ook niet z'n reset-css.
En dat lijkt me niet helemaal toevallig!
Hij zegt er ook bij:

I don't particularly recommend that you just use this in its unaltered state in your own projects. (...) In other words, this is a starting point, not a self-contained black box of no-touchiness.

Bijvoorbeeld alle <ul>'s en <ol>'s op {list-style: none;} te laten zetten door een reset-css is nogal rigoreus; binnen je #content zal je dat dan doorgaans weer moeten aanpassen. Maar dan kan je ze net zo goed standaard op de bullets laten staan, en alleen voor die <ul>'s en <ol>'s aanpassen die géén bullets nodig hebben.

Mijn ervaring: van zo'n uitgebreide reset heb je meer last dan gemak. Met de goede gewoonte om eerst browser-tests te plegen voordat je online gaat, kom je vanzelf wel de dingen tegen die een reset nodig hebben om cross-browser te zijn. En met het voortschrijden van de browser-versies worden dat er steeds minder (zelfs IE begint nog eens op een browser te lijken). Daarbij: een strict Doctype doet meestal wonderen.

In elk geval: * { margin: 0; padding: 0; } pas ik nooit toe!

Met vriendelijke groet,
CSShunter

 

[csshunter]

En nog even terug naar af:

Nu gebruik ik een css reset hiervoor. In deze reset worden pixels en ems door elkaar heen gebruikt, ook worden voor margin en padding ems gebruikt.
Ik weet hoe ik moet werken met em en met pixel, ik snap alleen niet waarom dit door elkaar heen word gebruikt. wat is hier het nut van?

Het nut kan zijn, dat er bv. een verschil wordt gemaakt tussen horizontale en verticale margins of paddings.
Met:

p { margin: .5em; }

wordt geregeld dat bij een groter letterformaat ook de afstand tussen de alinea's toeneemt. Maar dan neemt ook de horizontale margin toe met de lettergrootte, en dat zal juist niet de bedoeling zijn.
Vandaar bv. de combinatie:

p { margin: .5em 20px; }

Nu blijven de horizontale margin-left en margin-right altijd op 20px staan, terwijl de verticale margin kan groeien met de lettergrootte.

Met vriendelijke groet,
CSShunter

 

[pum]

stel dat je bijvoorbeeld een website hebt header content sidebar footer. in je header maak je gebruik van een ul voor je navigatie, in je sidebar bijvoorbeeld voor nieuwsberichten. in je footer voor een footmenu. Dan is het toch onhandig om 3 keer bij de header ul, content ul en de footer ul telkens list-style:none neer te zetten? dan kun je toch beter alleen de #content ul een list style geven?

verder snap ik ook niet goed waarom em's überhaupt worden gebruikt. em is van oorsprong een font maat en komt uit de drukkerij wereld. waarom zouden we dit gebruiken op het web nu de meeste browsers pixels veel beter renderen.

 

[csshunter]

dan kun je toch beter alleen de #content ul een list style geven?

Ja, dat kan ook: een kwestie van persoonlijke voorkeur. Ikzelf ga uit van de regel "een list-style is normaal een bullet, en afwijkingen zet ik in m'n stylesheet".

#header ul, #sidebar ul, #footer ul { list-style: none; }

Maar je kan net zo goed zeggen "op deze site is de list-style normaal geen bullet, dus ik reset alle list-styles, en waar wel bullets zijn zet ik die als afwijking in m'n stylesheet."

ul { list-style: none; }
#content ul { list-style: disc; }

Het nadeel van de laatste methode vind ik, dat je dan bij elke site afzonderlijk moet gaan onthouden wat je als "normaal" en als "afwijkend" hebt gedefinieerd. Het staat natuurlijk wel in de reset-regels, maar die moet je dan elke keer gaan raadplegen. Ik vind het makkelijker om altijd de standaard "normaal" te beschouwen, en niet "normaal" en "afwijkend" om te draaien met een reset. Maar dus een zaak van smaak.

=====

verder snap ik ook niet goed waarom em's überhaupt worden gebruikt. em is van oorsprong een font maat en komt uit de drukkerij wereld. waarom zouden we dit gebruiken op het web nu de meeste browsers pixels veel beter renderen.

• Een em is een relatieve maat, en dat kan wel eens heel handig zijn. Bijvoorbeeld je hebt een site met een sidebar voor de navigatie, waarbij je wilt dat bij vergroting van het letterformaat de items nog steeds op een knop passen. Als je de letters in px opgeeft en de knop-breedte ook in px, gaat dat niet zo eenvoudig. Als je ze alle twee in em's opgeeft, gaat het automatisch. Hetzelfde geldt voor de onderlinge verhoudingen in formaat van de <h1>, <h2>, <h3>, <p> enz. Staan die in em's, dan is alleen het wijzigen van de body-lettergrootte voldoende om alles naar verhouding op te schalen.
  Voorbeeld: www.cosbo.nl/test-welkom.php; met de lettergrootte-knop kan alles on-the-fly aangepast worden naar de behoefte van de bezoeker.
  
  
• En voor mij doorslaggevend: IE kan bij letterformaten die op px zijn vastgeprikt, niet via menu Beeld > Tekengrootte > Groter de letters vergroten. Dat kan voor een deel van het publiek de site compleet ontoegankelijk maken! *)

Met vriendelijke groet,
CSShunter
___________
*) Of ze moeten de zoom-functie gebruiken. Maar:
(a) die weet lang niet iedereen te vinden, en
(b) dan moet je wel steeds links-rechts scrollen om de regels te kunnen lezen: uiterst vermoeiend!

 

[pum]

als ik het dus goed begrijp is em handig om alles op basis van je font grootte te schalen.

nu zie ik heel vaak dat ze de standaard font grootte resetten door dit te doen

body {
font-size: 62.5%; = gelijk aan 10 px;
}

kun je niet gewoon zeggen

body{
font-size: 10px;
}

p{
line-height: 1.5 em; = 15 px;
}

 

[csshunter]

Kun je niet gewoon zeggen:
body {font-size: 10px;}
p {line-height: 1.5 em;} /* = 15 px; */

Nop.

• Voorbeeld: www.developerscorner.nl/csshunter/tests/body-font-size-12px.htm (10px is wel heel erg klein)

Hier zijn bijbehorende screenshots (op 1024*768px bij standaard browser-instellingen) van achtereenvolgens Firefox, Chrome, Opera, Safari, IE7 en IE8:

We zien dat het in alle browsers goed gaat met de lettergrootte van de <p>, maar IE7 heeft opvallende afwijkingen in de <h1> en <h2>: veel te groot!
Dat komt omdat in (lte) IE7 de <body> font-size niet genormaliseerd is in een percentage.

Dit was reden 1 om de font-size niet in px op te geven.

Wordt vervolgd!

 

[csshunter]

Vervolg!
We gebruiken dezelfde testpagina als hierboven: body-font-size-12px.htm

Nu vindt de bezoeker de letters toch een beetje te kriebelig voor zijn ogen, en besluit de letters wat groter te zetten.
In Firefox gebeurt er dit (met menu Beeld > Zoomen > Alleen tekst zoomen > Inzoomen):

Maar in IE7 gebeurt er dit (met menu Beeld > Tekengrootte > Extra groot):

In Internet Explorer 7 zijn de kleine lettertjes zijn nog net zo klein als ze waren.
En in IE8 blijft alles helemaal hetzelfde (figuur als boven in reactie nr.#10; ook de h1 en h2 worden niet opgeschaald).
Kortom:

Met een fixed font in px kan Internet Explorer de letters niet vergroten.

Dat is reden 2 om de font-size niet in px op te geven.

Met vriendelijke groet,
CSShunter