Share
Arbeide med CSS kan virke som en konstant kamp. Nettlesere endrer seg alltid de måten de leser koden (* hoste * Internet Explorer * hoste *), og det ser ut som at det er mange små CSS "gotchas". Selv om det er et utrolig kraftig språk, kan det lett bli brukt feil, noe som vil gjøre din utvikling til en levetid for ufullkommenheter.
Dette er trolig nummer ett problem med webutvikling, siden du må ha layouter som ser ut som de samme, uansett hvilken nettleser nettstedet besøkende bruker til å navigere på siden. Dette faktum kan noen ganger virke som banen i din eksistens: Det er grunnleggende forskjeller i hvordan Internet Explorer gjør en side, i motsetning til Firefox. Mens det ikke er så ille som de Brukt å være, det er fortsatt ganske forskjell mellom nettlesere.
Det er enkelt for webutviklere å sette opp siden i sin favoritt nettleser og ikke bekymre seg for hvordan det ser ut i andre store nettlesere, som du sannsynligvis ikke vil se forskjellene. (Jeg er en stor lovbryter av dette. Jeg vil noen ganger designe nettstedet i Firefox og glemme å sjekke inn IE til etter at det er gjort!) Mens det er noen prøvde og sanne metoder for å beskytte layoutene dine for forskjellige nettlesere, beste måten å sikre at alt ser konstant ut, er å bare bruke Browsershots. Browsershots gir et nøyaktig øyeblikksbilde av hvordan nettstedet ditt ser ut på tvers av mange forskjellige plattformer og nettlesere, slik at du kan kontrollere at ingenting ser funky ut i en nettleser.
Selv om et stort antall av oss webutviklere har store dataskjermer - og er ganske stolte av det faktum - kan en god del av de besøkende på nettstedet ditt ikke. Du kan sjekke analyseprogrammene dine for å se de besøkendees nettleseroppløsninger og hvor mye de spenner fra (Google Analytics gjør dette fantastisk). Det er imidlertid en verden av forskjell på hvordan et design ser ut i en 1024x768 oppløsning i motsetning til en 800x600 oppløsning. Det kan gjøre en vakker design nesten ubrukelig.
Jeg har nylig kommet over denne oppfatningen som jeg var å tilpasse designen til Trendfo. En stor del av de besøkende til nettstedet brukte mindre nettlesere som forårsaket et bilde for å delvis blokkere noen annonser, noe som gir meg mindre klikk og til slutt mindre inntekter fra nettstedet.
Regnskap for mindre nettlesere betyr det alle av dine besøkende er glade og finner den informasjonen de trenger.
Hvis du utvikler et CSS-layout fra grunnen av, vil du kanskje spørre deg selv hvorfor. Akkurat som ingenting er nytt under solen, er det samme det samme med CSS. Det er mange CSS-rammer der ute som Blueprint-rammeverk og 960 CSS-rammeverket. Disse er laget for å hjelpe deg med å lage bulletproof layouts, uten å måtte starte noe fra grunnen av. Disse oppsettene har kryssbrowser-kompatibilitet og har blitt strenge testet. Egentlig, med mindre du gjør noe helt radikalt som trenger pantloads av egendefinert kode, bare bruk et CSS-rammeverk.
Hvorfor gjenoppfinne hjulet?
Det kan være ganske enkelt å ikke tenke på fremtiden når vi utvikler nettsteder. Ofte nevner vi våre CSS-klasser noe annerledes hver gang vi utvikler et nettsted, i motsetning til å lage en enkel CSS-klasse som vi kan gjenbruke gjentatte ganger gjennom hele vårt design, uten å måtte grave opp det vi brukte før. Dette vil sikre at vårt nettsted design forblir konstant gjennom endringene i et design.
Du kan bruke en generisk klasse som:
(Redaktørens notat: de dobbelte rettighetene er resultatet av en feil i vår kodeviser, korrekt kode er selvsagt .right float: right.)
.høyre float: høyre
For å holde ting flytende i riktig retning når du vil ha dem til. Så du kan style DIV ID som:
Jeg bruker vanligvis minst tre generiske klasser når jeg bygger en webdesign:
.fjern clear: both .right float: right .left float: left
Jeg vedder på at du ikke visste at validering av HTML-en din også kunne påvirke CSS, gjorde du? Vel, det kan. Først og fremst kan du ikke validere CSS før du har gyldig HTML. For det andre er det mange tilfeller at HTML-en din kan forårsake problemer, i stedet for CSS. Ofte tror vi at vår CSS endrer oppsettet når det faktisk er litt feilaktig HTML som gjør layoutet funky. En unclosed DIV her, en mislabeled CSS klasse ... det kan være noe. Kontroller at HTML-en din sjekker ut før du selv prøver å diagnostisere et CSS-problem.
Jeg pleide å stadig forstyrre en venn for hjelp med CSS-problemer som jeg prøvde å rive på mine design. Han ville tålmodig spørre meg hver gang "Validerer CSS? Hvis ikke, hva er feilene?" Det var ikke lenge før jeg lærte å validere CSS før jeg ba Thomas om hjelp senere, og som regel validerte jeg problemet for meg.
Hvis du har gyldig CSS-kode, er du mye mer sannsynlig å ha et CSS som er mye mer kompatibelt på tvers av nettlesere, og er mindre sannsynlig å bryte.
Ofte vil nye designere bruke overdimensjonerte bakgrunnsbilder i layoutene sine. For eksempel bruker du et 3.000px X 5.000px bakgrunnsbilde for å regne med noen mulige nettleser størrelse. I stedet for å bruke et veldig stort bilde, kunne de bruke et veldig lite gjentatt bilde med et snev av CSS magi. Forskjellen er stor: I stedet for å laste inn et 200kb bilde, kan du bare laste et bilde bare noen få byte i størrelse og få CSS til å gjenta det over bakgrunnen.
Hvis du har et stort bakgrunnsbilde, mister du to måter:
Noen ganger er store bakgrunnsbilder uunngåelige, spesielt med den siste trenden med å designe illustrative weboppsett. Men ved å bruke gjentatte bilder eller solide farger i bakgrunnen er en mye bedre praksis.
Når folk først lærer om teknologi, blir de begeistret for det og vil bruke det overalt, selv når det faktisk kan gå imot det som vil fungere best for prosjektet.
Som webutviklere kan vi noen ganger bli fanget opp i å ha teknologien til å gjøre noe avansert og spesifikt, når vi faktisk kan bruke en annen teknologi mye lettere. For eksempel er det noen ganger mye lettere å bruke et bord for å organisere data enn det er å lage komplisert CSS-basert layout med flytende DIV og lignende. Vi må huske, hvorfor vi bruker teknologier som CSS, er fordi det bør Fremskynde utviklingstiden. Når det begynner å bremse oss ned, så kanskje vi går litt overbord.
Dette er en kardinal synd for webutviklere, og det skjer mer enn du vil vite. Hvis du bygger et design, vil du nesten alltid Ønsker å beholde CSS og HTML separat. Dette sikrer at når du legger merke til at hvis du bestemmer deg for å endre nettsteddesign, trenger du ikke å grave gjennom HTML for hvert layout og finne den skurkiske CSS som er festet til et inlineelement.
Istedenfor å bruke dette:
link
Du bør flytte stilbransjen til et eksternt stilark slik:
link
Inline CSS bør nesten alltid unngås. Det er lett å bruke og flott for testing, men bortsett fra at du sannsynligvis ikke vil ha den i produksjonskoden.
Har du noen gang sett et design med 12 forskjellige CSS-filer knyttet til det? Det er et mareritt for alle som prøver å gjøre endringer i oppsettet ditt. Ikke bare det, det senker tiden som behandler hver fil, da nettleseren må gjøre en forespørsel for hver enkelt. Det er bedre å bruke et enkelt CSS-skjema som bruker 1 eller 2 filer. Tiden som brukes til å analysere 12 filer versus en enkelt fil, er ganske signifikant. Ikke bare det, du vil lagre den neste fyren som må gjøre endringer på layoutet ditt mye stress.
Ingen ønsker å åpne 12 filer for å gjøre en enkel, nettsideomfattende endring!
Glen Stansberry er en webutvikler og blogger som har slitt flere ganger enn han ville ønske å innrømme med CSS. Du kan lese flere tips om webutvikling på hans blogg Web Jackalope.
Likte dette innlegget? Stem på det på Digg nedenfor. Takk!
Accentsconagua