Er Google Chrome den nye IE 6 til webdesignere?
Netop da du troede du var færdig med IE 6 og dens hacks og undtagelser, har du nu en ny browser til at overveje: Googles Chrome .
Den gode nyhed er, at Chrome er meget mere kompatibel med webstandarder end IE 5 og 6 . Men Chrome har sine egne idiosyncrasies og fejl.
Ingen ved, om Chrome er her for at blive, men det har allerede fået en overraskende anstændig andel af webbrowsermarkedet på kort tid.
Her er nogle tips til at få dine websider til at fungere i Chrome og forhåbentlig se hvordan de blev designet til at se ud.
Mac-brugere
Fra februar 2009 er Chrome stadig en browser til Microsoft Windows-pc'er. Hvis du bruger en Mac, skal du køre Microsoft Windows igennem Boot Camp , eller et af virtualiseringsprodukterne til Mac'en ( Suns VirtualBox , Parallels , VMWare Fusion ). Hvis du er virkelig dristig, kan du forsøge at få Chrome til at køre ved hjælp af Darwine . Google lover at have en indbygget Mac-version af Chrome tilgængelig i de kommende måneder.
Vanishing Pop-Ups
Pop-up-blokering er stor, medmindre dit websted virkelig har brug for pop-up-funktionalitet. Hvis du har en webside, der skal bruge pop op-vinduer, kan du ikke se dem i Chrome. Med design viser Chrome kun titlen på en pop op og minimerer den i nederste højre hjørne af browservinduet. Brugere skal klikke og trække pop-up-titlen for at kunne se indholdet.
SSL er Broken?
Ved design bekræfter Chrome kun en gyldig SSL-side (sikker stikkontakt) med hængelåsikonet, hvis alle elementerne på siden serveres via SSL. Med andre ord, hvis din side vises via SSL, men det kalder elementer via ikke-sikret HTTP, giver Chrome din side et udråbstegnikon, der angiver, at det anser din side for at være en inkonsekvent SSL-transmission. For at komme rundt om dette skal du sørge for, at alle ressourcer, der er indlæst af din webside, herunder alle billeder , er præfaced med HTTPS .
Erklære kodning først
Hvis din websidetekst er forvrænget eller på anden måde bare er forkert i Chrome, skal du muligvis indsætte kodningsoplysninger i
afsnit af hver webside. Hvis du allerede har kodning oplysninger, skal det komme først , før nogen CSS eller Javascript. Ellers vil Chrome bare ignorere det. Et fungerende eksempel:
... din CSS-kode ...
Chrome ignorerer også kodning specificeret af Javascript. Periode. For eksempel vil følgende blive ignoreret:
document.write ( ” ”);
I stedet for at bruge JavaScript skal du indsætte din kodning i begyndelsen af
Bogmærke Favoritter
Når brugere vælger at bogmærke dit websted, kan du kontrollere standardbogmærke navn, beskrivelse, link og bogmærke ikon. Bare sørg for at placere din kode i
afsnit af dine websider. Her er et fungerende eksempel:
Fastsættelse af JavaScript
Hvis dit JavaScript ikke fungerer korrekt i Chrome, skal du kontrollere Chromes JavaScript-konsol, tilgængeligt fra siden menuikonet -> Udvikler -> JavaScript-konsol . Det burde give dig en vis retning om, hvad du kan ændre.
For de mere avancerede JavaScript-udviklere kan du også bruge JavaScript Debugger, tilgængelig fra siden menuikonet -> Udvikler -> Debug JavaScript . Det giver dig mulighed for at se variabler og indstille breakpoints.
CSS Image Problemer
Hvis du bruger billeder eller baggrunde implementeret via CSS, og de ikke gengiver korrekt i Chrome, kan du måske konvertere billeder mellem GIF, JPG og PNG for at se, om et andet billedformat løser dine problemer. Selvom det ikke giver mening, virker det nogle gange, især med tilfældige mellemrum og billedformateringsproblemer.
CSS "First" Selector Hack
Chrome kan være finicky og uforgivende om CSS og kan ignorere stilarter, der anvendes til bestemte sideelementer. Du kan prøve at bruge søgeordet " first-of-type ", som ignoreres af alle andre browsere (undtagen Apples Safari). For eksempel, hvis du ikke kan få en bestemt stil anvendt til del af din webside for at arbejde i Chrome, tilføj noget som følgende:
krop: første-of-type p {farve: # ff0000;}
"First-of-type" vil simpelthen blive ignoreret af de browsere, der allerede viser din side, som du ønskede.
GiantIsland CSS Hack
Chrome fortolker cascading style sheets (CSS) anderledes end andre browsere. Så igen, IE 5, 6 og 7 fortolker ikke engang CSS det samme! to target CSS on specific browsers like Chrome. GiantIsland CSS Hack er et relativt simpelt CSS markup hack, der gør brug af firkantede parenteser [] til at målrette CSS på bestemte browsere som Chrome. Som en bonus kan det også hjælpe dig med at tilpasse dit CSS til IE 5, 6, 7, Safari og Firefox, alt sammen på samme tid. For flere detaljer, tjek det ud på http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx .
Hold dig væk fra HTML5
Chrome forsøger ikke at overholde HTML5 API-standarderne endnu, selvom Webkit, dens gengivelsesmotor, understøtter HTML5. Hvis du bruger HTML5-funktioner eller syntaks, vil du sandsynligvis komme i problemer. Hold dig til HTML4 standarder, og du bør have en lettere tid. Chrome vil sandsynligvis understøtte HTML5 i den nærmeste fremtid.
Valider dine sider
Før du sværger ved Chrome og smider i håndklædet, validerer du dine sider for at sikre, at du ikke utilsigtet har brugt et ikke-standardiseret HTML-opkald. Du kan validere enhver webside på http://validator.w3.org/ . Nogle browsere giver dig mulighed for at tage nogle genveje med webstandarder, men Chrome er ikke særlig lindrende.
Prøv det med Safari
Hvis du ikke kan få dine websider til at se lige under Chrome, uanset hvad du prøver, kan du prøve dine websider i Safari, før du giver op. Safari er Apples webbrowser og er tilgængelig til både Mac og Windows-pc'er. Hvis du bruger Windows, kan du gratis downloade Safari fra Apple på http://www.apple.com/safari/download/ . Både Chrome og Safari er bygget ved hjælp af browsergenereringsmotor med open source- webkit . Hvis du kan se en gengivelsesfejl i både Chrome og Safari, er der en god chance for, at Webkit er synderen. Du kan sende en fejl til Webkit-udviklerne på http://webkit.org/quality/reporting.html .
Aw Snap!
Chrome-udviklerne har givet nogle sjove fejlmeddelelser (hvis en fejl kan betragtes som sjov). Hvis Chrome giver dig den mørke grå " Aw Snap! "Side der også siger" noget gik galt, mens du viste denne webside ", det er måske ikke din webside overhovedet. Chrome har tendens til at gå ned på nogle pc'er afhængigt af systemindstillinger og andre installerede applikationer. Prøv et par andre kendte websider, og se om de styrter. Prøv også at lukke Chrome, genstart det, og test derefter dine websider igen. Nogle mennesker har fundet, at Chrome er ustabil på nogle pc'er. Google har til hensigt at Chrome bliver mere robust med hver ny version.
Fejlrapportering
Hvis du finder en fejl med Chrome's gengivelse, skal du rapportere det! Du vil gøre verden til et bedre sted. Google opretholder en offentlig fejlliste for Chrome på http://code.google.com/p/chromium/issues/list .
Skrevet udelukkende til WDD af Derek Underwood, en professionel webdesigner og softwareudvikler. Du kan læse mere om Derek og kontakte ham på hans hjemmeside:
http://www.derekunderwood.com
Har du testet dine websider i Chrome? Tror du, at Chrome er her for at blive? Del dine meninger og oplevelser.