Semantische HTML, CSS en jij

[LEiPiE]

Ik zien mijn collega's af en toe constructies als

code:

<p class="normal">tekst</p>

gebruiken en dat dan dus op ELKE <p> die er langs komt en uiteraard als je dan een normale <p> er tussendoor laat gaan dan krijgt die standaard Times in zwart op witte achtergrond... dan lopen de rillingen over m'n rug en het is ze ook niet uit te leggen dat het idee van CSS is dat je default dingen juist al zo mooi kunt vast leggen.
Daarnaast krijg je dan in dat er in door loopjes gegenereerde tabellen (ja, met echte tabulaire data ) waarin dit soort dingen wordt gedaan:

code:

<tr style="background: #CFCFCF; color: #747474; text-align: left; font-size: 8pt;"><td style="padding: 0px 0px 0px 5px;">Cell 1A</td><td align="center">Cell 1B</td><td align="right" style="padding: 0px 5px 0px 0px;">Cell 1C</td><td align="right" style="padding: 0px 5px 0px 0px;">Cell 1D</td></tr>
<tr style="color: #747474; text-align: left; font-size: 8pt;"><td style="padding: 0px 0px 0px 5px;">Cell 2A  <span style="font-weight: bold; font-size: 10; color : red; background: transparent; font-style: italic;"> 2Aextra</span></td><td align="center">Cell 2B</td><td align="right" style="padding: 0px 5px 0px 0px;">Cell 2C</td><td align="right" style="padding: 0px 5px 0px 0px;">Cell 2D</td></tr>

(Even de echte waardes vervangen door 'Cell xy')
Heb niet zoveel nekharen, maar die staan wel allen paraat dan.
Aan de andere kant, zo gauw ik er dan even wat classjes bij maak dan besparen we meteen op zo'n pagina 40KB en kan ik weer even trots op mezelf zijn
Zou er zoiets van maken:

code:

<tr class="alt"><td class="colA">Cell 1A</td><td class="colB">Cell 1B</td><td class="colC">Cell 1C</td><td class="colD">Cell 1D</td></tr>
<tr><td class="colA">Cell 2A  <span class="extra">2Aextra</span></td><td class="colB">Cell 2B</td><td class="colC">Cell 2C</td><td class="colD">Cell 2D</td></tr>

(waarbij colA en dergelijke uiteraard nuttigere namen zijn in de praktijk, helaas is voor elke kolom wel weer een opmaak nodig, jammer dat <col> en <colgroup> zo goed als niet werken - opdrachtgevers uitleggen dat dat wat zij vragen aan uiterlijk niet nuttig is is helaas ondoenlijk)

Daarnaast zit iedereen uiteraard wel eens vast met zaken die je alleen via omwegen voor elkaar krijgt. Bijvoorbeeld een drie koloms layout... meestal kiezen we dan toch voor een tabel dan voor de bekende faux-columns oplossingen. Daarbij komt dat de ontwerpen die wij aangeleverd krijgen (wij bouwen ook alleen maar) over het algemene op een grid uitgelijnd zijn en je 't wel te horen krijgt als zaken niet met elkaar lijnen. Ik ben zelf erg pro-goed-gebruik-van-html en de meeste zaken die ik zelf maak lukt dat ook wel goed. Maar zoals al eens genoemd: als je moet kiezen tussen uren divjes uitlijnen en een paar minuten table bouwen en dan in de baas z'n tijd.

[Alain]

leipie schreef op zondag 29 januari 2006 @ 18:01:

code:

<tr class="alt"><td class="colA">Cell 1A</td><td class="colB">Cell 1B</td><td class="colC">Cell 1C</td><td class="colD">Cell 1D</td></tr>
<tr><td class="colA">Cell 2A  <span class="extra">2Aextra</span></td><td class="colB">Cell 2B</td><td class="colC">Cell 2C</td><td class="colD">Cell 2D</td></tr>

Het zal misschien te maken hebben met de keuze van de namen die - zoals je zelf aangeeft - nuttig zouden moeten zijn. Het kan ook te maken hebben met mijn onervarendheid. Maar ik snap _echt_ niet wat dit stukje code moet doen. En dat is imho wat semantiek betekent.

[Victor]

AlainS schreef op zondag 29 januari 2006 @ 20:33:
[...]


Het zal misschien te maken hebben met de keuze van de namen die - zoals je zelf aangeeft - nuttig zouden moeten zijn. Het kan ook te maken hebben met mijn onervarendheid. Maar ik snap _echt_ niet wat dit stukje code moet doen. En dat is imho wat semantiek betekent.

Dit zijn twee rijen met een aantal kolommen uit een tabel, met daarop gruwelijk veel classes toegepast.

[Alain]

King_Louie schreef op zondag 29 januari 2006 @ 21:26:
[...]

Dit zijn twee rijen met een aantal kolommen uit een tabel, met daarop gruwelijk veel classes toegepast.

De tr en td's had ik idd ook herkend.

[chem]

King_Louie schreef op zondag 29 januari 2006 @ 21:26:
[...]

Dit zijn twee rijen met een aantal kolommen uit een tabel, met daarop gruwelijk veel classes toegepast.

Het zou idd een stuk minder kunnen; zelf gebruik ik liever een stukje eenvoudige javascript (icm cssQuery) die voor domme browsers (lees: IE) het eea. via JS emuleert. Omdat IE7 die selectors zelf al snapt.

Ik zet liever alles kaal op (de HTML dus), doe de opmaak met bv. firefox, of safari/opera, met css2.1 en css3 selectors. Eerst uitzoeken wat je allemaal nodig hebt. Daarna pragmatisch kijken of je de tekortkomingen in sommige browsers met JS oplost, met een col-class, of wellicht met een class in de HTML zelf.

Ik heb het gevoel, en meer is het ook niet, dat de HTML daarmee langer meegaat; zodra browsers (behalve IE, i know) de CSS3 technieken bv. gaan ondersteunen hebben ze de JS niet meer nodig; dan hoef ik enkel aan te geven, wanneer het mij dunkt, dat een bepaalde versie bepaalde fixjes niet meer nodig heeft.

[alienfruit]

Hmm, je vermelding van cssQuery is erg interessant. Binnenkort maar eens naar kijken