Kör IE6 virtuellt för test av bakåtkompatibilitet

Nu har Microsoft lyssnat på webb-utvecklarnas förfrågan om möjlighet att testa sina webbprojekt i den äldre läsaren IE6. Många har belyst problemet inklusive jag själv i samband med att IE7 släpptes på marknaden.

IEBloggen finns det instruktioner samt länkar till Virtual PC 2004 och en speciellt förberedd VPC Image med Internet Explorer 6 förinstallerat. Man behöver alltså ingen extra licens av XP för att köra den virtuella testmiljön. Den är dock låst med en tidsvrist och kommer att sluta att fungera den 1 april 2007.

Jag provade just att installera den på min maskin och det gick smidigt. Det gäller bara att man ställer in nätverks-adaptrarna rätt så att man kan komma åt internet från den virtuella maskinen, mer läsning finns hos Microsoft.

Uppdatering:
Har dock fortfarande inte förstått hur man ska kunna komma åt sina lokala testsajter på den riktiga maskinen, de som man normalt surfar till med http://localhost:1080/webbplats/. Läste en del kommentarer i tråden på IEBlog, men inte hittat någon lösning till. Istället kan man ladda upp sina html-filer till den virtuella datorn och kolla hur de ser ut. Har man en dynamisk webbplats så kan man välja "spara sidan som".

Relaterat:
Scott Guthrie's Blog finns även instruktioner för hur man kan ändra root-url:en på de projekt som man kör från VS.

För er som inte orkar installera en virtuell dator bara för nån enstaka test med IE6 så kan jag rekommendera skärmdumps-tjänsten Browsershot.org som jag skrivit om tidigare.

By Jesper Lind

Tjänst visar skärmdumpar från olika webbläsare

Snubblade just över den smått fantastiska tjänsten Browsershots.org som för tillfället är i version beta0.3-alpha2. Här genereraras det skärmdumpar från de mest använda webbläsarna. Man skriver in en URI som man vill testa och så skapar några distribuerade datorer skärmdumparna. Det tar några minuter och sedan börjar resultaten visas.

Detta är något jag väntat på att någon skulle finna en lösning till. Speciellt nu när övergången mellan IE6 och IE7 pågår. För ni vet ju att jag vart lite irriterad över att det inte går att ha båda versionerna installerade samtidigt på samma dator. Endast med inofficiella versioner går det att göra och enligt rapporter fungerar det inte speciellt bra. Microsoft's förslag att installera en virtuell dator endast för detta endamål känns lite omständig.

De webbläsare som stöds på Browsershots är:

# Linux: Dillo 0.8, Epiphany 2.14, Firebird 0.7, Firefox 1.0, Firefox 1.5, Firefox 2.0, Firefox 3.0, Flock 0.7, Galeon 2.0, Konqueror 3.5, Mozilla 1.7, Navigator 4.8, Opera 9.0, Phoenix 0.5, SeaMonkey 1.0

# Windows: MSIE 6.0

Nu saknas bara Safari så är tjänsten komplett. Eller sitter det någon redan där ute och jobbar på en Mac variant?

Uppdatering: Nu kan man även se skärmdumpar från Safari.

Här kan ni se bilder från vår sajt (om de finns kvar).

By Jesper Lind

IE7 är släppt

http://www.codeodyssey.se/upload/resource/blog/ie7_h2_rgb.png

Microsoft har släpp den nya version av Internet Explorer och den finns att ladda ner från deras hemsida. Ibörjan finns den bara tillgänglig på några få språk och inte svernska. Den 2 november kommer användare av XP att få den nedladdad genom den automatiska uppdateringensfunktionen.

Detta är den första större uppdateringen av webbläsaren sedan 2001 och en väldigt eftertraktad sådan. Utvecklare världen över har länge klagat det dåliga CSS-stödet på föregångaren IE6.

Finns att ladda hem här:
http://www.microsoft.com/windows/ie/

Mer läsning:
IDG - Internet Explorer 7 är här

By Jesper Lind

Ny kreativitet med CSS

Under de senaste sju åren har webbdesign kört fast i en visst spår. Det hela började med upptäckten att man kunde använda tabeller för att skapa layouter för hemsidor. Man använder rader och celler för att placera elementen på sidorna. Detta sätt fungerar ju fortfarande bra men resulterar i svårhanterlig kod som är svår att uppdatera. Tabellerna med sina celler har blivit ett fängelse och gjort oss att fastna i ett visst tänkande hur man bygger upp layouten.

Några började drömma om ett nytt sätt att placera objekten med hjälp av <div> och <span> taggarna. CSS Zen Garden är en webbplats helt dedikerad åt detta nya sätt att skapa design.

Ett problem med det nya sättet att göra design är ju att den mest använda webbläsaren idag, IE6, inte stödjer CSS 2.1 standarderna. Men med IE7 kommer situationen bli mycket bättre och det känns som man på allvar kan anamma de nya teknikerna. Microsoft har gjort en egen "Zen Garden"-design för att visa hur bra IE7 kommer att stödja CSS. Läs mer om exprimentet i artikeln The Zen in 7: Enhanced Styles In Internet Explorer 7.

Eric meyer är en man som forskar mycket i nya CSS ideer och driver en webbplats som heter css/edge. Där visas många exempel på nytänkande tekniker. Där visar han bland annat hur man kan göra effekter genom fixerade bakgrundbilder, popupmenyer i ren CSS och mycket mer.

På Stopdesign.com finns en post som handlar om hur en webbsida görs om för att använda ordnade listor istället för tabeller. Lägre laddningstider och renare kod blir resultatet.

By Jesper Lind

Första skarpa versionen av IE7

Nu verkar det närma sig det datum då Internet Explorer 7 kommer att släppas på marknaden. Idag meddelades det att IE7 Release Candidate 1 finns tillgänglig för nedladdning. Den officiella IEBloggen är het och det postas uppdateringar i stort sätt varje dag. Microsoft verkar ha lyssnat på webbutvecklarnas anmärkningar på brister och fixat en hel del buggar som har med CSS-rendereringen att göra. Bland annat 16 av de buggar som har rapporterats för IE6 på PositionisEverything.net.

I denna versionen har funktionalitet som avinstallerar föregående betaversioner automatiskt, lagts till. Det går dock fortfarande inte att köra IE6 parallellt med nya IE7. Som en eventuell lösning på detta verkar Microsoft ge bort Microsoft Virtual PC gratis. Tanken är att man ska installera IE6 i den virtuella datorn för att kunna testa hur webbsidor ser ut. Det kan ju vara en lösning på det problem jag skrivit om tidigare, men ska det inte kunna gå på något enklare sätt? Ett flexa-till-IE6-mode i själva läsaren eller andra lösningar efterlyses!

Det känns det som att IE7 bli ett stormsteg mot bättre stöd för CSS2-standarden på internet. Nu kommer det bli bra mycket enklare att skapa design som håller i alla moderna webbläsare.

By Jesper Lind

Förhindra blinkande bilder - IE6

Bilder som blinkar fast man inte vill det kan vara jobbigt.

Detta händer ofta när man har transparenta gifs som bakgrund på länkar. De kommer då att blinka när man drar pekaren över länken pågrund av att Internet Explorer 6 laddar om bilden varje gång. Det händer speciellt när användaren har ställt in "Uppdatera cache varje gång sidan besöks". En rätt vanlig inställning.

Här finns en bra guide på ämnet och om hur man kan förhindra det:
http://www.fivesevensix.com/studies/ie6flicker/

By Jesper Lind

Internet Explorer 7 (Beta 3) är släppt

http://www.codeodyssey.se/upload/resource/blog/ie7_h2_rgb.png

Jag testade beta 3 lite snabbt och det ser väldigt bra ut. Det är lite irriterande att man inte kan (så vitt jag vet) ha både IE6 och IE7 installerade parallellt på sin dator. Eftersom jag ständigt är i behov av att testa hemsidor på IE6, som de flesta fortfarande använder , avinstallerade jag IE7.

Nu väntar vi ivrigt på att den skarpa versionen kommer ut. Enligt senaste rykten kommer det ske tidigt i höst. Den stora frågan är hur bra denna nya webbläsare från Microsoft kommer följa webbstandarderna skapade av World Wide Web Consortium. Förshoppnings vis kommer det bli en hel del förbättringarna gentemot den gamla IE6.

By Jesper Lind

Stjärn-hack i väntan på bättre CSS-stöd

Den som sysslat något med html och css-design vet att det är svårt att skapa design som fungerar i alla de vanligaste webbläsarna.

Speciellt höjden på ett element är svårt att hantera eftersom IE6 och lägre inte accapterar css-standard väljaren "min-height".

För att justera detta kan man använda det så kallade stjärn-hacket som jag visar ett exempel på nedan. Man tar helt enkelt användning i ett annat fel i IE som gör att css kod efter en stjärna accepteras. Övriga webbläsare som t ex Firefox ignorerar raden efter stjärnan och påverkas ej.

#wrapper {position: relative;min-height: 100%; }
* html #wrapper {height: 100%;}

Mer information
http://centricle.com/ref/css/filters/tests/star_html/
http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html

By Jesper Lind

Fixa ActiveX-kontroller så de aktiveras i IE

Bakgrund
Microsoft blev år 2003 stämda av företaget Eolas som krävde ett skadestånd på 521 miljoner dollar. Eolas menar att Microsoft har använt patenterad teknik i deras populära webbläsare, Internet Explorer, genom sättet som de länkar in ActiveX-kontroller. Detta omfattar Flash, Quicktime, Microsoft mediaspelare m.m.

Istället för att betala skadeståndet svarade Microsoft med att ta bort denna funktionalitet från IE. Detta skedde genom en säkerhetsuppdatering i juni 2006. Microsoft har fått en del kritik för sitt förhavande, speciellt eftersom man valde att få det att se ut som en säkerhetsuppdatering för användarna. Man borde ha gjort en speciell uppdatering för att bättre förklara bakgrunden till borttagningen av AxtiveX funktionerna.

Läs mer om stämningen här:
http://www.informationweek.com/security/showArticle.jhtml?articleID=185300841

Problemet och lösningar
Om inget görs möts besökaren av meddelandet "Klicka här om du vill aktivera och använda den här kontrollen." och man måste klicka en extra gång innan man kan använda kontrollen.

Det finns några sätt att arbeta runt dessa nya begränsningar som involverar javascript och omskrivande av embed-taggarna.

Här är Microsofts rekommendationer:
http://msdn.microsoft.com/workshop/author/dhtml/overview/activating_activex.asp

Och Macromedias:
http://www.adobe.com/devnet/activecontent/articles/devletter.html

Båda dessa tekniker innebär att man skriver om all kod och detta kan vara väldigt omständigt på en stor hemsida som innehåller många ActiveX kontroller.

Den lätta lösningen
Det finns dock en enkel lösning genom att använda följande javascript-include. Döp scriptet till förslagsvis activate_activex.js och länka in det längst ner på sidan som innehåller dina kontroller precis innan /body-taggen.


theObjects = document.getElementsByTagName("object");
for (var i = 0; i < theObjects.length; i++) {
theObjects[i].outerHTML = theObjects[i].outerHTML;
}

Jag hittade detta användbara skript här:
http://www.amarasoftware.com/flash-problem.htm

By Jesper Lind