[HTML/CSS] Best Practices / Tips & Tricks

[Michali]

Het leek me wel interessant om een topic te openen waarin ik en anderen zo af en toe leuke technieken op gebied van HTML en CSS neer kunnen zetten onderbouwd met wat het doet, en de redenatie erachter. Ik loop al een tijdje met dat idee in mijn hoofd en ik voer het nu toch maar uit.

Het is dus eigenlijk de bedoeling dat je hier iets neerzet waarvan je denkt dat het anderen wel kan helpen, iets wat je eigenlijk niet zo vaak tegenkomt, wat je zelf toepast en waar je met duidelijk redenen achterstaat.


Laat ik aftrappen met een techniek waar ik laatst op kwam. Hoewel zeer waarschijnlijk meer mensen het al gebruiken lijkt het me toch interessant voor sommige mensen om te lezen en te gaan toepassen.

Het eerste wat ik toevoeg is het invoegen van een logo (of afbeelding) in een webpagina dermate van CSS, dus zonder een IMG tag te gebruiken. Nu is dat op zich niet zo moeilijk, maar het kan toch vaak beter dan hoe de meeste mensen zoiets aanpakken (zoals ik tot voorkort ook eigenlijk altijd deed).

De naar mijn mening wat mindere manier om dat te doen is dit:

HTML:

<div id="logo"><a href="home.html"></a></div>

Cascading Stylesheet:

div#logo
{
  width: 100px;
  height: 100px;
  background: url(pic/logo.gif) no-repeat;
}

div#logo a
{
  display: block;
  width: 100px;
  height: 100px;
}

Voordat ik daar op in ga geef ik gelijk de betere methode:

HTML:

<h1 id="logo" title="Logo tekst">
  <a href="home.html" title="Naar de home pagina"><span>Logo tekst</span></a>
</h1>

Cascading Stylesheet:

h1#logo
{
  padding: 0;
  margin: 0;
  width: 100px;
  height: 100px;
  background: url(pic/logo.gif) no-repeat;
}

h1#logo a
{
  display: block;
  width: 100px;
  height: 100px;
}

h1#logo span
{
  display: none;
}

Wat er eigenlijk gebeurt is dat ik een zinnetje toevoeg, die niet zichtbaar is als de css geladen wordt, daarvoor komt dan de afbeelding in de plaats.

De voordelen van de 2de versie boven de 1ste zijn de volgende:
-een h1 element is naar mijn mening semantisch correcter
-een titel attribuut is toegevoegt zodat de accessability beter is (voor slechtzienden bijvoorbeeld, met een spraak browser)
-in pure tekst browsers is de tekst van het logo nu ook zichtbaar, zelfde geldt als alle styles uitgeschakeld zijn
-bij print styles kan nu ook gekozen worden omgewoon de tekst weet te geven ipv. het logo zelf

Waar ik zelf nog bij twijfel is de title attribuut van het a element. Opzich slaat de title van het h1 element hier op de tekst van de achtergrond afbeelding terwijl die van het a element eigenlijk refereert naar het doel van de anker. Is dit een correct gebruik daarvan?

Als iemand commentaar heeft dan is dat altijd welkom natuurlijk.

[Cubix]

Ik heb commentaar

Een id opgeven is voor een h1 niet nodig. Ik neem aan dat je een h1 maar één keer voor laat komen op je site, dus een extra identificatie is niet nodig. Scheelt code.

Verder vind ik die span's niet nodig. Ik zou bij "h1#logo a" het volgende neerzetten:

Cascading Stylesheet:

text-indent: -10000px;

Weer scheelt dit code, maar niet iedereen vindt het netjes om de tekst ver buiten beeld te zetten ipv het niet weer te geven. Wat denken jullie?

[crisp]

text-indent heeft als negatieve eigenschap dat de tekst met een click&sleep beweging van de muis soms toch naar voren komt. Ook de in-page search van Firefox kan roet in het eten gooien. Derhalve kies ik meestal ook voor een extra element (over het algemeen een span).

Mijn (algemene) CSS-tip: probeer zoveel mogelijk 'in de flow' te werken. Gebruik alleen floats, absolute positioning en/of relative positioning als het echt noodzakelijk is.

Een manier om floats te clearen zonder extra element (om de container dus zeg maar de float te laten omsluiten) is door je container overflow: hidden of auto te geven.

Nog een algemene tip: werk zoveel mogelijk in standards-compliance mode - je loopt dan minder tegen 'verrassingen' aan in alternatieve browsers. IE-bugs en tekortkomingen kan je het beste oplossen met een extra stylesheet die je dmv conditional comments inlaadt. Vermijdt hacks op basis van CSS-parsing bugs zoveel mogelijk.

De C in CSS staat voor Cascading - maak daar gebruik van! Probeer specifieke rules echter zo specifiek mogelijk toe te passen dmv selectors.

[ Voor 64% gewijzigd door crisp op 12-10-2005 22:58 ]

[Michali]

@Cubix: Meestal komt in de 'werkelijke' content wel weer een h1 voor, dus vandaar dat ik de h1 voor het logo zo apart identificeer. Sites die ik maak worden namelijk vaak op een CMS aangesloten, waarbij je dus vrij weinig controle hebt over wat voor HTML daar uit komt rollen. Meestal zit de content dan vol met h1 elementen. Ik vind de manier met een span toch iets netter overigens.

@crisp: Beide tips probeer ik altijd zo goed mogelijk te volgen. Ik soms wel eens problemen bij mensen die floats plaatsen op elementen waarbij dat geheel niet nodig is. Alleen echt het noodzakelijk is vaak ook gewoon het beste.

Ik heb laatst ook een site gemaakt welke ik alleen in Firefox en IE hoevde te testen en ook heb gedaan. Ik heb eigenlijk puur in standards compliance mode gewerkt en dat heeft erg goed uitgepakt. Ik kreeg laatst nog een mailtje van iemand die de site nog in wat alternatieve browsers heeft getest. Het bleek dat hij ook in konqueror, safari en opera gewoon perfect bleek te werken. Wel leuk om te weten

[Boelie-Boelie]

@Michali:
Is het gebruik van het title-attribuut bedoeld om de nadelen van display:none bij gebruik van tekstbrowsers te pareren? (Overigens, zie voor meer image replacementtechnieken en hun nadelen het Mezzoblueartikel Revised image replacement.)

Verder vind ik Hierachy, een artikel op Jogin.com over het gebruik van headings, best interessant, ook de daarin te vinden links. Hoeveel h1's je gebruikt, hangt denk ik uiteindelijk af van wat voor paginastructuur je wilt hebben en wat je ziet als alomvattende kop: de sitenaam die sommigen op elke pagina herhalen (één h1), of de title van de pagina (meerdere h1's mogelijk, één per paginasectie).

[André]

Mij ontgaat het nut van die rare h1+css constructie om een logo op een pagina te plaatsen. Waarom niet gewoon een img tag? Dan kun je er ook nog een alt-tekst in kwijt.

[Woudloper]

André schreef op donderdag 13 oktober 2005 @ 08:42:
Mij ontgaat het nut van die rare h1+css constructie om een logo op een pagina te plaatsen. Waarom niet gewoon een img tag? Dan kun je er ook nog een alt-tekst in kwijt.

Dat vraag ik mij ook weleens af, hoewel ik het semantisch gezien wel kan begrijpen omdat je dan je pagina leesbaar houdt voor mensen die zonder afbeeldingen werken op hun browser.

Als je met gewoon een afbeelding (img tag dus) werkt zorg je er in ieder geval wel voor dat het logo ook geprint wordt en dat is weer niet het geval wanneer je met de css oplossing werkt zoals hierboven is aangegeven.

[Verwijderd]

In mijn ogen moet je gewoon de IMG element gebruiken in dit voorbeeld (samen met H1 natuurlijk). Het logo is namelijk iets belangrijks, het is iets waar mensen jouw bedrijf (of waar jouw website ook voor is) aan kunnen herkennen.

Woudloper schreef op donderdag 13 oktober 2005 @ 08:49:
Dat vraag ik mij ook weleens af, hoewel ik het semantisch gezien wel kan begrijpen omdat je dan je pagina leesbaar houdt voor mensen die zonder afbeeldingen werken op hun browser.

Daar zorgt de alt attribuut voor

[Woudloper]

Verwijderd schreef op donderdag 13 oktober 2005 @ 08:57:
Daar zorgt de alt attribuut voor

Natuurlijk klopt dat ook wel, maar geld het bijvoorbeeld ook dat de alt tekst dan wordt gedisplayed als bijvoorbeeld een heading, bv:

HTML:

<h1>[img]"logo.png"[/img]</h1>

[Clay]

Als je met gewoon een afbeelding (img tag dus) werkt zorg je er in ieder geval wel voor dat het logo ook geprint wordt en dat is weer niet het geval wanneer je met de css oplossing werkt zoals hierboven is aangegeven.

Daar is ook weer een combo van te maken (als het nodig is) een H1 tag met 2 images erin; 1 voor web (alt tekst ziet er ook goed uit in h1 dan als imgs ontbreken), en 1 voor print die er mooi uitziet op wit. Verder is de img tag imo alleen geschikt voor afbeeldingen die bij je content horen, iig niet voor design elementen.

Wat ik zelf trouwens ook vaak doe is dit:

Cascading Stylesheet:

body {
   font-size:11px;
}

* {
   font-family:blablabla;
   font-size:100%;
}

Dan kan je voor alle afwijkende font sizes (bv headers) in je pagina ook % opgeven, en als je dan je body fontsize verandert (mooi centraal op 1 plek) scalet alles netjes mee. Wat me overigens herinnert aan iets dat ook de wereld uitgeholpen moet worden; stylesheets waar meer dan 1 keer font-family instaat (per gebruikt font dan).

[Bosmonster]

Woudloper schreef op donderdag 13 oktober 2005 @ 09:06:
[...]

Natuurlijk klopt dat ook wel, maar geld het bijvoorbeeld ook dat de alt tekst dan wordt gedisplayed als bijvoorbeeld een heading, bv:

HTML:

<h1>[img]"logo.png"[/img]</h1>

Nee, maar dat wil je ook niet. Een tekstbrowser is voor mensen die bijvoorbeeld een screenreader gebruiken. Die willen weten of iets een image is (logo bijvoorbeeld) en niet in dit soort onzinnige css constructies terecht komen, omdat de ontwerper dat zonodig moet bepalen voor de gebruiker. De tekstbrowser is zo gemaakt om normale semantisch correcte html weer te kunnen geven.

Als je aan wilt geven dat een image bijvoorbeeld een header is ergens voor, zet dit dan netjes in de alt-tag, bijvoorbeeld "header Disclaimer", zodat de reader netjes weergeeft dat het een image is, header disclaimer.

M.a.w. ik vind dit de meest onzinnige constructie ooit, juist uit usability oogpunt.

Dus nu we het toch over Best practices/Tips&tricks hebben, gebruik gewoon img tags waar ze voor bedoeld zijn.

[ Voor 51% gewijzigd door Bosmonster op 13-10-2005 09:32 ]

[eghie]

Ik doe het ook wel eens hoor, een logo invoegen dmv CSS. Dit doe ik, omdat ik dan een soort van thema achtig iets gebruik met die CSSjes. En daar hoort vaak ook een apart logo bij. Dus kan ik per CSS een ander logo regelen. Die 2e methode in de startpost vind ik zeker een mooie methode. Dat met gewone text erin gebruikte ik nooit, maar de TS heeft me zojuist het licht laten zien .

[Savantas]

@ Clay: Maar in plaats van % is het toch typografisch correcter om em te gebruiken? Dit zorgt er ook voor dat elke definitie ten opzichte van de basislettergrootte word gezet. Komt verder op hetzelfde neer, dat wel.

[b19a]

Bosmonster schreef op donderdag 13 oktober 2005 @ 09:28:
Als je aan wilt geven dat een image bijvoorbeeld een header is ergens voor, zet dit dan netjes in de alt-tag, bijvoorbeeld "header Disclaimer", zodat de reader netjes weergeeft dat het een image is, header disclaimer.

M.a.w. ik vind dit de meest onzinnige constructie ooit, juist uit usability oogpunt.

Dus nu we het toch over Best practices/Tips&tricks hebben, gebruik gewoon img tags waar ze voor bedoeld zijn.

HTML:

<h1>Tweakers.net</h1>

<style type="text/css">
  h1 { text-indent: -1000px; background... }
</style>

Een screenreader zou hier dusproblemen mee gaan geven wil je zeggen?

Ik prefereer namelijk semantische code, en zie dan ook liever mijn constructie dan die met images in een header.

[NickH]

Nog zo'n tip:

code:

<div id="logo">[img]"img/logo.gif"[/img]</div>

en dan:

code:

#logo {
  font-size: 130%;
  font-weight: bold;
  }

Moderne browsers geven de alt text weer als het plaatje niet gevonden kan worden, of als plaatjes uitgeschakeld zijn op het systeem van de gebruiker. Zo staat er altijd nog een logo, en het is screenreader vriendelijk

[ Voor 59% gewijzigd door NickH op 13-10-2005 11:02 . Reden: even wat uitleg erbij ]

[TeeDee]

Zie nu het e.e.a. mbt een logo en/of een h1, en dit zette me toch aan het denken.

HTML:

<h1>Dit is de titel van de pagina</h1>
[img]"i/logo.gif"[/img]

Persoonlijk vind ik niet dat je de titel van een pagina gelijk mag/moet stellen aan je logo.
Hoe je de hele meuk dan plaatst is afhankelijk van je CSS natuurlijk.

Of zit ik er dan semantisch gezien helemaal naast?

[NickH]

TeeDee schreef op donderdag 13 oktober 2005 @ 11:10:
Zie nu het e.e.a. mbt een logo en/of een h1, en dit zette me toch aan het denken.

HTML:

<h1>Dit is de titel van de pagina</h1>
[img]"i/logo.gif"[/img]

Persoonlijk vind ik niet dat je de titel van een pagina gelijk mag/moet stellen aan je logo.
Hoe je de hele meuk dan plaatst is afhankelijk van je CSS natuurlijk.

Of zit ik er dan semantisch gezien helemaal naast?

Niet de titel van je pagina, maar je logo/bedrijfskreet. Als het plaatje dan niet werkt, of als css uitgeschakeld is ziet de gebruiker en de screenreader toch nog wat.

[OkkE]

Boelie-Boelie schreef op donderdag 13 oktober 2005 @ 03:08:
Verder vind ik Hierachy, een artikel op Jogin.com over het gebruik van headings, best interessant, ook de daarin te vinden links. Hoeveel h1's je gebruikt, hangt denk ik uiteindelijk af van wat voor paginastructuur je wilt hebben en wat je ziet als alomvattende kop: de sitenaam die sommigen op elke pagina herhalen (één h1), of de title van de pagina (meerdere h1's mogelijk, één per paginasectie).

Erg interessant artikel inderdaad, en ook de links zijn zeker de moeite waard om te lezen!

Helaas ben ik wel gelijk gaan twijfelen over welke opzet ik ga kiezen voor mijn nieuwe website.. Lastig. Voor mijn gevoel is, net als bij een boek, de H1 voor de kop boven het artikel. Waarbij je de <titel> als boekomslag kunt beschouwen.
Maar, als je elke pagina als los ziet, dan is het denk ik logischer om in de H1 de naam van je site te zetten..

[Bosmonster]

OkkE schreef op donderdag 13 oktober 2005 @ 11:27:
[...]


Maar, als je elke pagina als los ziet, dan is het denk ik logischer om in de H1 de naam van je site te zetten..

Dan is het handiger (ook als je kijkt naar bookmarks/zoekmachines) om juist de titel daarvoor te gebruiken. Je zet daarin zowel de titel van je site, als de naam van de pagina.

Het is sowieso 'best practice' om de pagina titels te herhalen in de titel-balk.

[ Voor 10% gewijzigd door Bosmonster op 13-10-2005 12:27 ]

[OkkE]

Helemaal mee eens, dat doe ik ook inderdaad. Maar zou je in de <h1> dan nogmaals de titel van je website zetten? De titel van het onderdeel? De titel van het artikel?

Laten we het zo stellen, ik heb een website met als titel A, daarin is een onderdeel B. Onderdeel B bevat artikelen, laten we dat artikel C noemen, waar een sub-titel D in zit.

De <titel> zou ik dan als volgt doen: C - B - A

Maar op de pagina zelf, hoe zit het daar?

code:

<h1>website A</h1>
<h2>onderdeel B</h2>
<h3>atrikel C</h3>
<p>Tekst</p>
<h4>sub D</h4>
<p>Tekst2</p>

of

code:

<!-- website in andere tag / img -->
<h1>onderdeel B</h1>
<h2>artikel C</h2>
<p>Tekst</p>
<h3>sub D</h3>
<p>Tekst</p>

of

code:

<!-- website naam en onderdeel in andere tag / img -->
<h1>artikel C</h1>
<p>Tekst</p>
<h2>sub D</h2>
<p>Tekst<p>

[NickH]

Semantisch gezien zou ik voor 1 gaan, dit is het meest logische, alhoewel je voor 2 en 3 ook sterke punten kan hebben.

Maar als je je website naam en/of onderdeel in een andere tag zet (b.v. een img) dan moet je wel zorgen dat dit duidelijk is, ook voor screenreaders (alt="Omschrijving")

[Verwijderd]

OkkE schreef op donderdag 13 oktober 2005 @ 13:10:
Helemaal mee eens, dat doe ik ook inderdaad. Maar zou je in de <h1> dan nogmaals de titel van je website zetten? De titel van het onderdeel? De titel van het artikel?

Laten we het zo stellen, ik heb een website met als titel A, daarin is een onderdeel B. Onderdeel B bevat artikelen, laten we dat artikel C noemen, waar een sub-titel D in zit.

De <titel> zou ik dan als volgt doen: C - B - A

Maar op de pagina zelf, hoe zit het daar?

[..]

1) zorg ervoor dat al je hx bij elkaar een nette inhoudsopgave (van die pagina) vormen, dan zie je vanzelf wat van toepassing is.

2) vergeet <div> niet te gebruken

[ Voor 31% gewijzigd door Verwijderd op 13-10-2005 15:35 ]

[Michali]

Ik kan wel begrijpen dat een img tag in princiepe beter is, maar het heeft toch enkele nadelen. Het is niet perfect te stijlen (hij sluit in de meeste browsers op een of andere manier nooit helemaal goed aan zoals je wilt). Je linkt direct naar een afbeelding, terwijl het imo toch een stijl iets is en geen content. Als het logo gewijzigd moet worden of (erger nog) moet verschillen in verschillende stylesheets, dan gaat een img tag gewoon niet door. Bovendien kan ik met de gegeven constructie nog andere leuke tricks uithalen, zoals een logo in meerdere delen, of combineren met andere zaken.

Persoonlijk denk ik dat je wel meerdere h1 elementen in een pagina kan gebruiken. Als het maar in een verschillende context is. Als je bijvoorbeeld een h1 voor het logo gebruikt, dan kun je best in het content vlak opnieuw in gebruiken, in princiepe staat dat (voor mijn gevoel) ook los van de rest van de pagina. Je hebt de content, en alles eromheen, 2 verschillende dingen. Mischien is dat voor een logische opbouw van het document niet zo fijn, maar meestal ontkom je er gewoon niet aan. (zeker niet als de content van een ongecontroleerde bron komt).

[ Voor 34% gewijzigd door Michali op 13-10-2005 15:42 ]

[OkkE]

Verwijderd schreef op donderdag 13 oktober 2005 @ 15:35:
1) zorg ervoor dat al je hx bij elkaar een nette inhoudsopgave (van die pagina) vormen, dan zie je vanzelf wat van toepassing is.

2) vergeet <div> niet te gebruken

Snap ik, misschien dat ik ook niet helemaal duidelijk was.. Maar wat vind jij een nette inhoudsopgave? Hoordt daar ook de titel van de website bij? En het onderdeel van de website waar je zit? Of is de inhoudsopgave alleen de titel en sub-titels van het artikel?

Michali schreef op donderdag 13 oktober 2005 @ 15:37:
Persoonlijk denk ik dat je wel meerdere h1 elementen in een pagina kan gebruiken. Als het maar in een verschillende context is. Als je bijvoorbeeld een h1 voor het logo gebruikt, dan kun je best in het content vlak opnieuw in gebruiken, in princiepe staat dat (voor mijn gevoel) ook los van de rest van de pagina. Je hebt de content, en alles eromheen, 2 verschillende dingen. Mischien is dat voor een logische opbouw van het document niet zo fijn, maar meestal ontkom je er gewoon niet aan. (zeker niet als de content van een ongecontroleerde bron komt).

Voor het lezen van het artikel op Jogin.com, dat Boelie-Boelie aangaf was ik het wel met je eens. Toch heeft dat artikel mijn mening hier over doen veranderen. Weet niet of jij het artikel ook al hebt gelezen?

[Michali]

Ook na het lezen van dat artikel ben heb ik nog steeds dezelfde mening. In een boek zie je ook wel eens zijbalken, met stukjes tekst die titels hebben. Wil dat zeggen dat die titels geen echte headers zijn? Net al bij een website zijn dat gewoon headers, net zo goed als die in de 'hoofd' content. Je moet die zijbalk en de content ook los van elkaar zien. De content wordt strureel opgebouwd, net als de zijbalk (menu bijvoorbeeld). Dit scheid je door het in een aparte divisie te zetten. Imo is het dus logisch dat je in 1 divisie container max 1 header niveau 1 gebruikt. Moeilijk punt daarbij is dan wel of je child divisies daarbij meetelt. In het geval van het gebruik van zo'n header voor een logo wordt dat mischien moeilijk.

[ Voor 8% gewijzigd door Michali op 13-10-2005 16:55 ]

[Verwijderd]

Hoewel ik het een goede ontwikkeling vind dat mensen zich bewuster gaan bezighouden met het juist toepassen van HTML voor bepaalde content-structuren heb ik het idee dat we nu iets te ver gaan. Het doet me een beetje denken aan de ruzie die vroeger ontstond over hoeveel engelen er op de punt van een naald konden dansen; je kunt teksten ook overanalyseren.

Ik denk dat de HTML standaard/richtlijnen met opzet vaag zijn gehouden. Ga daarom niet lopen ruzieen of optie 1 conceptueel beter is dan optie 2. Het gaat om het doel dat ermee bereikt wordt. Uiteindelijk zijn de verschillende tags meer een onderscheidend hulpmiddel voor de ontwikkelaar dan voor de eindgebruiker of browser.

[OkkE]

Ik ben het er mee eens dat het in dat artikel wel erg ver gaat, overanalyseren is ook wat overdreven. Maar ik vind het wel interessant om zo'n artikel te lezen, en er zelf over na te denken. Het is voor mij niet zozeer dat ik het "perfect" wil doen ofzo; het is in mijn ogen wel goed dat je als ontwikkelaar bewust een bepaalde structuur kiest, en niet "doet wat iedereen doet".

[Michali]

Even een ideetje waar ik gister op kwam.

HTML:

<div id="logo" title="logo">
  <a href="home.html">[img]"pad/naar/algemeen_logo.jpg"[/img]</a>
</div>

Cascading Stylesheet:

div#logo
{
  width: 100px;
  height: 100px;
  background: url(pad/naar/design_logo.jpg) no-repeat;
}

div#logo a
{
  display: block;
  width: 100px;
  height: 100px;
}

div#logo img
{
  display: none;
}

Het is een beetje een hybride van de 2 versies die in dit topic gegeven waren. Ik vond het zelf wel geslaagd, of ben ik heel vreemd bezig?

[ Voor 11% gewijzigd door Michali op 28-10-2005 16:49 ]

[Verwijderd]

Op simplebits liep ook een hele dicussie: http://www.simplebits.com/notebook/2005/10/05/bplogos.html over het "Bulletproof" maken van je logos.

Wat je wilt is:
- Site omschrijven / titel als tekst in h1, voor de googlebots (Search Engine Optimization (SEO))
- Geen css -> wel tekst
- Wanneer het logo niet laadt (plaatje) dat de tekst zichtbaar is

Ook leuk om eens te lezen: http://mezzoblue.com/test...age-replacement/index.php Hier staan een hele boel werkenden oplossing + nadelen.

[ Voor 6% gewijzigd door Verwijderd op 29-10-2005 11:59 ]

[sjaakaq]

Vraagje over inline-styles:

Vaak gebruik ik bepaalde styles maar 1 keer. Dus -bijvoorbeeld- ik heb op een bepaalde pagina 10 blockquotes (stijl gedefinieerd in externe CSS) waarvan 1 blockquote een grijze achtergrond moet krijgen. Moet ik die blockquote dan een id meegeven en in de externe CSS stylen, of is het beter om dan een interne style tye gebruiken (dus: <blockquote style="background: #666;">lala</blockquote>)?

[NickH]

leokennis schreef op zaterdag 29 oktober 2005 @ 12:55:
Vraagje over inline-styles:

Vaak gebruik ik bepaalde styles maar 1 keer. Dus -bijvoorbeeld- ik heb op een bepaalde pagina 10 blockquotes (stijl gedefinieerd in externe CSS) waarvan 1 blockquote een grijze achtergrond moet krijgen. Moet ik die blockquote dan een id meegeven en in de externe CSS stylen, of is het beter om dan een interne style tye gebruiken (dus: <blockquote style="background: #666;">lala</blockquote>)?

Om het netjes en overzichtelijk te houden zou ik het in je css file zetten. Op die manier kan je die ID ook nog aanroepen vanaf andere pagina's. Dus:

- een CSS file wordt maar 1x geladen
- je html file wordt kleiner

Het klinkt misschien insignificant, maar als je 5x zo'n situatie hebt op een grote site, scheelt het je al bandbreedte

[Michali]

Ik zou inline styles zo veel mogelijk proberen te voorkomen. Het geven van een achtergrond kleur is puur iets wat met de opmaak te maken heeft dat behoort gewoon in een externe stylesheet. Ik gebruik het alleen bij dynamische sites als een property ergens uitgelezen wordt (zoals een achtergrond afbeelding bijvoorbeeld). Ik zou die blockquote gewoon een id of class geven en hem zo stijlen. Zo kun je de style ook gemakkelijk op 1 plaats aanpassen.

[ Voor 17% gewijzigd door Michali op 29-10-2005 13:14 ]

[Verwijderd]

Michali schreef op vrijdag 28 oktober 2005 @ 16:49:
Even een ideetje waar ik gister op kwam.

HTML:

<div id="logo" title="logo">
  <a href="home.html">[img]"pad/naar/algemeen_logo.jpg"[/img]</a>
</div>

Cascading Stylesheet:

div#logo
{
  width: 100px;
  height: 100px;
  background: url(pad/naar/design_logo.jpg) no-repeat;
}

div#logo a
{
  display: block;
  width: 100px;
  height: 100px;
}

div#logo img
{
  display: none;
}

Het is een beetje een hybride van de 2 versies die in dit topic gegeven waren. Ik vond het zelf wel geslaagd, of ben ik heel vreemd bezig?

Je zou ook nog de alt tekst van het plaatje kunnen stylen, wanneer het plaatje niet laadt zal de alt tekst gestyld zichtbaar worden in firefox / opera

[Michali]

Maar de afbeelding is nooit zichtbaar, dus ook de alt tekst niet als het plaatje niet gevonden wordt. Volgens mij wordt de afbeelding niet eens geladen zo. Stijlen heeft dus weinig zin. Of je moet met font tags moeten gaan werken, maar dat ik nou ook weer niet de bedoeling

[ Voor 11% gewijzigd door Michali op 01-11-2005 12:27 ]

[Verwijderd]

Na eventjes alle image replacement technieken en bijhorende pro's/contra's bekeken & vergeleken te hebben voor een bedrijf dat SEO even belangrijk als lay-out acht, kwam ik op de volgende methode terecht. In mijn ogen is deze de meest symantisch correcte methode. (alhoewel ik voor dit voorbeeld nog een id gebruik, kan je deze gemakkelijk weglaten, dat is wat ik gedaan heb. Maar voor dit in een reeds bestaande site te implementeren is dit voorbaaldje misschien gemakkelijker )

HTML:

<h1 id="logo" title="$bedrijfsnaam - $slogan (Bedrijfslogo)"><span></span>$bedrijfsnaam - $slogan</h1>

Cascading Stylesheet:

#logo {
    margin: 0 300px 0 0;
    width: 369px;
    height: 99px;
    position: relative;
    }
#logo span {
    background: url(../gfx/logo.gif) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    }

[simon]

<span></span> lijkt me nogal niet semantisch correct, dat lijkt me element misbruiken....

[Verwijderd]

Tjah, daarvoor leek het my ook de 'meest' symatisch 'mogelijke' oplossing, zonder al teveel misbruik
van quirks. Een leeg element lijkt me dan nog altijd beter dan bvb een javascript oplossing, die dan wél symantisch correct kan zijn maar niet op alle platformen weergegeven kan worden.

En ook in het kader van SEO is deze statische IRT optimaal, zowel in google als msn search ervaren.

Edit : typo + 2nd opinion

[ Voor 23% gewijzigd door Verwijderd op 01-11-2005 19:29 ]

[disjfa]

Verwijderd schreef op dinsdag 01 november 2005 @ 19:26:
Tjah, daarvoor leek het my ook de 'meest' symatisch 'mogelijke' oplossing

Jouw methode is absoluut niet semantisch correct. Als je al een van de voorbeelden in het topic had gezien was je daar al achter gekomen aangezien bijna alle voorbeelden redelijk netjes zijn.

Jouw manier vind ik eerder mysterieus en ik volg niet waarom je een header zo inelkaar zou willen zetten.

[Verwijderd]

ter verduidelijking
het betreft de meest symantische oplossing mbt lay-out en -toegankelijkheid-

Was ik misschien vergeten te melden, my bad.

Het gaat erom dat deze techniek in zoveel mogelijk omstandigheden zijn werk doet.
Zo indexeert een zoekmachine deze zoals een gewone header, wordt bij het niet weergeven van de afbeelding en/of css gewoon de header weergegeven, en worden de screenreaders niet verstoord in hun werk. Een soort van mooie downgrade zou ik het noemen.

En het enige extra element dat ik daarvoor nodig heb is een lege span. Niet bepaald supernetjes, maar imho beter dan een div errond bouwen e.d.

Ik breek dan ook niet de andere technieken af, het is uiteindelijk toch een proces van wikken en wegen, maar in mijn situatie bleek deze oplossing de beste.

[Michali]

Bekijk het voorbeeld in mijn startpost dan nog eens. Die verschilt niet eens zo veel van die van jou, met als toevoeging dat ik in die span ook de inhoud van de title zet, waardoor in een text browser de titel ook wordt weergegeven, als css dus niet toegepast wordt (Mischien dat de title in de header wel gerenderd wordt dan, maar daar ben je ook niet zeker van).

[Clay]

vandaag langsgekomen op meyerweb,
http://positioniseverything.net/articles/onetruelayout/

comment #5 vat het echter wel mooi samen;

Fascinating techniques and very well researched; the sheer amount of patches needed for just about every browser out there is tempering my enthousiasm, though. Especially the huge padding/negative margin technique strikes me as les-then-elegant.

Still, a deep bow to Mr. Robinson for working out and publishing these techniques.

Met name de equal height methode heeft een hoog hack gehalte (getuige ook de vele uitzonderingen), wat imo een flink nadeel is vergeleken met faux columns.

[simon]

Verwijderd schreef op dinsdag 01 november 2005 @ 19:40:
ter verduidelijking
het betreft de meest symantische oplossing mbt lay-out en -toegankelijkheid-

Was ik misschien vergeten te melden, my bad.

Het gaat erom dat deze techniek in zoveel mogelijk omstandigheden zijn werk doet.
Zo indexeert een zoekmachine deze zoals een gewone header, wordt bij het niet weergeven van de afbeelding en/of css gewoon de header weergegeven, en worden de screenreaders niet verstoord in hun werk. Een soort van mooie downgrade zou ik het noemen.

En het enige extra element dat ik daarvoor nodig heb is een lege span. Niet bepaald supernetjes, maar imho beter dan een div errond bouwen e.d.

Ik breek dan ook niet de andere technieken af, het is uiteindelijk toch een proces van wikken en wegen, maar in mijn situatie bleek deze oplossing de beste.

semantiek heeft niet erg veel met layout of toegankelijkheid te maken. semantiek betekent dat je de elementen van de taal gebruikt waarvoor ze gemaakt zijn.

[Verwijderd]

@simon:
mbt <- met betrekking tot, dus mede in achting genomen.

Ik vat het principe wel, h1 volgens mij een element met een betrekkelijke waarde.
Maar de lege span die tussen de h1 tag staat heeft niets van waarde, en dat is nu juist waar ik het op heb. Het enige doel van die span is om een mooi trucje uit te halen mbv css. Da's al.

En aangezien toegankelijkheid nu toch een issue is .. hier eventjes een WiP mbt toegankelijkheid.

Iedereen kent wel het fenomeen dat, indien je iets wilt verbergen voor de gewone gebruikers en alleen maar aan screenreaders & css-loze browsers wilt voorschotelen, je deze op bvb -3000px left en top zet en er niets meer mee aanvangt.

Overlaatst had ik echter toevallig een vermelding gelezen dat de meeste 'minderbedeelden' door de links tabben. Dus waarom deze verborgen links niet in een hoog contrast weergeven voor de slechtzienden of diegene die geen muis kunnen gebruiken maar toch voor de een of andere reden onze diensten nodig hebben. Daarom heb ik het volgende even vlug in elkaar gezet.

Deze is nu wel specifiek op mijn situatie gericht, maar je snapt het idee wel

Cascading Stylesheet:

#topnav li.skip {position: absolute; left: 0; top:0; font-size: small;list-style: none;}
#topnav li.skip a, #topnav li.skip a:visited {display: block; position: absolute; top: -3000px; left: -3000px; font-size: small; background: #fff; padding: 10px; width: 1px; color: #2469DC;}
#topnav li.skip a:hover, #topnav li.skip a:active, #topnav li.skip a:focus, #topnav li.skip a:focus:hover {display: block; position: absolute; top: 5px; left: 10px; font-size: 150%; background: #fff; border: solid 2px #2A71E4; padding: 10px; width: 17em; z-index: 1; color: #2469DC;}

En de bijhorende html is als volgt

HTML:

<ul id="topnav"><li class="skip"><a href="#nav" title="naar Navigatie springen">Naar Navigatie springen</a></li><li class="skip"><a href="#zoekveld" title="naar Zoekveld springen">Naar Zoekveld springen</a></li><li><a title="Sitemap bekijken" href="sitemap.html">Sitemap<span class="scr"> bekijken</span></a></li></ul>

Nu stuit ik echter op een probleem. De mozaic eingine rendert deze a:hover en a:active niet altijd zoals het hoort, geen probleem dacht ik eerst aangezien deze dan zoals normale links alleen maar voor screenreaders e/d bedoelt zijn. Maar ik heb graag enige consistentie in het al dan niet weergeven van de links in kwestie. Dus weet er iemand een degelijke css workaround voor mijn probleem ?

De WiP in kwestie

Alleszins levert dit geen problemen op in FF of css disabled e.d. Dit is dan ook om te tonen dat het ook nét iets anders kan als het op toegankelijkheid aankomt.

[disjfa]

Verwijderd schreef op woensdag 02 november 2005 @ 16:59:
Ik vat het principe wel, h1 volgens mij een element met een betrekkelijke waarde.
Maar de lege span die tussen de h1 tag staat heeft niets van waarde, en dat is nu juist waar ik het op heb. Het enige doel van die span is om een mooi trucje uit te halen mbv css. Da's al.

Dus je zegt het zelf al. Niets met semantiek te maken maar een truukje van jezelf

Iedereen kent wel het fenomeen dat, indien je iets wilt verbergen voor de gewone gebruikers en alleen maar aan screenreaders & css-loze browsers wilt voorschotelen, je deze op bvb -3000px left en top zet en er niets meer mee aanvangt.

Nee, dat weet ik niet. Dat is ook echt absoluut geen mooie oplossing. Meer een beginners oplossing die niet echt al te handig is.

Cascading Stylesheet:

position: absolute

Waarom

Ik vind het iig wel knap dat jij hier aankomt en alles wat wij zeggen wegveegt en ons even vertelt wat semantiek is. Mischien moet je er zelf een keer naar kijken. Zou op zich wel handig kunnen zijn en je veel problemen in de toekomst kunnen voorkomen.

[Verwijderd]

Ok, om even op die semi-troll van je te reageren

Ik heb denk ik wel duidelijk genoeg vermeld dat deze oplossing in mijn geval het meest toereikende was. Ik heb denk ik ook gezegd waar mijn oplossing al dan niet symantisch was en waar de schoonheidsfout zit. Deze heb ik reeds in bovenstaande posts vermeld en iemand die deze leest heeft er denk ik geen baat bij dat deze herhaald worden.

De -3000px oplossing heeft puur te maken met het feit dat screenreaders de display:none minder geneigd zijn te lezen dan een negatief gepositioneerd element. (screenreadertest).

Feit is dat ik de mogelijkheden voordraag die uit een afweging tussen die 3 pilaren voortkomt.

Let wel dat ik position: absolute zoveel mogelijk vermijdt als mogelijk, maar voor sommige zaken kan ik er nu eenmaal niet rond. Er is ook nog zoiets als het bedrijf dat deze zaken niet in de basic lay-out wil zien.

Ik vind het iig wel knap dat jij hier aankomt en alles wat wij zeggen wegveegt en ons even vertelt wat

Ik breek dan ook niet de andere technieken af, het is

Lezen, het is me wat.


De truc achter de image replacement kan je tevens nalezen op mezoblue (zie ook de post van TimD). En wat symantiek nu daadwerkelijk inhoud en zal worden voor het W3 kan je hier lezen.

Imho hadden ze het woord symantiek wel beter mogen definieëren als bijvoorbeeld data volgens waarde in een document bijvoorbeeld.

[We Are Borg]

Verwijderd schreef op woensdag 02 november 2005 @ 19:05:
De -3000px oplossing heeft puur te maken met het feit dat screenreaders de display:none minder geneigd zijn te lezen dan een negatief gepositioneerd element. (screenreadertest).

Intressant artikel. Ik gebruik altijd display:none en anders vis:hidden, maar blijkbaar hebben ze niet het gewenste effect. Ik vind alleen de negatieve margin en absolute positioning niet super, maar een andere oplossing is er volgens mij niet

[BasieP]

We Are Borg schreef op woensdag 02 november 2005 @ 23:55:
[...]
Intressant artikel. Ik gebruik altijd display:none en anders vis:hidden, maar blijkbaar hebben ze niet het gewenste effect. Ik vind alleen de negatieve margin en absolute positioning niet super, maar een andere oplossing is er volgens mij niet

nu snap ik dat je je site toegankelijk wilt maken, maar door dit soort 'truukjes' krijgen de screenreaders nou niet echt de terechte schop in de noten van de webdevelopers.

ik vind site bouwen volgens de regels (en netheid) beter dan een site bouwen met allemaal rare truukjes voor de meest maffe uitzonderingen.
ik vind het ergens jammer voor blinde mensen, maar dan moet er betere software komen ipv dat alle sites zich gaan aanpassen

[HawVer]

Simon schreef op dinsdag 01 november 2005 @ 19:14:
<span></span> lijkt me nogal niet semantisch correct, dat lijkt me element misbruiken....

Dan is <span /> altijd nog netter..

[Verwijderd]

HawVer schreef op donderdag 03 november 2005 @ 08:10:
[...]

Dan is <span /> altijd nog netter..

Dat maakt natuurlijk geen fluit uit in xhtml, is fout in html en kan problemen geven als je xhtml als html aan IE geeft