Siden "Webstedseffektivitet" blev tilgængeligt i Googles Webmastertools, har folk fokuseret mere og mere på loadtid, og det er selvfølgelig en rigtig god ting. Blandt de råd som kan gøre den største forskel, i forhold til en sides loadtid, er helt sikkert:

Kombiner eksterne CSS og JavaScript filer Aktiver GZIP for alt indhold, CSS og JS Minify CSS og JS Aktiver Cache for alle filtyper

Hvis du ikke er interesseret i mere info om de 4 punkter, vil jeg anbefale du blot hopper ned til løsningen

Kombiner eksterne CSS og JavaScript filer

Klik her for at læse hele artiklen (31 afsnit)

Firefox viser pr default ikke en vertikal scrolbar, hvis der ikke er indhold nok til at denne er nødvendig. Dette resulterer i at siden kan hoppe lidt frem og tilbage, afhængigt af om scrollbaren skal vises eller ej. Dette kan nogen gange være uønsket, derfor anbefaler mange at man sætter min-height på body til 101% eller lign. Dette er dog næsten direkte tåbeligt :D - idet det rent faktisk vil give en aktiv scrollbar, selv på de sider hvor det ikke er nødvendigt.

I stedet kan jeg varmt anbefale at bruge:

body { overflow: -moz-scrollbars-vertical; }

Som fortæller Mozilla at der skal være vertikal scrollbar. I IE er denne "feature" automatisk slået til, så det er ikke nødvendigt, at gøre noget her.

Klik her for at læse hele artiklen (3 afsnit)

Når man skal centrerer blokelementer som DIV, P, UL osv, er den korrekte løsning at sætte en bredde  (width) og margin: 0 auto; dette vil centrere elementet i forhold til brugerens synsfelt:

#sideContainer{ width:760px; margin: 0 auto; }

Ovenstående kode vil centrere HTML elementet med IDet #sideContainer i alle moderne browsere, men ønsker man support for ældre browsere som IE5/IE5.5 er det nødvendigt at ændre taktik. Ældre versioner af IE kører permanent i Quirksmode, hvilket betyder at CSS ikke tolkes i overensstemmelse med standarderne. Dette betyder bl.a. at blokelementer håndteres som inline elementer. For at omgå dette problem anvendes nedenstående kode:

body { text-align:center; /* IE5 */ } #sideContainer { text-align:left; width:760px; margin: 0 auto; }

I ovenstående kode sættes text til at aligne center i body, hvilket centrerer alle inline elementer (inkl blokelementer i IE5.X). For at omgå at elementer i #sideContainer ikke skal centreres også sættes text-align til left igen (som er standard normalt).

 

Klik her for at læse hele artiklen (4 afsnit)

Af og til ønsker man at skjule noget indhold, enten for at senere kunne aktivere det, eller for at give semantisk betydning. Hertil anvender de fleste (inkl jeg selv) nok display:none; og dette virker jo også helt efter hensigten, elementet ses ikke på skærmen, og der er ingen ekstra margin eller padding. Dette er også fint nok, men når det kommer til tilgængelighed giver display:none; problemer. Undersøgelser har vist at de større skræmoplæsere simpelthen ignorerer indhold som tildeles display:none; og dette kan jo være problematisk, derfor ser vi her på to alternative løsninger.

En af de nemmeste løsninger er simpelthen at placere indholdet absolut og med en negativ left - på den måde gives ingen ekstra mellemrum og indholdet er forsvundet fra "skærmen":

Til venstre med skidtet

.semantik { left:-1000em; position:absolute; }

Med en placering på -1000em bør der ikke være nogle skærme elementet sådan lige dukker op på :D

Klik her for at læse hele artiklen (7 afsnit)

En af de ting der er blevet mere og mere populære i den senere tid er halvgennemsigtige baggrunde. Dette er faktisk utroligt nemt at gå til med CSS, omend man lige skal være opmærksom på, at den CSS man skriver ikke er 100% valid i henhold til W3C. Når det er sagt giver det jo en fed effekt, så lad os se på sagerne.

Gennemsigtighed er indført i CSS3 med standard propertyen opacity. Dette understøttes desværre ikke i alle browsere (kun firefox, opera og safari) så derfor er det nødvendigt med minimum tre forskellige metoder:

Firefox (over 1.6), Safari og Opera (8) holder sig til standarden, så her kan opacity anvendes fx (opacity: 0.5 - vil give 50% gennemsigtighed) Firefox (under v1.6) bruger -moz-opacity: 0.5; Internet Explorer bruger selvfølgelig sine indbyggede filtre (yay) filter:alpha(opacity=50);

Altså kan det se ud som nedenstående hvis vi ønsker at gøre et div gennemsigtigt

#alphaDiv { background: #CCC; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; }

Dette vil gøre alphaDiv gennemsigtigt, men der er problemer med ovenstående. Disse afspejles nemt i mit første eksempel, hvor det er tydeligt at se alle elementer inde i DIVet også bliver gennemsigtige. Dette skyldes at alle elementer nedarver gennemsigtigheden fra opacity og -moz-opacity, og det er ikke noget man lige umiddelbart kan ændre på (nej man kan ikke bare sætte opacity til 1 på de underlæggende elementer). I IE kan problemet fixes ved at positionere DIVet relativt (position:relative), men det er der jo ikke meget Cross Browser over. Løsningen er at lægge et baggrunds DIV ind i hoveddivet, og på den måde undgå at sætte opacity på det omkredsene DIV.

Klik her for at læse hele artiklen (8 afsnit)