Amateurs

<rant alert, sla gerust over>

Boo! Hiss! Schande! Viezerd!

We hebben hier op het werk een website in xhtml en css, gemaakt door iemand extern. Daar liepen een aantal dingen mee verkeerd. Beweeg over de links van de hoofdtekst en de navigatie–floeps!–verdwijnt. Waar de navigatie links eindigt, is de tekst van de hoofdkolom naar links ingesprongen. Dergelijke dingen.

Als ik erbij vertel dat de problemen alleen optreden in Internet Explorer 6 voor Windows, dan weet al wie al een tijdje op tinternet zit en wat zuivere html-ontwikkeling achter de kiezen heeft, meteen waar het over gaat: de guillotine-bug, de driepixeltekstjog, van die typische onbegrijpelijk-waarom-bugs.

Het is dan alleen wat zoeken hoe het precies op te lossen, en waar precies.

…en dan komt het allemaal uit natuurlijk. Het is helemaal niet de schuld van Internet Explorer.

Ja natuurlijk: IE6 heeft zijn bugs, en IE6 doet raar, en die twee dingen hierboven zijn inderdaad zeer vieze bugs van IE6, en ja, IE6 gaat in de fout, en ja het zijn smeerlappen daar bij Mickey$oft, en Intervis Expl0der zuigt, en tralala… maar!

Als we er nu eens van uitgaan dat IE6 een incontournabel probleem is, en dat al bijna vijf jaar is, dan gaan we toch niet de problemen opzoeken?

Die lay-out staat stijf van de om-miserie-vragende dingen. Overal floats die tot op de pixel naast andere elementen staan (denk na voor je twintig elementen gebruikt als drie ook voldoende is), hacks binnen hacks binnen hacks, Holly hacks, html * hacks (gebruik conditionele comments verdorie, ze zijn er voor!), prutserijen met hardgecodeerd <li class="first">...</li>-dingen (gebruik unobtrusive javascript en DOM om die er automatisch bij te zetten), <li id="current"><a href="#"><span>...</span></a></li>-monstrositeiten (“current” is nauwelijks geschikt als ID, die <span> staat daar voor de één of andere hack, doe dat dan ook via DOM als het echt moet, of liever: vermijd het altogether), …

Het hele concept van die pagina is doodeenvoudig: header, middenkolom, linkerkolom, rechterkolom, footer. En toch staat het bol van de nutteloze crap. Volg even mee wat er onder de header gebeurt:

<div id="main">
   <div id="columns">
      <div id="content">
          <div id="leftcol">
             <div>
               <div class="section">
                  <h3><span>...</span></h3>
                  <ul><li>...<li></ul>
               </div>
               <div class="section">
                  <h2><span>...</span></h2>
                  <ul><li>...<li></ul>
               </div>
             </div>
          </div>
          <div id="maincol">
             <div>
                <h2><span>...</span></h2>
                ...
             </div>
          </div>
      </div>
   </div>
   <div id="rightcol">
      <div>
         <div class="section">
            <h3><span>...</span></h3>
            <ul><li><span>...</span><li></ul>
         </div>
         <div class="section">
            <h3><span>...</span></h3>
            <ul><li>...<li></ul>
         </div>
      </div>
   </div>
</div>

Bon, ik wil nog even voorbijgaan aan de keuze voor

<dummy>
  <links />
  <main />
</dummy>
<rechts />

als er eigenlijk niets is tegen

<main />
<links />
<rechts />

…maar: àl! die! divs! Gniii! Allez, dat is nu toch om miserie vràgen? En waar is dat voor nodig?

En pas op, ik bespaar u de css nog: alles (àlles!) expliciet in pixels. En uiteraard: eerst alle stijlen op niets zetten (ul li table tr td th p blockquote div img etc. allemaal expliciet op één fontgrootte geen margins geen padding geen niets ten duvel) en dan enerzijds twaalfentachtig keer overal een font aan koppelen, en anderzijds “details” vergeten: stijlen voor <h2> en <h3> in de lopende tekst bijvoorbeeld, of voor <dl>/<dt>/<dd>, of voor <ul> en <ol> en <li>. Of voor <td> en <th>. Gemakkelijk hoor. En o ja, in het algemeen <a> de stijl geven zoals die in de navigatie moet komen, maar er geen rekening mee houden dat niet noodzakelijk alle <a>‘s graag als display:block getoond worden. En <img> voor het gemak overal en altijd display:block, met een kadertje errond, met 5 pixels erboven en 15 eronder, en margin: 0 auto, toe maar.

Fucking amateurs. Heeft die mens ergens een paar artikels op ALA gelezen in de zomer van 2004, denkt hij dat hij het allemaal kan.

Ik zie Internet Explorer 5.5 en 6 een beetje als de oude televisies van het internet. Nieuwe televisies, daar kun je een logo helemaal in de hoek zetten, daar zijn rechte lijnen rechte lijnen, zelfs als ze langs de randen lopen. Oude televisies, daar lukt dat niet mee. Een logo helemaal pal in de rechterbovenhoek, dat wordt afgesneden. Rechte lijnen aan de rand van het scherm, als ze er al op komen, staan bol en zijn dikker in het midden. Op oude televisies zijn kleuren niet zo scherp. Schimmert het als de nieuwslezer een streepjespak aandoet.

Ja, wel, inderdaad: IE6 heeft problemen met CSS.

Houd daar dan verdomme rekenening mee! Als televisiemakers dat kunnen, waarom is dat dan zo moeilijk voor websitelayoutmakers? Dedju!

En dan maar zagen, zagen, zagen: Internet Explorer boehoe! Firefox joepie! Microsoft awoert! Open source r0olz! [met de occasionele opera is nóg veel beter en ‘t is niet eerlijk dat niemand ons gebruikt waaaa]

Fuckers.

<end rant, regular programming will resume in a sec>

14 reacties op “Amateurs”

  1. ja, ik heb hier ook een hoop delicious en flickrdingen van u in mijnen feed staan. Ik dacht al, 28 nieuwe posts, op een paar uur tijd, jawadde.

    Verder, durf nooit naar mijnen html/css kijken. (maar ik doe mij dan ook niet voor als een pro)

  2. Hm, ik begrijp je punt, maar ik vind dat je hier en daar toch ernstig overdrijft 🙂 Een spannetje hier en daar kan toch heus geen kwaad (zeker als je hierdoor kan vermijden om een vieze CSS hack te moeten gebruiken). Geen mens of machine die hier ook maar enige hinder van ondervindt, lijkt me.

    En wat is er dan zo vreselijk aan een class=”first”? Wat moet je anders als IE6 de psuedo-class ‘:first-child’ niet begrijpt? Kan jij zo voor de vuist weg een DOM-script uit je mouw schudden dat die class=”first” aan DOM-gewijs toevoegt? En waarom zou het ‘bijplamuren’ van het DOM dan zoveel beter zijn dan een onschuldige class toevoegen 🙂 Dat het de maagdelijke semantiek verbreekt? Flauwekul 😉

  3. Zonder hier en daar overdrijven zou het niet meer geestig zijn om te klagen.

    Een spannetje hier en daar: akkoord. Maar niet overal lege spans en divs. Het is het totaalbeeld dat me tegensteekt.

    Class=”first”: ja, dat zou ik doen met een DOM-script. Op http://www.coleurop.be gebruik ik er zo een paar. Voor het gemak. En dat bijplamuren is niet beter of slechter, maar wel veel gemakkelijker.

    ‘t Zijn namelijk niet alleen de navigatie-ul’s die zo’n class=”first” op hun eerste li moeten lrijgen, maar *alle* uls en *alle* ols.

    Ik wens u veel plezier om uw frontpage-gebruikers uit te leggen hoe ze aan elke eerste lijn van elk van hun opsommingen een class moeten toevoegen.

  4. Zonder hier en daar overdrijven zou het niet meer geestig zijn om te klagen.

    Akkoord 🙂 Maar als je dit verhaal in een groter perspectief plaatst, dan moet je ook toegeven dat deze developer het ook weer niet zo ongelooflijk slecht voor mekaar heeft. Je weet ook wat voor wangedrochten van sites er vandaag afgeleverd worden (door de grootste en duurste bedrijven eerst). Deze heeft z’n code tenminste met de hand geschreven, heeft moeite gedaan om alles met CSS te positioneren etc. Ik zou je rants over websites van bedrijven BIEP, BIEP en BIEP dan wel eens willen lezen 🙂

  5. Vandaag nen helen dag bezig geweest met een website van een klant correct gepositioneerd te krijgen. Face it, IE 6 blijft een probleem in alle opzichten, en zonder hun 20tal bugs zou het een pak makkelijker html’en zijn.
    En ook daarbij heb ik lege div’s moeten gebruiken, en class=”first” voor het (dropdown) menu. Javascript gebruiken voor zo’n toestanden gebruik ik alleen in noodgevallen.
    En frontpage gebruikers uitleggen hoe ze een klasse toevoegen hoeft niet, want wij gebruiken ons CMS dat zo’n zaken regelt. In templates.

Reacties zijn gesloten.