Är Google Chrome den nya IE 6 för webbdesigners?
Precis när du trodde du var klar med IE 6 och dess hackar och undantag, har du nu en ny webbläsare att överväga: Googles Chrome .
Den goda nyheten är att Chrome är mycket mer kompatibel med webbstandarder än IE 5 och 6 . Men Chrome har sina egna idiosyncrasies och buggar.
Ingen vet om Chrome är här för att stanna, men det har redan tagit en överraskande anständig andel av webbläsarmarknaden på kort tid.
Här är några tips för att få dina webbsidor att fungera i Chrome och förhoppningsvis ser hur de utformades för att se ut.
Mac-användare
Från och med februari 2009 är Chrome fortfarande en webbläsare för Microsoft Windows-datorer. Om du använder en Mac måste du köra Microsoft Windows genom bootcamp , eller en av virtualiseringsprodukterna för Mac ( Suns VirtualBox , Parallels , VMWare Fusion ). Om du är väldigt vågad kan du försöka få Chrome att köra med darwine . Google lovar att få en inbyggd Mac-version av Chrome tillgänglig under de kommande månaderna.
Vanishing Pop-Ups
Popup-blockering är bra om inte din webbplats verkligen behöver popup-funktionalitet. Om du har en webbsida som måste använda popup-fönster kan du inte se dem i Chrome. Genom design visar Chrome bara titeln på en popup-fönster och minimerar den till det nedre högra hörnet i webbläsarfönstret. Användare måste klicka och dra popupens titel för att kunna se innehållet.
SSL är Broken?
Genom design kommer Chrome endast att certifiera en giltig SSL-sida (säkra socketslager) med hänglåsikonen om alla element på sidan tjänas via SSL. Med andra ord, om din sida serveras via SSL men det kallar element via icke-säkrad HTTP, kommer Chrome att ge din sida en utropsteckenikon som indikerar att den anser att din sida är en inkonsekvent SSL-överföring. För att komma runt om detta, se till att alla resurser som laddas av din webbsida, inklusive alla bilder , är prefaced med HTTPS .
Förklara kodning först
Om din text på webbsidan är förvrängd eller annars helt enkelt fel i Chrome, kan du behöva infoga kodningsinformation i
avsnitt på varje webbsida. Om du redan har kodningsinformation måste den komma först innan någon CSS eller Javascript. Annars ignorerar Chrome bara det. Ett fungerande exempel:
... din CSS-kod ...
Dessutom ignorerar Chrome kodning som anges av Javascript. Period. Till exempel skulle följande ignoreras:
document.write ( ” ”);
I stället för att använda JavaScript måste du infoga din kodning i början av
Bookmark Favoriter
När användare väljer att bokmärke din webbplats kan du styra standard bokmärkesnamn, beskrivning, länk och bokmärkesikonen. Var noga med att placera din kod i
avsnitt av dina webbsidor. Här är ett fungerande exempel:
Fixing JavaScript
Om JavaScript inte fungerar korrekt i Chrome kan du kolla Chromes JavaScript-konsol, tillgängligt från Sidans menyikon -> Utvecklare -> JavaScript-konsol . Det borde ge dig lite riktning om vad du kan ändra.
För de mer avancerade JavaScript-utvecklarna kan du också använda JavaScript Debugger, tillgänglig från Sidans menyikon -> Utvecklare -> Debug JavaScript . Det gör att du kan titta på variabler och ställa in brytpunkter.
CSS-bildproblem
Om du använder bilder eller bakgrunder som implementeras via CSS och de inte levereras korrekt i Chrome kanske du vill konvertera bilder mellan GIF, JPG och PNG för att se om ett annat bildformat löser dina problem. Även om det här inte har någon mening, fungerar det ibland, speciellt med slumpmässigt avstånd och bildformatproblem.
CSS "First" Selector Hack
Chrome kan vara finaktigt och oförsonligt om CSS och kan ignorera stilar som tillämpas på vissa sidelement. Du kan försöka använda sökordet " first-of-type " som ignoreras av alla andra webbläsare (förutom Apples Safari). Om du till exempel inte kan få en viss stil som tillämpas på
avsnittet på din webbsida för att fungera i Chrome, lägg till något som följande:body: first-of-type p {färg: # ff0000;}
"Förstklassig" kommer helt enkelt att ignoreras av de webbläsare som redan visar din sida så som du tänkte.
GiantIsland CSS Hack
Chrome tolkar cascading style sheets (CSS) annorlunda än andra webbläsare. Därefter tolkar IE 5, 6 och 7 inte ens CSS samma! to target CSS on specific browsers like Chrome. GiantIsland CSS Hack är ett relativt enkelt CSS-markuphack som använder fyrkantiga parenteser [] för att rikta CSS på specifika webbläsare som Chrome. Som en bonus kan det också hjälpa dig att anpassa din CSS till IE 5, 6, 7, Safari och Firefox, samtidigt. För mer information, kolla in det på http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx .
Håll dig borta från HTML5
Chrome försöker inte överensstämma med HTML5 API-standarder, trots att Webkit, dess återgivningsmotor, stöder HTML5. Om du använder HTML5-funktioner eller syntax kommer du sannolikt att orsaka problem. Håll dig i HTML4-standarder och du bör ha en lättare tid. Chrome kommer sannolikt att stödja HTML5 inom en snar framtid.
Validera dina sidor
Innan du svär i Chrome och kasta i handduken, validera dina sidor för att se till att du inte oavsiktligt har använt ett vanligt HTML-samtal. Du kan validera en webbsida på http://validator.w3.org/ . Vissa webbläsare tillåter dig att ta några genvägar med webbstandarder, men Chrome är inte särskilt lätthet.
Prova med Safari
Om du inte kan få dina webbsidor att se rätt under Chrome oavsett vad du försöker kan du prova dina webbsidor i Safari innan du ger upp dig. Safari är Apples webbläsare och är tillgänglig för både Mac- och Windows-datorer. Om du använder Windows kan du gratis ladda ner Safari från Apple på http://www.apple.com/safari/download/ . Både Chrome och Safari är byggda med hjälp av webbläsarens återgivningsmotor med öppen källkod " Webkit ". Om du kan se ett återgivningsfel i både Chrome och Safari finns det en god chans att Webkit är synder. Du kan lägga in en bugg för Webkit-utvecklarna på http://webkit.org/quality/reporting.html .
Aw Snap!
Chrome-utvecklarna har gett några roliga felmeddelanden (om ett fel kan anses vara roligt). Om Chrome ger dig den mörkgråa " Aw Snap! "Sidan som också säger" Något gick fel när du visade den här webbsidan ", det kanske inte är din webbsida alls. Chrome har en tendens att krascha på vissa datorer beroende på systeminställningar och andra installerade applikationer. Prova några andra välkända webbsidor och se om de kraschar. Försök också att stänga Chrome, starta om det och testa sedan dina webbsidor igen. Vissa har funnit att Chrome är instabil på vissa datorer. Google avser att Chrome ska bli robustare med varje ny version.
Felrapportering
Om du hittar ett fel med Chrome-rendering, rapportera det! Du kommer att göra världen till en bättre plats. Google upprätthåller en offentlig bugglista för Chrome på http://code.google.com/p/chromium/issues/list .
Skriven uteslutande för WDD av Derek Underwood, en professionell webbdesigner och mjukvaruutvecklare. Du kan läsa mer om Derek och kontakta honom på hans hemsida:
http://www.derekunderwood.com
Har du testat dina webbsidor i Chrome? Tror du att Chrome är här för att stanna? Dela dina åsikter och erfarenheter.