Ronde aanhalingstekens met <q>-tag

Waarschijnlijk is dit hier al lang bekend, maar goed … :)

Al een tijdje stoor ik me eraan dat Safari, wanneer ik de <q>-tag gebruik, de standaard Engelse aanhalingstekens laat zien ook al definiëer ik andere via CSS. Andere browsers (zoals Firefox en Opera) doen dit wel goed, zodat je daarin wel netjes bijvoorbeeld Nederlandse aanhalingstekens „” om een woord kan zetten.

Een oplossing waar ik onlangs op kwam is om het zo te doen:[code:1:0b922989fb]Q {quotes: "" "";
}
Q:before {content: "201E";
}
Q:after {content: "201D";
}[/code:1:0b922989fb] (de 201D en 201E kun je natuurlijk vervangen door de codes voor de gewenste aanhalingstekens).

Dit geeft het gewenste resultaat in Safari, Firefox en Opera, maar niet in IE — de Mac-versie geeft de standaard “” aanhalingstekens (en niet altijd op de goede plaats … ) terwijl de Windows-versie zoals gewoonlijk de hele <q>-tags negeert.

Wat jij wilt gebruiken, is nogal CSS 2. Sterker nog: afkomstig uit een working draft CSS 2.1. Dit betekent dat het een nog niet officieel vastgestelde specificatie is. De q-tag wordt mondjesmaat ondersteund en nog niet erg lang.

Daarnaast moet je er rekening mee houden dat iedere browser (soms zelfs afhankelijk van platform, programmaversie en in ieder geval origine) CSS-standaarden min of meer ondersteunt. Geen enkele browser ondersteunt alle beschikbare opties van CSS2, laat staan CSS2.1. Hoort bij webdesign, hadden we maar een vak moeten leren.

Helaas werk ik al aan websites vanaf 1997, dus alles wat nu iets meer universeel ondersteund wordt is voor mij al meegenomen. Een prettige bron van informatie vind ik DevGuru. Hier wordt niet alleen beschreven welke opties CSS biedt, maar ook hoe wijdverbreid de ondersteuning eigenlijk is.

Zie: http://www.devguru.com/technologies/css2/index.asp.

Hou er rekening mee dat IE voor Mac niet meer doorontwikkeld wordt en dat de laatste serieuze update aan mogelijkheden alweer een jaar of twee geleden is (voor zover mij bekend). Vergeet CSS2-ondersteuning in deze browser dus en gebruik hem niet te lang meer. En over IE voor Windows hoeven we het natuurlijk niet te hebben…

[quote:2686803da9="Umbwungi"]Hou er rekening mee dat IE voor Mac niet meer doorontwikkeld wordt en dat de laatste serieuze update aan mogelijkheden alweer een jaar of twee geleden is (voor zover mij bekend). Vergeet CSS2-ondersteuning in deze browser dus en gebruik hem niet te lang meer. En over IE voor Windows hoeven we het natuurlijk niet te hebben...[/quote:2686803da9]

Versie 5.0 is van 1999…

[quote:029eb6168e="Umbwungi"]Wat jij wilt gebruiken, is nogal CSS 2. Sterker nog: afkomstig uit een working draft CSS 2.1.[/quote:029eb6168e] Nee, afkomstig uit de CSS2 Specification, W3C Recommendation 12-May-1998 …

[quote:029eb6168e=“Umbwungi”]Geen enkele browser ondersteunt alle beschikbare opties van CSS2, laat staan CSS2.1.[/quote:029eb6168e]
Inderdaad, daarom deze tip — Safari ondersteunt <q> niet 100%, maar op deze manier kom je er toch dicht bij als je het mij vraagt.

[quote:029eb6168e=“Umbwungi”]Helaas werk ik al aan websites vanaf 1997[/quote:029eb6168e]
Hm … dan ben ik nog maar een broekje, denk ik, met m’n 11 à 12 jaar — ik weet niet meer precies wanneer ik m’n eerste stappen op het HTML-pad zette. (Waarmee ik niet wil zeggen dat ik alles weet, maar wel dat ik geen beginneling ben die net een beetje met een WYSIWYG-editor kan pielen.)

[quote:029eb6168e=“Umbwungi”]Hou er rekening mee dat IE voor Mac niet meer doorontwikkeld wordt[/quote:029eb6168e]
Dat was mij ook bekend, maar ik houd ervan om sites ook te testen in onwaarschijnlijke browsers, onder het mom van “Je weet maar nooit.”