Hey! Bezoek

FireFox 2 RC3 zie er errug slick dick uit, maar op mijn thuis-laptopje bevriest de browser om de één of andere reden met de regelmaat van de klok. Terwijl Firefox 2 RC3 op de Dell Latitude van m'n werk hier totaal geen last van heeft en ongestoord webpagina's blijft laden.

Ik beschouw mezelf niet als een hysterische gebruiker die in de stress schiet als een applicatie een keertje crasht, maar met tenminste zes freeze-ups in het afgelopen uur was ik het vandaag even meer dan zat. Waar ik vroeger zou zijn gaan uitpluizen waar het probleem zit, heb ik deze keer gekozen voor de gemakkelijke weg. Met andere woorden: Hup. Eraf met die handel en downgraden naar 1.5.0.7!

En toch. Ondanks mijn keuze voor the easy way out ... stiekem ben ik toch wel benieuwd waar de pijn nou precies zit:

• Te weinig rechten? Op mijn thuislaptop werk ik zoals het eigenlijk hoort - als een normale gebruiker met weinig rechten
• De combinatie Firefox met op de achtergrond Windows Media Player die liedjes loopt te blèren?
• Een onwillige Firefox extensie die roet in het eten gooit?
• De aanwezigheid van het dotnet 2.0 framework en een hele bult Microsoft developer shit die op mijn privé computer draait? - Ik heb eerder gemerkt dat een systeem niet direct stabieler wordt van de aanwezigheid van bijvoorbeeld Visual Web Developer ...

Eerlijk gezegd ... ik weet het niet. Er zijn zoveel redenen waarom het fout kan gaan. Het blijft zoeken naar de speld in een hooiberg. Hopelijk geeft de eerste productie release van Firefox 2 geen problemen ...

Pseudo elementen in Cascading Style Sheets gebruik je om bepaalde selectors op te maken. Het :first-letter pseudo element (CSS 2.1) bijvoorbeeld zet je in om de eerste letter van een element (een paragraaf) op te maken. Het :first-letter pseudo element wordt ondersteund door een behoorlijk aantal eigenschappen. Om er enkele te noemen: font, color, background, margin, padding, border, text-decoration, text-transform en line-height staan tot je beschikking.

Tot zover de theorie. In de praktijk gaat het vaak wat minder soepeltjes. Zo werd ik geattendeerd op het feit dat mijn Rammstein Sonne diezijntje crasht onder Internet Explorer. En ja hoor, Internet Explorer versie 6 gaat genadeloos tegen de vlakte. Au! Tijd om eens uit te zoeken waarvan Internet Explorer 6 dan zo van slag raakt.

Trial and error leert dat Internet Explorer 6 zich verslikt in de stijlbladcombinatie van een selector id en een childselector die voorzien is van de :first-letter eigenschappen voor background, margin en padding. Ter illustratie:

Voorbeeld 1 (werkt zonder problemen)

p:first-letter {
font-size: 200%;
font-weight: bold;
color: #000;
background: #ccc;
margin: 5px 0 2px 0;
padding: 1px 2px 0 0;
text-align: left;
}

Voorbeeld 2 (veroorzaakt een programmacrash in Internet Explorer 6)

#nb p:first-letter {
font-size: 200%;
font-weight: bold;
color: #000;
background: #ccc;
margin: 5px 0 2px 0;
padding: 1px 2px 0 0;
text-align: left;
}

Voorbeeld 3 (geen crash als background, margin en padding eigenschappen zijn uitgezet)

#nb p:first-letter {
font-size: 200%;
font-weight: bold;
color: #000;
/*
background: #ccc;
margin: 5px 0 2px 0;
padding: 1px 2px 0 0;
*/
text-align: left;
}

Is dit nou een schoolvoorbeeld van buggy behaviour of mis ik iets????

Met Opera kun je via beeld | broncode (of Ctrl + F3) de html code van een webpagina inzien. Niks bijzonders zover. Opera 9 biedt daarnaast de mogelijkheid om de pagina te bewerken en uit de cache te herladen om direct de effecten van de aangebrachte wijzigingen te bekijken. Hey. Dat laatste wist ik niet. Zo leer je elke dag weer wat bij.

Firefox bezit dergelijke functionaliteit niet. In elk geval niet out of the box. Want Firefox zou Firefox niet als er niet een extensie beschikbaar zou zijn om deze leemte aan functionaliteit te vullen. Als je de Web Developer extensie installeert heb je na een herstart van de browser ook de beschikking over een realtime browser editor.

Sinds afgelopen donderdag is Internet Explorer 7 Release Candidate 1 beschikbaar als download. En eerlijk is eerlijk, de mensen van het Internet Explorer development team lijken in elk geval hun best te doen om het vaak vreemde (en voor webbouwers ronduit ergerniswekkende) gedrag van vorige versies van Internet Explorer te verhelpen. En van IE7 een browser te maken die zich gedraagt volgens de regels van het W3C.

Zo doet programmamanager Markus Mielke op het Internet Explorer weblog verslag van de cascading style sheet veranderingen die geïmplementeerd zijn in IE7 RC1. Behalve een lange lijst met fixes voor stijlbladbugs valt er onder andere te lezen dat Internet Explorer 7 de hover pseudo class zal ondersteunen voor alle elementen (niet alleen voor ankers) en dat er ondersteuning is voor min-height, max-height, min-width en max-width. En dat zijn alvast twee zaken die mij erg aanspreken.

De definitieve versie van Internet Explorer 7 zal straks via de automatic updates functie van Windows worden uitgerold. Zodat een hele hoop computers deze browserversie zullen draaien. Alleen al daarom is deze blogpost naar mijn mening verplicht leesvoer. Zodat je weet wat je als websitebouwer allemaal kunt verwachten.

Genomineerd in de categorie kleine browser irritaties is .... het feit dat Microsoft met het contextmenu in de tabbladen in Internet Explorer 7 precies het tegenovergestelde doet als Firefox. In Mozilla Firefox ben ik gewend om met de rechtermuis te klikken op een tabblad om vervolgens met de onderste optie de betreffende tab de nek om te draaien. In Internet Explorer is het precies andersom. De onderste menuoptie opent juist een nieuw tabblad in plaats van de huidige tab te sluiten. Ik zou toch denken dat het handig is om qua volgorde te conformeren aan de norm. Blijkbaar denkt men daar in Redmond anders over. Een mooi voorbeeld van dwars doen als je het mij vraagt. Want Exit, Afsluiten, De grond in boren of Close ... hoe je het beestje ook wil noemen ... het zit altijd onderaan het menu. Niet bovenaan!

Wat dan wel weer handiger is geregeld in Internet Explorer 7: het kruisje om het actieve tabblad te sluiten als je met je muis boven het desbetreffende tabblad zweeft.

Zomaar een reactie uit het Internet Explorer Blog. Het cynisme druipt ervan af.


Awesome. You listened. I was shocked to see it. Honestly, I didn't know the IE team knew how to do that.

Now, how about listening to our other thousands of suggestions?

What's in a name? Een tijdje geleden werd op het IEBlog bekend gemaakt dat de officiëe naam van Internet Explorer zeven Internet Explorer 7+ zou worden. Zo'n twintigduizend mopperige uitingen in de comments later heeft het Internet Explorer Development Team toch maar besloten om dit idee te laten varen. De definitieve namen voor de volgende versie van Internet Explorer gaan worden:

Windows XP - Windows Internet Explorer 7 for Windows XP
Windows Vista - Windows Internet Explorer 7 in Windows Vista

Apart toch weer. Het verschil in naamgeving tussen Windows XP en Windows Vista bedoel ik. Voor Windows XP versus In Windows Vista.

Op ForgetFoo stond gisteren een link naar een artikel van Jacob De Verschrikkelijke Usuability Draak Nielsen: Screen Resolution and Page Layout. Een interessant onderwerp. Tijd om mijn standpunten over dit onderwerp eens te ventileren.

Bouwen voor een minimale schermresolutie?
Mogen websites gebouwd worden op basis van een minimale schermresolutie? Dat hangt ervan af. De vraag of een minimale schermresolutie een uitgangspunt mag bij het ontwerpen van een is mijn inziens sterk afhankelijk van het beoogde publiek van de website in kwestie.

Behoudend: een website van de overheid
Een website van de gemeentelijke overheid bijvoorbeeld heeft in principe alle burgers die woonachtig zijn in die gemeete als potentiële klant. Dat kunnen rijke, arme, jonge en oude mensen zijn. Een diverse doelgroep, waardoor het ontwerp van de website behoorlijk behoudend moet zijn. Want er is geen peil op te trekken over wat voor computerhardware de bezoeker beschikt. Een behoudend ontwerp dat geschikt is voor een schermresolutie van 800x600 pixels is raadzaam.

Beheerd: een intranetomgeving
Een intranet is een beheerde omgeving, waarin zowel de instellingen van de webbrowser als de hardware waarop de intranetwebsite bekeken wordt (in elk geval in grote lijnen) bekend zijn. Bijvoorbeeld: in een door group policy beheerde kantooromgeving waarin werknemers beschikken over een 17 inch TFT flatpanel met een standaard oplossend vermogen van 1280x1024 pixels is het naar mijn mening acceptabel om de intranetportal te bouwen op basis van een minimale resolutie van 1280x1024 beeldpunten.

Redelijk voorspelbaar: een website in een niche markt
Ergens tussen de twee bovenstaande voorbeelden in zit de website van een niche onderwerp. Bijvoorbeeld, een website van een gaming community zal aanzienlijk moderner kunnen omgaan met schermresolutie. Het is aannemelijk dat (het overgrote deel van) het publiek van een website over games beschikt over een snelle, moderne computer en een recente monitor. Geen dringende redenen daarhalve om de website ook op 800x600 zonder horizontaal scrollen te kunnen laden.

Meer stof tot nadenken
Als je jezelf als bouwer van websites bij de keuze van een ontwerp druk maakt over schermresolutie, dan zijn er ook nog wel andere gebieden die enige aandacht behoeven. Kleurdiepte bijvoorbeeld. Want net zoals bij schermresolutie kun je er in bepaalde gevallen niet van uit gaan dat je bezoeker beschikt over een grafische kaart die staat ingesteld op een kleurdiepte van 32bit. Op mijn kleurplaten website bijvoorbeeld maakte in de periode 1 mei t/m 31 juli bijna 12 % van mijn bezoekers gebruik van slechts 65K kleuren. 461 bezoekers (oké, het is maar 0,4 %) surfte zelfs met een kleurdiepte van 256 kleuren (8 bit).

De mensen die met een schermresolutie van 800x600 op leukvoorkids verschijnen worden dus op een partijtje horizontaal scrollen getrakteerd. En ook doe ik op die website geen enkele moeite om mensen met antieke grafische kaarten te behoeden voor lelijk ditherende afbeeldingen. Maar nogmaals: het is wel een bewuste keuze. De sop is de kool niet waard!

Vloeibare layout
Oh ja, Nielsen breekt in zijn artikel een lans voor het gebruik van een vloeibaar ontwerp (liquid layout). Naar mijn mening biedt een vloeibare layout soms een goede oplossing voor het schermresolutieprobleem. Bij pagina's met weinig inhoud biedt een vloeibaar ontwerp op hogere resoluties echter al gauw een vrij lege aanblik. En wil het ontwerp zoals je dat voor ogen had nogals eens uit zijn fatsoen getrokken worden.

Detectie van de schermresolutie
Het volgende scenario is een manier om op een charmante manier om te gaan met layout / schermresolutievraagstukken. Ga voor de layout van een website uit van een ontwerp op basis van een wat lagere schermresolutie. Om vervolgens met behulp van javascript te sniffen wat de ingestelde schermresolutie van de bezoekende computer is. En om tenslotte, als het mogelijk is een betere layout te gebruiken, de layout met client side scripting aan te passen aan de resolutie.

Een voorbeeld van deze techniek wordt gebruikt op UX Mag. Bij een schermresolutie van 1280 pixels breed wordt de content getoond in vier kolommen. Bij een lagere resolutie (ik heb getest bij 1024x768) wordt dit teruggebracht naar drie kolommen. De inhoud van de vierde kolom (die met de pacman erin) wordt bij een lagere resolutie onderaan ingevoegd). Kijk hier voor een screenshot van de manier waarop UX Mag de lay aanpast aan de resolutie. Sweeeeeeet!!

Na de eerste beta van Internet Explorer 7 was ik afgehaakt. De eerste reden is eigenlijk oneerlijk: ik kon niet gelijk wennen aan die rare nieuwe interface.

Maar belangrijker: de Windows vekenner van één van de computertjes waar de beta van Internet Explorer 7 op draaide werd ongenadig traag na update van de browser. En sloeg met enige regelmaat vast (een beetje zoals de geweldige Bill lookalike in deze Mac reclame af en toe wat hapert). Let op: Quicktime alert - link trouwens via hardcopy.

Ook het feit dat bepaalde stijlbladfunctionaliteit mank liep hielp zeker niet mee aan een positieve indruk van Internet Explorer 7 beta. De mouseover functionaliteit (a:hover) van links werkte bijvoorbeeld in een behoorlijk aantal gevallen niet (als het anker een div element als ouder had).

De tweede betaversie heb ik derhalve overgeslagen. Maar met de definitieve versie van IE7 aan de horizon en het bericht van Microsoft dat Internet Explorer 7 via de Windows Automatische Update functie zal worden aangeboden staat beta 3 sinds enige tijd weer gewoon op mijn laptop. Want als straks de halve wereld, bewust of onbewust, naar versie 7 migreert is het toch wel handig om enig inzicht te hebben in de bugs, quirks en eigenaardigheden van IE7 zitten.

Webwereld meldt: honderden manieren om Internet Explorer te laten crashen.

Honderden .... plus eentje. Wheee!

Man. Dit is nou nog eens een tof speeltje. Ik heb het over de uBrowser: een standalone programma dat gebruik maakt van de Gecko engine om webpagina's weer te geven. En vervolgens kun je de uBrowser hele aparte dingen laten doen met de betreffende pagina. Zoals in het screenshot hieronder. Niet echt bruikbaar, maar gewoon way kewl. Getuige het ventilatorgeloei moet mijn laptoppie zich trouwens wel in het zweet werken om een webpagina als wapperende vlag weer te kunnen geven.

Check het uBrowser project

Te lezen in de GGD Kennisnet nieuwsbrief die zojuist op mijn virtuele deurmat plofte:

GGD Kennisnet blijft in beweging! Niet alleen is er continu aandacht voor de softwareontwikkeling, ook de lay-out en de gebruiksmogelijkheden worden doorontwikkeld. Op dit moment is het verbeteren van de gebruiksvriendelijkheid een belangrijk aandachtspunt.

Natuurlijk. Goed initiatief. En aandacht voor de gebruiksvriendelijkheid is geen overbodige luxe.

Want persoonlijk zou ik het wel op prijs stellen als er wat meer aandacht zou zijn voor crossbrowser coderen. Momenteel is GGD Kennisnet onder Firefox naar mijn mening net ietsje teveel in beweging.

Daar gaan we. Wat vind ik van de Internet Explorer 7 Beta 2 preview die gisteravond beschikbaar kwam? Hieronder een aantal losse opmerkingen / bevindingen.

Interface
Mijn eerste reactie op de interface: vrij rommelig. Bijvoorbeeld het feit dat de volgende / vorige knoppen gescheiden staan van de verversen / stop knoppen komt op mij absoluut niet intuitief over. Ik hoop niet dat deze vensterlayout gehandhaafd blijft.

Ik weet, over smaak valt niet te twisten, maar ik kan het niet laten. Een visueel aspect wat ik erg lelijk vind is het knopje voor het beginnen van een nieuw tabblad. Een onooglijk ding dat me doet denken aan een scherm dat hangt. Maar aangezien het een beta betreft moeten we op dit soort slakken maar even geen zout leggen.

Cleartype
Aan het ClearType renderen van de tekst op de pagina moet ik vooralsnog wennen. Hoewel ik het visuele effect ervan wel kende. Van Linux. ClearType is gelukkig wel uit te zetten (via tools | internet options | advanced | use cleartype)

Webstandaards
Volgens mij zit er in elk geval nog 1 fikse bug in deze versie. De css :hover pseudoclass werkt in een aantal gevallen niet. Op deze website bijvoorbeeld wordt :hover niet uitgevoerd. Op Microsoft eigen website trouwens ook niet. Een kort testje met een inline stijl leert dat dat dan wel weer naar behoren functioneert. Microsoft heeft overigens wel beloofd met IE7 :hover te ondersteunen voor alle elementen. Ben benieuwd.

Script
Die :hover bug is vervelend, maar niet echt om beroerd van te worden. Regelrechte rampen op het gebied van clientside scripting ben ik vooralsnog niet tegengekomen. Met andere woorden: op mijn eigen websites is de javascript- en stijlbladcode de upgrade zo te zien zonder al te veel problemen doorgekomen.

Flash
IE7 struikelt over sIFR. Even naar de website van de makers van Flash geklikt om te checken of het aan mij / sIFR ligt. Nope. Zo te zien niet. IE7 beta en flashtechnologie kunnen blijkbaar (nog) niet zonder ruzie door 1 deur, want ook de website van Macromedia vertoont flash-gerelateerde problemen.

Leuke features
Is er dan niks leuks op te merken over de nieuwe IE? Oh, jawel hoor. Er zitten zo op het oog best wel wat aardige features in, hoewel ze nou niet direct ** kuch vernieuwend ** te noemen zijn. Om behalve de introductie van tabbladen wat aan te halen: quicktabs (foXpose in Firefox) en de zoom functionaliteit.

Hacks
Onderwijl zijn er andere dingen om je druk over te maken. Hoe gaat Internet Explorer 7 om met een aantal belangrijke browser hacks?

Verkenner
Het kan natuurlijk toeval zijn, maar ik heb het idee dat mijn Windows verkenner een stukje less responsive is geworden sinds ik IE7 beta 2 op mijn systeempje heb staan. Hangt bij (mijn poging tot) het uitklappen van een folder.

Eraf ermee
Voor nu even genoeg gezien van IE7. Mijn laptop is blij dat ie weer vertrokken is. De uninstall was trouwens pretty painless. Na een reboot van mijn machien is IE6 uit de as van de downgrade herrezen.

Goed nieuws: Microsoft gaat officieel stoppen met Internet Explorer voor de Mac. Zoals eerder al eens gemeld was het toch al niet zo geweldig met IE voor de MacIntosh gesteld. Eind december 2005 stopt de support en een maand later is het ook endex voor de mogelijkheid tot het downloaden van IE voor de Mac.

Oké. Hier hebben we natuurlijk een dijenkletser der allereerste klasse. Wat wil het geval? De internationale MSN website, bezocht met Internet Explorer voor de Mac, verkonkelt de webpagina en raadt de bezoeker vooral aan om een andere browser te gebruiken:

If you are using Internet Explorer for Mac, we recommend that you use another browser to have an optimal experience on MSN.

Lachen tot aan huilens toe. Klinkt eigenlijk net zo idioot als wanneer de reclameprofessoren van de toilethygiene zouden verkondigen dat wij van WC-eend in ieder geval geen WC-eend adviseren.