Hoi kermisfreak1000,
Ik heb nog wat leesvoer voor je.
Ik heb de informatie van
http://www.handleidinghtml.nl/
Ik dacht dat deze te vertrouwen was
Ja, een jaar of 7 geleden was dat zeker zo. De uitleg en de voorbeelden zijn ook in het algemeen uitstekend. En het was een behoorlijk complete dwarsdoorsnee van html en css. Ik gebruik 'm nog regelmatig als snel naslagwerkje - daarvoor prima geschikt.
Maar de tijden gaan snel, en helaas ziet de maker geen kans dit werkstuk goed bij te houden.
Er staat bv. al jaren bij de
CSS-eigenschappen "
Werk in uitvoering" (op die pagina staat: Laatste wijziging: 16 januari 2005). Het "Werk in uitvoering" slaat op aanpassingen om aan te sluiten bij CSS 2.1 (de versie
CSS 2 was van ... 1998); de "
kandidaat aanbeveling CSS 2.1" was, even kijken, van 2004; met daarna nog enkele aanpassingen tot
de huidige CSS 2.1 van 2009. En intussen kunnen browsers al steeds meer met onderdelen van CSS 3 uit de voeten: ontwikkeling gestart rond 2001 (
Working Draft / Roadmap CSS 3).
- Terwijl de officiële route van vaststelling van CSS door W3C achterloopt op de vaardigheden van de browsers (die er als de kippen bij zijn om nieuwe snufjes in de bouwen die de concurrenten nog niet hebben), loopt de handleidinghtml dus nog achter op CSS2.1.
Bij de behandeling van
HTML in de handleidinghtml.nl is er iets dergelijks aan de hand; en als je goed leest, staat dat ook tussen de regels door.
De <u> onderstreping?
Bij de
omschrijving van het <u> element staat inderdaad het zinnetje dat
<u>, hoewel afgekeurd in HTML 4.0, nog wel gebruik mag worden om oudere browsers van dienst te zijn die nog niet met de css style-eigenschappen overweg kunnen. HTML 4.0? Die is van ...
1998!
Er staat ook bij: "Als alternatief kan met behulp van de
text-decoration eigenschap een stijl gedefinieerd worden." Dat is dus de stijl die niet door "oudere browsers" ondersteund wordt.
Maar als we die link volgen naar het css-deel van de handleiding, staat op die pagina bij "
Bijzonderheden ondersteuning" o.a. behandeling van Internet Explorer
3.0 (!), en via IE4, IE5 en IE5.5 behandeling van IE
6 als laatste. Verder wordt niet gekomen. Terwijl op het moment toch iedereen IE6 aan het dumpen is wegens knetterende veroudering en dijken van veiligheidsgaten...
Van de andere "oudere browsers" worden behandeld: Netscape Navigator
4 (!) t/m Netscape
7; terwijl NS
9 de laatste versie was, en intussen de hele Netscape Navigator als browser al een paar jaar van het toneel verdwenen is. De genoemde "Mozilla 1.0 t/m
1.3" heet nu Firefox, en zit al op versie
3.6, terwijl FF
4 al in een bèta-versie aanwezig is. - Over Opera wordt nog wel iets gezegd, maar bv. over Google Chrome en Safari staat niets.
En dat klopt allemaal: helemaal onderaan die pagina staat "Laatste wijziging: 19 maart 2006". Toen was er nog geen Chrome.
Kortom: wat daar "oudere browsers" worden genoemd, zijn stokoude browsers waarvan je met pijn en moeite nog wel een archief-exemplaar zou kunnen bemachtigen.
Alternatief voor <u>?
En wat is een vervanger van <U>? Een SPAN met CSS? of is er een nieuwe tag?
Alle huidige browsers ondersteunen:
HTML:
<p>Alinea met <span class="onderstreept">een paar onderstreepte woorden</span>, en dan weer gewoon verder.</p>
met:
Code:
.onderstreept {
text-decoration: underline;
}
Maar - maar - maar ...
Overigens is het een slecht idee om
in gewone tekst onderstreping te gebruiken. Zie ook de
webrichtlijnen hierover: "Het onderlijnen van tekst die geen link is, wordt ten zeerste afgeraden." Want de ongeschreven wet voor webpagina's is:
wat onderstreept is, is een link waar je op kunt klikken.
Als je daarvan afwijkt komt de toegankelijkheid van je pagina in gevaar: waar kan je nu wel of niet op klikken? Als elke website dat op een andere manier zou doen, ben je meer tijd kwijt aan het uitvinden hoe de site werkt dan aan het lezen van wat er op staat...
- Je zou de text-decoration wel bv. kunnen gebruiken voor als je over een link hovert, bv.
a:hover {text-decoration: underline overline;}.
Bij aanwijzen van de link krijgt deze dan behalve de onderstreping ook een "bovenstreping".
- (tussen haakjes: ik ben er dan ook niet blij mee, dat tegenwoordig hier op het forum de links niet meer automatisch een onderstreping hebben.
Dat zie je op wel meer sites: links hebben alleen een iets ander kleurtje en worden niet onderstreept, omdat dat een "mooier design" geeft. Dat gaat in/met mijn ogen ten koste van het gebruiksgemak. En dan heb ik het nog niet over mensen met niet zulke goede ogen of mensen die kleurenblind zijn ...)
Over <b> en <strong>, en over <i> en <em>
In de handleidinghtml.nl wordt dit uitgelegd op de pagina
Introductie weergave tekst. Samengevat:
- Er zijn "fysieke tekstopmaak-elementen" als <b> en <i>, die gebruik je als je wilt vastleggen hoe de tekst moet worden weergegeven.
- Er zijn ook "logische tekstopmaak-elementen" als <strong> en <em>, waarmee niet de exacte weergave wordt vastgelegd, maar meer het type tekst.
"De browser (...) bepaalt hoe de ingesloten tekst wordt weergegeven."
"Omdat veel auteurs zelf de controle over de weergave van hun documenten wensen te hebben, wordt van de logische tekstopmaak-elementen tegenwoordig slechts beperkt gebruik gemaakt."
Tegenwoordig? "Laatste wijziging: 5 maart 2006". :d
En het klopt ook niet.
- Het kan wel zijn dat auteurs (webmakers) "zelf de controle over de weergave van hun documenten wensen te hebben", maar dat staat lijnrecht tegenover de voor mij geldende stelregel dat de bezoeker zelf moet kunnen uitmaken hoe voor hem/haar de beste weergave van de pagina is.
- Voorbeeld: als je als webmaker de lettergrootte instelt op een vast formaat omdat daar het ontwerp van de pagina voor is gebouwd, bijvoorbeeld p {font-size: 12px;},
- dan ga je er aan voorbij de er verschillende resoluties zijn. Op een beeldscherm van 1920x1080px zijn12 pixels véél kleiner dan op een scherm van 800x600px! Niet voor niets zegt wikipedia: "Ook worden bij hoge resoluties de details in het beeld kleiner, tekst kan hierdoor moeilijker leesbaar worden."
- Dus wie met zijn/haar site ook mensen wil bereiken die slecht kleine lettertjes kunnen lezen, moet géén px als maat voor de lettergrootte nemen. Internet Explorer kan deze via menu Beeld: Tekengrootte > Extra groot niet groter maken, als de bezoeker dat nodig heeft! De bezoeker zou (in de laatste IE-versies) wel de "Zoom" eigenschap kunnen gebruiken, maar dan wordt de hele pagina vergroot, en moet de bezoeker steeds links-rechts heen en weer scrollen om de regels te kunnen lezen. - Beter is om de font-size's op te geven in een relatieve maat, bv. p {font-size: .9em;}. Attentie: dit is de maat-eenheid em, niet te verwarren met de tag <em> waar we het hier over hebben!
Dat bij <strong> en <em> "de browser (of als die mogelijkheid er is, de gebruiker via de instellingen van de browser) bepaalt hoe de ingesloten tekst wordt weergegeven." is eerlijk gezegd onzin.
De "logische tekstopmaak-elementen" kan je net zo goed als de <b> en <i> tags met css opmaken, zodat er visueel geen enkel verschil is:
Code:
strong {
font-weight: bold;
}
em {
font-style: italic;
}
net zoals je in een dolle bui met css de weergave van
<i>cursieve tekst</i> rechtopstaand zou kunnen maken:
Code:
i {
font-style: normal;
}
Waarom dan de voorkeur voor <strong> en <em>?
Als het toch op hetzelfde neerkomt, waarom zou je dan <strong> i.p.v. <b> gebruiken, en <em> i.p.v. <i>?
De reden daarvoor is eigenlijk heel eenvoudig:
- <b> en <i> zeggen iets over de weergave op scherm, voor een browser die zijn resultaten op scherm toont. Maar er zijn ook andere soorten browsers! Bijvoorbeeld: voorlees-browsers. Die hebben er niets aan, als er in een tekst een stukje cursief staat: hoe lees je dat voor?!
- Aan de andere kant: <strong> en <em> geven de betekenis aan van het tekstdeel wat zo wordt benoemd. <strong> betekent: "sterk uitgedrukt", en <em> betekent: "met nadruk".
- Nu kunnen alle types browsers er wel mee overweg!
- Een beeldscherm-browser vertaalt <strong> met een vet lettertype (en/of een afwijkende letterkleur, en/of een afwijkende achtergrond achter die passage: was je maar in je CSS opgeeft), en <em> doorgaans met cursief.
- Een tekst-voorleesbrowser vertaalt <strong> in: "harder uitspreken", en <em> in: "met klemtoon uitspreken".
Zo heeft iedereen er wat aan.
Nou, ik heb voor vandaag mijn huiswerk wel gedaan, geloof ik.
Met vriendelijke groet,
CSShunter
PS:
Als je eens wilt rondneuzen op wat er voor een echte kwaliteitswebsite nodig is, dan moet je de eerdergenoemde
Richtlijnen Kwaliteitsmodel Websites eens bekijken.
Daar staat ook prima
uitleg over <strong> en zo.
En er is een
Quickscan om je pagina's te toetsen op kwaliteit: met aanbevelingen voor als er iets mis mocht zijn.
En nog veel meer voor een regenachtige middag, dag, weekend, week, maand, enz.
Als je deze richtlijnen kent en kunt toepassen, kan je je leraar/lerares gaan overhoren!
